ZOOT-Plus 暗黑模式配色优化与油猴脚本实现
初始暗黑模式问题与需求
嘿，哥们！最近在使用 ZOOT-Plus 的时候，我发现它自带的暗黑模式，怎么说呢，看起来不太舒服。背景色总感觉怪怪的，而且文字的显示效果也不够突出，感觉眼睛有点遭罪。特别是长时间盯着屏幕的时候，那种视觉疲劳感就更明显了。就像是原本想在深夜里享受一场视觉盛宴，结果却发现灯光不够亮，看东西都费劲。
所以，我一直在思考如何优化这个问题。毕竟，一个舒适的暗黑模式对于我们这些夜猫子和长时间使用电脑的人来说，简直太重要了。我们希望能够在不牺牲视觉享受的前提下，尽可能地减少眼睛的疲劳，并且让整个界面的信息呈现更加清晰、美观。这就是我开始琢磨 ZOOT-Plus 暗黑模式配色的原因，也是我写这篇文章的原因。我希望通过一些调整，让暗黑模式变得更加友好，让大家在浏览 ZOOT-Plus 时有更好的体验。总而言之，我们希望通过优化配色，让暗黑模式更加舒适，让文字更加突出，让视觉体验更加优秀。
参考配色与油猴脚本探索
为了找到更好的配色方案，我开始四处寻找灵感。我尝试过很多不同的搭配，看了很多其他网站的暗黑模式设计，希望能够找到一个既好看又实用的方案。经过一番研究，我发现一些网站的暗黑模式配色确实很棒，比如那种深灰色的背景搭配亮色的文字，或者是一些冷色调的组合，都能给人一种很舒服的感觉。我开始模仿这些设计，尝试在 ZOOT-Plus 上进行调整。当然，直接修改网站的 CSS 是不太现实的，所以我把目光投向了油猴脚本。
油猴脚本简直是神器啊，它可以让我们在不修改网站本身代码的情况下，自定义网站的样式和功能。我之前也用过一些油猴脚本，感觉非常方便。于是，我开始着手编写一个油猴脚本，来改变 ZOOT-Plus 的暗黑模式配色。我希望通过脚本，将背景色、文字颜色、按钮颜色等都进行调整，最终达到一个理想的视觉效果。这个过程就像是给 ZOOT-Plus 穿上了一件新的衣服，让它变得更加个性化和美观。
Gemini 脚本实现与代码解析
经过一番努力，我终于完成了我的油猴脚本，它能够改善 ZOOT-Plus 的暗黑模式配色。这个脚本是Gemini 3 pro 帮我生成的，现在我把它分享出来，希望能帮助到有同样需求的小伙伴们。
// ==UserScript==
// @name PRTS Plus 暗黑模式 (罗德岛终端风格) - V7.0
// @namespace http://tampermonkey.net/
// @version 7.0
// @description 修复“突袭”标签区分度不够的问题。深度适配 Tailwind、Blueprint 及 Markdown 样式。
// @author AI Designer (Gemini 3 pro)
// @match https://zoot.plus/*
// @grant GM_addStyle
// @run-at document-body
// ==/UserScript==
(function() {
'use strict';
// --- 1. 罗德岛配色定义 ---
const c = {
bgDeep: '#18181c', // 全局深底
bgCard: '#232326', // 卡片/弹窗
bgHover: '#2d2d30', // 悬浮/代码块
border: '#38383b', // 边框
textMain: '#e0e0e0', // 主字
textSub: '#9ca3af', // 辅字
primary: '#5c8ae6', // 罗德岛蓝
// 专为突袭标签设计的配色
tagRedBg: '#4a1e1e', // 暗红背景
tagRedText: '#fca5a5', // 亮粉红文字
tagRedBorder: '#7f1d1d' // 深红边框
};
// --- 2. CSS 样式 ---
const cssStyle = `
/* ==========================================================================
第一部分：全局与 Tailwind 覆盖
========================================================================== */
html, body, #root, #app,
.bg-zinc-50, .bg-slate-50, .bg-gray-50, .bg-white,
.bg-zinc-100, .bg-slate-100, .bg-gray-100 {
background-color: ${c.bgDeep} !important;
color: ${c.textMain} !important;
}
/* 修复顶部导航栏 */
.bp4-navbar {
background-color: ${c.bgCard} !important;
border-bottom: 1px solid ${c.border} !important;
box-shadow: none !important;
}
/* ==========================================================================
第二部分：抽屉 (Drawer) 与 弹窗
========================================================================== */
.bp4-drawer, .bp4-drawer > section, .bp4-overlay-content {
background-color: ${c.bgDeep} !important;
color: ${c.textMain} !important;
}
.bp4-drawer .bg-slate-100,
.bp4-drawer header,
.bp4-drawer .text-lg.font-medium {
background-color: ${c.bgCard} !important;
border-bottom: 1px solid ${c.border} !important;
color: ${c.textMain} !important;
}
.bp4-drawer .h-full.overflow-auto {
background-color: ${c.bgDeep} !important;
}
/* ==========================================================================
第三部分：组件通用美化
========================================================================== */
.bp4-card, .card-container {
background-color: ${c.bgCard} !important;
border: 1px solid ${c.border} !important;
box-shadow: none !important;
color: ${c.textMain} !important;
}
h1, h2, h3, h4, h5, .bp4-heading, strong { color: #fff !important; }
.text-gray-700, .text-zinc-600, .text-slate-900, .text-gray-800 { color: ${c.textMain} !important; }
.text-gray-500, .text-zinc-500 { color: ${c.textSub} !important; }
/* 按钮与输入框 */
.bp4-button {
background-color: ${c.bgHover} !important;
background-image: none !important;
border: 1px solid ${c.border} !important;
color: ${c.textMain} !important;
box-shadow: none !important;
}
.bp4-button.bp4-intent-primary {
background-color: ${c.primary} !important;
color: #fff !important;
border: none !important;
}
.bp4-input, textarea, select {
background-color: ${c.bgHover} !important;
color: #fff !important;
border: 1px solid ${c.border} !important;
box-shadow: none !important;
}
.bp4-input::placeholder, textarea::placeholder { color: #666 !important; }
/* ==========================================================================
关键修复：标签 (Tag) 分类处理
========================================================================== */
/* 1. 普通灰色标签 (普通难度/职业等) */
.bp4-tag {
background-color: #333 !important;
color: #ccc !important;
border: 1px solid #444 !important;
}
/* 2. 突袭/红色标签 (特指包含 bg-red-xxx 的标签) */
.bp4-tag[class*="bg-red-"],
.bp4-tag.bg-red-400 {
background-color: ${c.tagRedBg} !important;
color: ${c.tagRedText} !important;
border-color: ${c.tagRedBorder} !important;
}
/* 修复头像背景 */
.bg-orange-200 { background-color: #4a3020 !important; border-color: #6d4020 !important; }
/* 滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: ${c.bgDeep}; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
/* ==========================================================================
第四部分：Markdown 内容深度适配
========================================================================== */
.markdown-body {
color: ${c.textMain} !important;
background-color: transparent !important;
font-family: inherit !important;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
color: #fff !important;
border-bottom-color: ${c.border} !important;
}
.markdown-body pre, .markdown-body code, .markdown-body tt {
background-color: ${c.bgHover} !important;
color: ${c.textMain} !important;
border-radius: 4px;
}
.markdown-body blockquote {
color: ${c.textSub} !important;
border-left-color: ${c.border} !important;
}
.markdown-body table tr {
background-color: transparent !important;
border-top-color: ${c.border} !important;
}
.markdown-body table tr:nth-child(2n) {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.markdown-body table td, .markdown-body table th {
border-color: ${c.border} !important;
}
.markdown-body table th {
font-weight: bold !important;
color: #fff !important;
}
.markdown-body a {
color: ${c.primary} !important;
}
`;
// --- 3. 安全执行逻辑 ---
GM_addStyle(cssStyle);
setTimeout(() => {
try { document.documentElement.classList.add('dark'); } catch (e) {}
}, 500);
})();
这个脚本主要做了以下几件事：
- 定义了颜色：首先，在脚本中定义了一系列颜色变量。这些颜色变量将用于覆盖 ZOOT-Plus 默认的样式。比如，
bgDeep代表全局的背景颜色，textMain代表主要文本颜色，primary代表强调色等等。这些颜色都是精心挑选的，旨在打造一个舒适、美观的暗黑模式。 - 编写了 CSS 样式：然后，脚本中包含了大量的 CSS 样式代码。这些代码通过
GM_addStyle函数注入到网页中。这些 CSS 样式会覆盖 ZOOT-Plus 默认的样式，从而实现暗黑模式的定制。例如，通过修改html, body的background-color和color属性，可以改变整个页面的背景颜色和文字颜色。同时，还针对各种组件（如按钮、输入框、卡片等）进行了样式调整，确保它们在暗黑模式下也能正常显示。 - 处理特殊情况：脚本还特别关注了诸如标签、Markdown 内容等特殊情况的处理。例如，为了区分“突袭”标签，脚本定义了特殊的红色背景和文字颜色。对于 Markdown 内容，脚本也进行了适配，确保标题、代码块、引用等元素在暗黑模式下也能清晰显示。
- 安全执行与兼容性：脚本还使用了
setTimeout函数来确保在页面加载完成后再执行样式修改，避免了样式覆盖不及时的问题。同时，脚本还尝试为document.documentElement添加dark类名，这有助于其他组件或脚本识别当前是否处于暗黑模式。
脚本效果预览与安装方法
在安装并启用脚本后，你就能看到 ZOOT-Plus 的暗黑模式焕然一新了。整个界面会呈现出一种深色调，文字和各种元素也都会以更适合暗黑模式的颜色显示。相信这种全新的视觉效果，一定会让你眼前一亮。
安装方法：
- 首先，你需要安装一个油猴脚本管理器，比如 Tampermonkey（https://www.tampermonkey.net/).
- 然后，点击脚本代码中的“安装”按钮，或者直接将代码复制到油猴脚本管理器的编辑框中。
- 最后，打开 ZOOT-Plus 网站，刷新页面，就能看到效果了。
结语与持续优化
希望这个油猴脚本能够帮助到大家，让大家在 ZOOT-Plus 上拥有更好的暗黑模式体验。当然，这个脚本可能还存在一些不足，比如在某些页面上可能没有完全适配，或者某些细节的颜色搭配不够完美。如果大家在使用过程中发现了问题，或者有更好的建议，欢迎随时提出。我会持续优化这个脚本，让它变得更好用。
感谢大家的阅读和支持！希望我们都能在 ZOOT-Plus 的世界里，度过愉快的时光！