القائمة
当用户想要添加新主题（深色或浅色）时使用此技能。提供完整的主题实现流程，包括 CSS 变量设计、类型定义和 UI 集成。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | add-theme |
| description | 当用户想要添加新主题（深色或浅色）时使用此技能。提供完整的主题实现流程，包括 CSS 变量设计、类型定义和 UI 集成。 |
本技能指导如何为项目实现新主题。项目通过 CSS 变量支持多个深色和浅色主题，使用 data-theme 属性进行切换。default 主题无需选择器，保持向后兼容。
用户会提供参考的主题样式文件（如 GitHub 主题、其他设计系统的主题 CSS），基于此生成新主题的 CSS 变量。
参考文件:
references/element-dark-vars.css - Element Plus 暗色主题原始变量src/styles/themes.scss - 现有主题实现参考OptionsKey.DarkThemeDarkTheme 定义于 src/constants/index.tshtml.dark[data-theme='dark-{theme}']OptionsKey.LightThemeLightTheme 定义于 src/constants/index.tshtml[data-theme='light-{theme}']（不需要 .light 类）注意: default 主题不使用选择器，继承原始样式。
在 src/constants/index.ts 中添加:
// 深色主题
export const enum DarkTheme {
Default = 'default',
Soft = 'soft',
// 新增: NewTheme = 'new-theme',
}
// 浅色主题
export const enum LightTheme {
Default = 'default',
Solarized = 'solarized',
// 新增: Warm = 'warm',
}
在 src/types/index.ts 中更新类型定义。
在 src/styles/themes.scss 中添加主题样式。参考文件结构：
/* stylelint-disable no-descending-specificity */
// 1. 全局变量定义（所有主题共享）
html {
--gzk-qq-group-qrcode: url('@/assets/img/qq-group-qrcode.png');
}
// 2. 通用主题属性（所有非默认主题共享）
html[data-theme] {
--el-fill-color-blank: transparent;
}
// 3. 深色主题通用变量
html[data-theme^='dark'] {
--gzk-node-bg-color: rgb(255 255 255 / 10%);
--gzk-topic-hover-bg-color: rgb(255 255 255 / 5%);
--gzk-qq-group-qrcode: url('@/assets/img/qq-group-qrcode-dark.png');
}
// 4. 浅色主题通用变量
html[data-theme^='light'] {
--gzk-node-bg-color: rgb(0 0 0 / 10%);
--gzk-topic-hover-bg-color: rgb(0 0 0 / 5%);
--gzk-qq-group-qrcode: url('@/assets/img/qq-group-qrcode-light.png');
}
// 5. 特定深色主题 - 示例
tml.dark[data-theme='dark-soft'] {
// 功能色（如需要调整）
--el-color-info: #7d8590;
--el-color-info-light-3: #6e7681;
// ... 其他 info 色阶
// 阴影
--el-box-shadow: 0px 12px 32px 4px rgb(1 4 9 / 36%), ...;
--el-box-shadow-light: ...;
--el-box-shadow-lighter: ...;
--el-box-shadow-dark: ...;
// 背景色
--el-bg-color-page: #0d1117;
--el-bg-color: #212830;
--el-bg-color-overlay: #262c36;
// 文字色
--el-text-color-primary: #d1d7e0;
--el-text-color-regular: #b7bcc4;
--el-text-color-secondary: #9198a1;
--el-text-color-placeholder: #656c76;
--el-text-color-disabled: #484f58;
// 边框色
--el-border-color-darker: #6e7681;
--el-border-color-dark: #484f58;
--el-border-color: #3d444d;
--el-border-color-light: #394049;
--el-border-color-lighter: #30363d;
--el-border-color-extra-light: #161b22;
// 填充色
--el-fill-color-darker: #363b41;
--el-fill-color-dark: #2d3238;
--el-fill-color: #262c36;
--el-fill-color-light: #1e2328;
--el-fill-color-lighter: #161b22;
--el-fill-color-extra-light: #0d1117;
// 遮罩
--el-mask-color: rgb(1 4 9 / 80%);
--el-mask-color-extra-light: rgb(1 4 9 / 30%);
// 自定义 GZK 变量
--gzk-reply-count-bg-color: #4c5359;
--gzk-reply-count-visited-bg-color: #757b83;
// 组件级样式覆盖
.el-empty {
--el-empty-fill-color-0: var(--el-color-black);
--el-empty-fill-color-1: #3d434d;
// ...
}
// Markdown 样式覆盖
.markdown-body,
.cherry-markdown.theme__github,
.topic-detail .ui-content,
.topic-reply .ui-content {
--color-canvas-subtle: #161b22;
}
}
// 6. 特定浅色主题 - 示例
html[data-theme='light-solarized'] {
// 主题色
--el-color-primary: #b58900;
--el-color-primary-light-3: #c9a01a;
// ... 其他 primary 色阶
--el-color-primary-dark-2: #8f6c00;
// 功能色（如需要调整）
--el-color-success: #859900;
// ...
--el-color-info: #839496;
// ...
// 阴影、背景色、文字色、边框色、填充色、遮罩（同上结构）
// ...
// 自定义 GZK 变量
--gzk-reply-count-bg-color: #bcc7c9;
--gzk-reply-count-visited-bg-color: #e2e3eb;
// 组件级样式覆盖
.el-empty {
--el-empty-fill-color-0: var(--el-color-white);
--el-empty-fill-color-1: #f4efdf;
// ...
}
.el-popper {
color: var(--el-text-color-primary);
background: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
}
// Markdown 样式覆盖
.markdown-body,
.cherry-markdown.theme__github,
.topic-detail .ui-content,
.topic-reply .ui-content {
--color-canvas-subtle: #eee8d5;
}
}
在 src/views/basic-setting/DarkTheme.vue 或 LightTheme.vue 中添加:
<el-radio value="new-theme">{{ t('settings.darkTheme.newTheme') }}</el-radio>
在 src/i18n/locales/zh.json 和 en.json 中添加翻译。
用户提供参考的主题样式文件（CSS/SCSS/JSON），从中提取颜色变量。
对比基准:
references/element-dark-vars.css| 类别 | Element Plus 前缀 | 说明 |
|---|---|---|
| 主题色 | --el-color-primary | 品牌主色 |
| 功能色 | --el-color-{type} | success, warning, danger, error, info |
| 阴影 | --el-box-shadow | 阴影效果 |
| 背景色 | --el-bg-color | 页面背景、组件背景、浮层背景 |
| 文字色 | --el-text-color | 主要、次要、占位符、禁用状态 |
| 边框色 | --el-border-color | 边框各层级 |
| 填充色 | --el-fill-color | 填充背景 |
| 遮罩 | --el-mask-color | 遮罩层 |
| 自定义 | --gzk-* | 项目特定变量 |
需要根据参考主题调整的变量:
| 变量类别 | 是否必须调整 | 说明 |
|---|---|---|
| Primary | 视情况 | 如参考主题有明确品牌色则调整 |
| Success | 视情况 | 如参考主题有对应的成功色则调整 |
| Warning | 视情况 | 如参考主题有对应的警告色则调整 |
| Danger/Error | 视情况 | 如参考主题有对应的错误色则调整 |
| Info | 通常需要 | 通常需适配主题的次要信息色 |
| 阴影 | 通常需要 | 调整 RGBA 值适配主题基调 |
| 背景色 | 必须 | 核心变量，决定主题基调 |
| 文字色 | 必须 | 核心变量，影响可读性 |
| 边框色 | 必须 | 核心变量，影响层次感 |
| 填充色 | 必须 | 核心变量，影响交互反馈 |
| 遮罩 | 通常需要 | 调整透明度适配主题 |
| GZK 自定义 | 必须 | 根据主题调整配色 |
无需重复定义的变量:
--el-fill-color-blank: transparent - 已在全局定义--el-button-disabled-text-color - 使用默认继承--el-card-bg-color - 引用变量会自动继承使用属性选择器前缀匹配，定义通用变量：
// 匹配所有 dark 主题
html[data-theme^='dark'] {
--gzk-node-bg-color: rgb(255 255 255 / 10%);
}
// 匹配所有 light 主题
html[data-theme^='light'] {
--gzk-node-bg-color: rgb(0 0 0 / 10%);
}
常见设计系统的功能色对应:
| Element Plus | GitHub Primer | Solarized | 说明 |
|---|---|---|---|
| Primary | accent / blue | yellow | 品牌主色 |
| Success | success / green | green | 成功状态 |
| Warning | attention / yellow | yellow | 警告状态 |
| Danger | danger / red | red | 错误状态 |
| Info | muted / gray | base00 | 次要信息 |
每个 Element Plus 颜色有 7 个变体:
{color} - 基础色
{color}-light-3 - 变亮 3 级 (hover)
{color}-light-5 - 变亮 5 级
{color}-light-7 - 变亮 7 级
{color}-light-8 - 变亮 8 级
{color}-light-9 - 变亮 9 级 (背景)
{color}-dark-2 - 变暗 2 级 (active)
生成方法:
darker → 最深（强调边框）
dark → 深
(默认) → 标准
light → 浅
lighter → 更浅
extra-light → 最浅（分割线）
darker → 最深
dark → 深
(默认) → 标准（hover 状态）
light → 浅
lighter → 更浅
extra-light → 最浅（背景）
项目特定的自定义变量，需要根据主题调整：
// 回复数背景色
--gzk-reply-count-bg-color: #xxx;
--gzk-reply-count-visited-bg-color: #xxx;
// 节点背景色（已在通用选择器定义）
--gzk-node-bg-color: rgb(...);
// 话题悬停背景色（已在通用选择器定义）
--gzk-topic-hover-bg-color: rgb(...);
// QQ群二维码图片（已在通用选择器定义）
--gzk-qq-group-qrcode: url('...');
某些组件需要特定样式覆盖：
// Empty 组件 - 调整插画颜色
.el-empty {
--el-empty-fill-color-0: var(--el-color-black); // 深色主题
--el-empty-fill-color-0: var(--el-color-white); // 浅色主题
--el-empty-fill-color-1: #xxx;
// ...
}
// Popper 组件 - 统一弹窗样式
.el-popper {
color: var(--el-text-color-primary);
background: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
}
.markdown-body,
.cherry-markdown.theme__github,
.topic-detail .ui-content,
.topic-reply .ui-content {
--color-canvas-subtle: #xxx; // 代码块背景等
}
[data-theme^='dark'] 或 [data-theme^='light']dark-soft 和 light-solarized 的实现方式element-dark-vars.css - Element Plus 暗色主题原始 CSS 变量代码生成后执行自动化质量检查。运行 Prettier 格式化、ESLint 检查修复和 TypeScript 类型检查。
以持续追问的方式"拷问"用户的设计方案或计划，沿决策树逐一解决每个分支的依赖关系，直到达成共识。当用户想要压力测试方案、被"盘问"设计思路，或提到"拷问我"/"grill me"/"审查方案"/"盘问方案"/"帮我梳理"等表达时使用。
添加一个新的 Content Script，注入到过早客论坛页面中。包含脚本创建、Vue 应用挂载和在主入口注册的完整流程。
为项目端到端地添加一个完整的新功能。覆盖从需求分析到代码生成、测试验证的全部流程，涉及 Content Script、Vue 组件、选项配置、国际化等多个层面。
为过早客论坛页面添加新的 HTML 解析函数，从论坛 HTML 中提取结构化数据。遵循项目现有的正则解析模式。
为项目添加国际化翻译。使用 vue-i18n 管理中文和英文翻译，包含翻译 key 设计、文件更新和使用方式。