图寻黑白主题插件

创建于 6 天前
更新于 6 天前
美化图寻默认界面
#界面优化
#图寻
数据统计
总安装量
7
近 24 小时
+2
用户评分
-
为图寻网站添加黑白主题美化的用户样式脚本

功能介绍

1. 活动列表黑白现代化美化

  1. 重置活动列表默认原生样式,清除多余边距
  2. 每条活动条目左侧添加居中「✦」标识
  3. 鼠标悬浮上浮动画、柔和阴影、浅灰底色过渡效果
  4. 自动适配系统深色模式,深浅两套配色自动切换
  5. 统一无衬线字体,提升文字阅读清晰度

2. 全站页面自定义样式

  1. 主页背景修改为纯白 #fff
  2. 用户头像圆角调整,个人资料卡片固定悬浮右上角
  3. 统一头部、用户名、页脚文字色彩
  4. 卡片、导航栏视觉统一优化

3. 自动替换网站Logo

  1. 通过MutationObserver监听页面DOM加载
  2. 识别Logo元素后自动替换图片链接
  3. 匹配成功后停止监听,降低性能消耗

二、完整脚本代码

// ==UserScript==
// @name         图寻黑白主题插件
// @namespace    https://docs.scriptcat.org/
// @version      1.1
// @author       You
// @description  美化图寻默认界面
// @match        https://tuxun.fun
// @grant        GM_addStyle
// @icon         https://img.cdn1.vip/i/6a5c78632ded6_1784445027.png
// @license Apache-2.0
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle(`
        .activities___syRjf {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            background: #fff !important;
            border-radius: 7px;
        }
        .activity___hL3wd {
            position: relative !important;
            display: block !important;
            color: #111111 !important;
            background: #fff !important;
            margin: 10px 0 !important;
            padding: 14px 16px 14px 36px !important;
            border-radius: 8px !important;
            border: 1px solid #eeeeee !important;
            transition: all 0.2s ease !important;
            font-family: system-ui, -apple-system, sans-serif !important;
            text-decoration: none !important;
        }
        .activity___hL3wd::before {
            content: "✦" !important;
            position: absolute !important;
            left: 12px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: #222222 !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }
        .activity___hL3wd:hover {
            background: #eeeeee !important;
            border-color: #dddddd !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
        }
        @media (prefers-color-scheme: dark) {
            .activities___syRjf {
                background: #121212 !important;
            }
            .activity___hL3wd {
                color: #f1f1f1 !important;
                background: #1e1e1e !important;
                border: 1px solid #333333 !important;
            }
            .activity___hL3wd::before {
                color: #dddddd !important;
            }
            .activity___hL3wd:hover {
                background: #2a2a2a !important;
                border-color: #444444 !important;
            }
        }
        .logo___KYw8m{
            position: fixed !important;
        }
        .homePage___A0eaw {
            background-color: #fff !important;
        }
        .tuxunAvatar___Opyib>span{
            border-radius: 15% !important;
        }
        .username___IV8sv{
            color: #000 !important;
        }
        .profile___ovu_M{
            border-radius: 6px !important;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            position: fixed !important;
            top: 10px;
            right: 2vw;
        }
        .profile___ovu_M:hover{
            background-color: #f0f2f4 !important;
        }
        .card___AUSml{
            background-color: #000 !important;
        }
        .header___tHXcr{
            color: #000 !important;
        }
        .footer___bENUZ p{
            color: #8e8e8e;
        }
        .activities___syRjf+div{
            color: #fff !important;
            text-decoration: none !important;
        }
    `);
    const observer = new MutationObserver(() => {
        const img = document.querySelector('.logo___KYw8m img');
        if (img) {
            img.src = "https://img.cdn1.vip/i/6a5c78632ded6_1784445027.png";
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();
脚本详情
适用网站
许可协议Apache-2.0