chore: 提交工作区剩余变更与复查文档
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
# 复查交接单 — halo-dark-mode-plugin（2026-08-08 第二版）
|
||||
|
||||
> 由审查窗口对开发窗口修复结果（`d95d172 fix: 按审查报告修复 P2/P3 问题并升级 1.0.5`、`b6403b7 docs: 按 Halo 官方插件 README 风格重写`）进行复查。
|
||||
> 初审交接单见 `docs/review-2026-08-08.md`（本文件为其复查结果，独立文档）。
|
||||
> 复查基线：`HEAD = d95d172`，工作区有未提交改动（见"遗留问题"）。
|
||||
|
||||
## 一、总体结论
|
||||
|
||||
**P2/P3 绝大部分已修复，构建链全绿，可收尾。** 无新增阻断问题。剩余 3 个遗留项均为"收尾/决策"性质。
|
||||
|
||||
## 二、逐项复查结果（对照初审交接单）
|
||||
|
||||
| 清单项 | 状态 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| P2-1 FOUC | ✅ | `useDarkMode.applyHtmlAttribute` 同步设置 `color-scheme`；`darkreader-engine.ts` 与 README 均注明 DR 异步注入、闪白无法完全消除 |
|
||||
| P2-2 文档 | ✅ | `AGENTS.md` / `CLAUDE.md` 已无旧策略残留（halo-core/overrides/Monaco/Tailwind 零命中）；`scripts/README.md` 重写；README 按 Halo 官方风格重写 |
|
||||
| P2-3 工具重复 | ⚠️ 部分 | 已删 `workplace/login_wait.py`、`workplace/scan_dark.py`；`fetch_bundle.py`、`probe_conflict.py`、`aggregate.py` 仍在（见遗留-3） |
|
||||
| P2-4 前端单测 | ✅ | 新增 `ui/src/composables/__tests__/useDarkMode.spec.ts` 8 个用例，实测 8/8 通过 |
|
||||
| P2-5 多标签同步 | ✅ | `storage` 事件监听已实现，并有 2 个测试覆盖（合法值同步 / 非法值忽略） |
|
||||
| P2-6 可访问性 | ✅ | `ThemeToggle` 改 `<button>` + `aria-pressed` + `:focus-visible`；设置页改 `radiogroup` + `role=radio` + `aria-checked` |
|
||||
| P3-1 后端日志 | ✅ | `@Slf4j` + `log.info`，替换 `System.out.println` |
|
||||
| P3-2 vendored package.json | ✅ | 裁剪为 name/version/description/main/module/types/license 最小字段 |
|
||||
| P3-3 完整性校验 | ✅ | `third-party/darkreader/SHA256SUMS` 新增，5 个文件哈希**全部实测匹配** |
|
||||
| P3-4 遗留属性注释 | ✅ | `variables.css`、`useDarkMode.ts` 已注明 `data-halo-theme` 为兼容性遗留 |
|
||||
| P3-5 i18n | ➖ 未处理 | 初审标注低优先级可暂缓，符合预期 |
|
||||
| P3-6 plugin.yaml | ✅ | `spec.enabled: true → false`（合理默认） |
|
||||
| 版本号 | ✅ | `gradle.properties` 1.0.5 + `DarkModePlugin @since 1.0.5` 同步 |
|
||||
|
||||
## 三、审查窗口实测验证（开发窗口无需重复）
|
||||
|
||||
- `vitest run`：8/8 通过
|
||||
- `vue-tsc --build`：通过
|
||||
- `vite build`：通过（main.js 110.40KB / gzip 37.96KB，style.css 4.11KB）
|
||||
- `prettier --check src`：通过（审查窗口已代跑 `prettier --write` 修复，见遗留-1）
|
||||
- `gradlew test`：BUILD SUCCESSFUL（含 `:ui:assemble` + `:processUiResources` 全链路；沙箱外联网执行）
|
||||
|
||||
## 四、遗留问题（待开发窗口收尾）
|
||||
|
||||
### 遗留-1：prettier 格式化已修，改动未提交
|
||||
- `d95d172` 中 5 个文件缺末尾换行、`variables.css` 列对齐不规范
|
||||
- 审查窗口已执行 `prettier --write src`（纯格式化，无逻辑变化），涉及文件：
|
||||
- `ui/src/components/ThemeToggle.vue`
|
||||
- `ui/src/composables/__tests__/useDarkMode.spec.ts`
|
||||
- `ui/src/composables/useDarkMode.ts`
|
||||
- `ui/src/styles/index.css`
|
||||
- `ui/src/styles/variables.css`
|
||||
- `ui/src/views/SettingsView.vue`
|
||||
- 当前这些改动在工作区**未提交**，需开发窗口提交
|
||||
|
||||
### 遗留-2：logo 改动未提交（需用户决策）
|
||||
- `src/main/resources/logo.png`：被替换（35KB → 65KB）但未提交
|
||||
- `src/main/resources/原版.png`：新增未跟踪文件（旧 logo 备份）
|
||||
- 待决策：新 logo 是否随 1.0.5 入库？`原版.png` 删除 / 保留 / gitignore？
|
||||
|
||||
### 遗留-3：workplace/ 旧工具未清完（需用户确认删除）
|
||||
- 仍保留：`fetch_bundle.py`、`probe_conflict.py`、`aggregate.py`
|
||||
- 均为旧手工 CSS 工作流配套（抓线上 bundle / 探测覆盖冲突 / 聚合扫描结果），`scan_dark.py` 删除后基本失效
|
||||
- 建议连同 `deployed-bundle.css`、`aggregate.txt`、`scan-results.json` 等产物一并清理收口到 `scripts/`
|
||||
|
||||
## 五、可选改进（非必须）
|
||||
|
||||
- `SettingsView.vue` radiogroup：各按钮可 Tab 聚焦，但未实现 ArrowUp/ArrowDown 方向键切换焦点（语义上 radiogroup 通常只保留一个 tab stop）；不影响当前可用性
|
||||
|
||||
## 六、收尾动作清单
|
||||
|
||||
1. 提交 prettier 格式化改动（遗留-1）
|
||||
2. 与用户确认 logo / 原版.png 处置（遗留-2）
|
||||
3. 与用户确认 workplace/ 剩余工具删除（遗留-3）
|
||||
4. 可选：radiogroup 方向键导航（五）
|
||||
5. 可选：推送后跑一次 `scripts/verify-toggle.py` 做真实环境回归（部署 1.0.5 后）
|
||||
@@ -1,157 +0,0 @@
|
||||
# Halo 暗色模式残留排查报告
|
||||
|
||||
> 排查时间：2026-08-07
|
||||
> 排查环境：腾讯云生产站 `blog.liuhangyv.top`（Halo Pro 2.24.2）
|
||||
> 排查方式：Playwright 自动化全路由扫描，共 92 个后台路由
|
||||
|
||||
## 一、结论摘要
|
||||
|
||||
1. **部署版本没有问题**。服务端实际加载的 `bundle.css` 与本仓库 `ui/build/dist/style.css` 的 194 条暗色规则完全一致，不存在"部署了旧包"的情况。
|
||||
2. **73 个后台路由存在深浅色残留**，19 个路由完全干净（主要是 Shop 插件全家桶、快照页、权限页）。
|
||||
3. 残留可归纳为 **3 类根因**：
|
||||
- 插件 CSS 加载顺序在最前，同特异性规则被后加载的 Halo 核心样式覆盖；
|
||||
- UnoCSS 哈希类前缀已从 `i-*` 变为 `uno-*`，现有兜底规则匹配不到；
|
||||
- 第三方插件页面（AstraHub、RSS 订阅、私密文章、AI 评论等）基本没有覆盖。
|
||||
|
||||
## 二、扫描方法与产物
|
||||
|
||||
### 方法
|
||||
|
||||
1. Playwright 启动持久化 Edge 上下文，复用已登录会话；
|
||||
2. 从 Vue Router 读取全部注册路由（92 个），逐页加载；
|
||||
3. 每页强制 `data-halo-theme="dark"`，等待网络空闲后扫描；
|
||||
4. 扫描规则：可见且尺寸大于 50×20 的元素，背景 RGB 均 >235 记为浅色背景残留，直接文本颜色 RGB 均 <70 记为深色文字残留；
|
||||
5. 每页截图存档，结果按页面 + 元素分组去重。
|
||||
|
||||
### 产物（均在 `workplace/`）
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `scan_dark.py` | 全路由扫描脚本 |
|
||||
| `scan-results.json` | 原始扫描结果（92 页 × 元素级） |
|
||||
| `aggregate.txt` | 按元素/类名/问题聚合后的明细 |
|
||||
| `shots/*.png` | 92 页深色模式截图 |
|
||||
| `deployed-bundle.css` | 服务端实际部署的 CSS 快照 |
|
||||
| `probe_conflict.py` / `fetch_bundle.py` | 样式表加载顺序与版本对比脚本 |
|
||||
|
||||
## 三、总体数据
|
||||
|
||||
| 指标 | 数值 |
|
||||
|------|------|
|
||||
| 扫描路由数 | 92 |
|
||||
| 存在残留的路由 | 73 |
|
||||
| 完全干净的路由 | 19 |
|
||||
| 去重后的残留组 | 134 |
|
||||
| 页面 × 元素残留条目 | 256 |
|
||||
| 影响页面最多的残留 | 侧边栏 `.menu-item-title.active` 高亮背景（68 页） |
|
||||
| 次多 | `.empty-title` 深色文字（16 页） |
|
||||
|
||||
无残留的 19 个路由：`/console/403`、Shop 插件全部 11 个页面、`/console/app-store/privacy-policy`、`/console/posts/snapshots`、`/console/single-pages/snapshots`、`/console/users/auth-providers`、`/console/users/roles`。
|
||||
|
||||
## 四、根因分析
|
||||
|
||||
### 根因 1（P0）：插件 CSS 加载顺序在最前，同特异性规则被 Halo 核心样式覆盖
|
||||
|
||||
**证据**（来自 `probe_conflict.py`）：
|
||||
|
||||
- 插件 `bundle.css` 是 `document.styleSheets` 的第 0 张表；
|
||||
- Halo 核心样式 `process-bar-DsZ2lvXx.css` 是第 9 张表，加载更晚；
|
||||
- 双方存在同特异性规则，CSS 级联规则让"后加载者"胜出：
|
||||
|
||||
| 规则 | 特异性 | 结果 |
|
||||
|------|--------|------|
|
||||
| Halo：`.description-item-wrapper .description-item__label { color: rgb(17 24 39) }` | (0,2,0) | 胜出 |
|
||||
| 插件：`[data-halo-theme="dark"] .description-item__label { color: var(--halo-text-secondary) }` | (0,2,0) | 被覆盖 |
|
||||
|
||||
**受影响页面**：`/console/overview`、`/console/schedule-calendar`、`/console/theme` 的详情描述项（名称、Halo、站点地址等文字仍是深色）。
|
||||
|
||||
**修复建议**：
|
||||
|
||||
- 对这类核心语义类统一加 `!important`；
|
||||
- 或把前缀从 `[data-halo-theme="dark"]` 提升为 `html[data-halo-theme="dark"]`，把特异性从 (0,2,0) 提高到 (0,2,1)。
|
||||
|
||||
推荐两者并用（提高特异性 + `!important` 双保险），因为 Halo 核心样式后续仍可能继续调整。
|
||||
|
||||
### 根因 2（P0）：UnoCSS 哈希类前缀已变化，现有兜底规则失效
|
||||
|
||||
**证据**：
|
||||
|
||||
- 大量残留元素的类名是 `uno-*` 前缀（如 `uno-ga61as`、`uno-529526`、`uno-b60d0h`）；
|
||||
- `plugin-pages.css` 中的兜底规则只覆盖 `[class*="i-"]`，这是旧版 UnoCSS 的哈希前缀；
|
||||
- 部署 CSS 探针确认：`menu-item-title`、`empty-title`、`alert-wrapper` 三个关键字在暗色规则中完全不存在。
|
||||
|
||||
**受影响页面**：AI Foundation 全家桶（每页 3–24 处）、数据迁移、装备/关注/照片/时间线/投票的卡片头部"新增"栏、SummaraidGPT 等。
|
||||
|
||||
**修复建议**：
|
||||
|
||||
- 新增 `[class*="uno-"]` 的兜底覆盖（背景、文字、边框三件套），并加 `!important`；
|
||||
- 保留 `i-*` 规则，因为扫描中仍有少量 `i-*` 哈希（如 `.i-p4hnaq`）在真实页面出现，两个前缀并存。
|
||||
|
||||
### 根因 3（P0）：核心语义类缺覆盖
|
||||
|
||||
以下类在部署 CSS 中**完全没有暗色规则**，属于新增覆盖而非覆盖失效：
|
||||
|
||||
| 类名 | 残留内容 | 影响页面 |
|
||||
|------|----------|----------|
|
||||
| `.menu-item-title.active` | 高亮背景 `rgb(243,244,246)` | 68 页 |
|
||||
| `.empty-title` | 文字 `rgb(17,24,39)` | 16 页 |
|
||||
| `.alert-wrapper` / `.alert-default` | 背景 `rgb(249,250,251)` | 3 页（概览、许可证、导入） |
|
||||
| `.description-item__label/content` | 文字 `rgb(17,24,39)` | 3 页（同特异性失效，见根因 1） |
|
||||
|
||||
**修复建议**：
|
||||
|
||||
- 侧边栏高亮：覆盖 `.menu-item-title.active`（含 `:hover`），用 `--halo-menu-item-active` 变量；
|
||||
- 空状态：覆盖 `.empty-title`，用 `--halo-text-secondary`；
|
||||
- 提示条：覆盖 `.alert-wrapper` 及各变体的背景/边框/文字。
|
||||
|
||||
### 根因 4（P1）：第三方插件页面几乎未覆盖
|
||||
|
||||
| 插件/页面 | 残留类名 | 说明 |
|
||||
|-----------|----------|------|
|
||||
| AstraHub + 心愿便签 | `.ah-card`、`.ah-topbar`、`.ah-float-nav`、`.ah-topbar-brand` | 两插件共用同一套 `ah-*` UI，覆盖一次可同时生效 |
|
||||
| RSS 订阅 | `.subscription-panel`、`.feed-toolbar`、`.feed-status-tabs`、`.feed-stream`、`.feed-brief__title` | 整个页面几乎整片浅色 |
|
||||
| 私密文章 | `.focus-card`、`.overview-card`、`.list-card`、`.empty-state` | 半透明白背景叠在深色上，文字也是深色 |
|
||||
| AI 评论自动处理 | `.setting-panel`、`.form-row`、`.sidebar-card`、`.tabs-wrap`、`.list-col`、`.reply-card` | 设置页和日志页整片浅色 |
|
||||
| 数据工坊 | `.modal-content`、`.uno-*` 卡片 | 弹窗与主内容区均残留 |
|
||||
| 代码注入器 | `.uno-*` 侧栏/编辑区 | 整页浅色 |
|
||||
| Meilisearch 概览 | `.uno-*` | 卡片与标题残留 |
|
||||
| 日志查看器 | `.monaco-editor`、`.margin`、`.lines-content` | **Monaco Editor 自带独立主题系统**，仅靠 CSS 覆盖很难稳定 |
|
||||
| 导入/存储工具 | `.uno-*` | 提示卡片、分页栏残留 |
|
||||
|
||||
**修复建议**：
|
||||
|
||||
- `ah-*`、`feed-*`、`focus-card/overview-card/list-card`、`setting-panel/form-row/sidebar-card` 等语义类按插件页面补 `!important` 规则；
|
||||
- Monaco 不要硬啃 CSS，优先在 JS 里监听主题切换并调用 `monaco.editor.setTheme('vs-dark')`，或加载官方 dark 主题 CSS；
|
||||
- 每个插件补完后再跑一次 `scan_dark.py` 验证零残留。
|
||||
|
||||
### 根因 5（P2）：历史遗留规则与自相矛盾的选择器
|
||||
|
||||
- `components.css` 中大量 `.v-*`（Vuetify 类）在 Halo 2.25 的真实 DOM 中不存在，属无效规则（CLAUDE.md 已记录）；
|
||||
- `[class*="tag-"]`、`[class*="modal"]` 等宽泛匹配容易误伤，建议逐步收紧；
|
||||
- `utilities.css` 与 `halo-core.css` 对链接色的规则互相覆盖，最终生效结果不明确；
|
||||
- `halo-core.css` 的 `html, body` 编译后为 `[data-halo-theme="dark"] html`，该选择器**永远不匹配**（html 元素不会是其自身的后代），根背景兜底实际只靠 `body` 一条，页面在特殊滚动场景下仍有露白风险。
|
||||
|
||||
## 五、修复优先级清单
|
||||
|
||||
### P0（一次重构后全站收益最大）
|
||||
|
||||
1. 全局暗色规则前缀从 `[data-halo-theme="dark"]` 升级为 `html[data-halo-theme="dark"]`；
|
||||
2. 核心语义类（`.page-header`、`.card-wrapper`、`.description-item-*`、`.table` 等）加 `!important`；
|
||||
3. 新增 `.menu-item-title.active`、`.empty-title`、`.alert-wrapper` 覆盖；
|
||||
4. 新增 `[class*="uno-"]` 兜底三件套；
|
||||
5. 修正根背景规则，让 `html` 本身也参与暗色。
|
||||
|
||||
### P1（按插件逐个补齐并复扫）
|
||||
|
||||
6. `ah-*`、`feed-*`、私密文章、AI 评论插件语义类覆盖；
|
||||
7. Monaco 主题切换接入；
|
||||
8. 数据工坊、代码注入器、Meilisearch、导入/存储工具等 `uno-*` 页面复查。
|
||||
|
||||
### P2（清理）
|
||||
|
||||
9. 删除失效的 Vuetify 类规则，收敛宽泛匹配；
|
||||
10. 统一链接色规则，消除重复/冲突。
|
||||
|
||||
## 六、完整残留明细
|
||||
|
||||
见 `workplace/aggregate.txt`（134 组，含影响页面列表），原始数据见 `workplace/scan-results.json`。
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -35,7 +35,9 @@ const { isDark, toggle } = useDarkMode()
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
color 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -59,4 +61,4 @@ const { isDark, toggle } = useDarkMode()
|
||||
font-size: 0.8125rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -103,4 +103,4 @@ describe('useDarkMode', () => {
|
||||
)
|
||||
expect(theme.value).toBe('light')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -98,4 +98,4 @@ export function useDarkMode() {
|
||||
setTheme,
|
||||
toggle,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
仅保留插件自身 UI 变量；页面暗色转换完全交给 Dark Reader。
|
||||
============================================================ */
|
||||
|
||||
@import './variables.css';
|
||||
@import './variables.css';
|
||||
|
||||
+43
-43
@@ -6,56 +6,56 @@
|
||||
/* 说明：data-halo-theme 为兼容性遗留标记，当前已无 CSS 消费方，保留给外部脚本与验证工具。 */
|
||||
/* ===== 浅色模式（Halo 默认，此处定义为显式回退） ===== */
|
||||
:root {
|
||||
--halo-bg-body: oklch(97% 0.005 250);
|
||||
--halo-bg-sidebar: oklch(100% 0 0);
|
||||
--halo-bg-content: oklch(97% 0.005 250);
|
||||
--halo-bg-card: oklch(100% 0 0);
|
||||
--halo-bg-input: oklch(100% 0 0);
|
||||
--halo-bg-hover: oklch(95% 0.01 250);
|
||||
--halo-bg-active: oklch(90% 0.02 160);
|
||||
--halo-bg-disabled: oklch(95% 0.005 250);
|
||||
--halo-bg-tooltip: oklch(20% 0.01 250);
|
||||
--halo-bg-modal: oklch(0% 0 0 / 60%);
|
||||
--halo-bg-dropdown: oklch(100% 0 0);
|
||||
--halo-bg-body: oklch(97% 0.005 250);
|
||||
--halo-bg-sidebar: oklch(100% 0 0);
|
||||
--halo-bg-content: oklch(97% 0.005 250);
|
||||
--halo-bg-card: oklch(100% 0 0);
|
||||
--halo-bg-input: oklch(100% 0 0);
|
||||
--halo-bg-hover: oklch(95% 0.01 250);
|
||||
--halo-bg-active: oklch(90% 0.02 160);
|
||||
--halo-bg-disabled: oklch(95% 0.005 250);
|
||||
--halo-bg-tooltip: oklch(20% 0.01 250);
|
||||
--halo-bg-modal: oklch(0% 0 0 / 60%);
|
||||
--halo-bg-dropdown: oklch(100% 0 0);
|
||||
|
||||
--halo-text-primary: oklch(20% 0.01 250);
|
||||
--halo-text-secondary: oklch(45% 0.01 250);
|
||||
--halo-text-tertiary: oklch(60% 0.01 250);
|
||||
--halo-text-link: oklch(45% 0.15 160);
|
||||
--halo-text-inverse: oklch(100% 0 0);
|
||||
--halo-text-primary: oklch(20% 0.01 250);
|
||||
--halo-text-secondary: oklch(45% 0.01 250);
|
||||
--halo-text-tertiary: oklch(60% 0.01 250);
|
||||
--halo-text-link: oklch(45% 0.15 160);
|
||||
--halo-text-inverse: oklch(100% 0 0);
|
||||
|
||||
--halo-border-base: oklch(88% 0.01 250);
|
||||
--halo-border-light: oklch(93% 0.005 250);
|
||||
--halo-border-input: oklch(80% 0.01 250);
|
||||
--halo-border-focus: oklch(55% 0.15 160);
|
||||
--halo-border-base: oklch(88% 0.01 250);
|
||||
--halo-border-light: oklch(93% 0.005 250);
|
||||
--halo-border-input: oklch(80% 0.01 250);
|
||||
--halo-border-focus: oklch(55% 0.15 160);
|
||||
|
||||
--halo-accent-primary: oklch(55% 0.14 160);
|
||||
--halo-accent-primary-hover: oklch(48% 0.15 160);
|
||||
--halo-accent-primary-text: oklch(100% 0 0);
|
||||
--halo-accent-danger: oklch(45% 0.18 25);
|
||||
--halo-accent-danger-hover: oklch(40% 0.19 25);
|
||||
--halo-accent-success: oklch(50% 0.16 150);
|
||||
--halo-accent-warning: oklch(60% 0.16 85);
|
||||
--halo-accent-primary: oklch(55% 0.14 160);
|
||||
--halo-accent-primary-hover: oklch(48% 0.15 160);
|
||||
--halo-accent-primary-text: oklch(100% 0 0);
|
||||
--halo-accent-danger: oklch(45% 0.18 25);
|
||||
--halo-accent-danger-hover: oklch(40% 0.19 25);
|
||||
--halo-accent-success: oklch(50% 0.16 150);
|
||||
--halo-accent-warning: oklch(60% 0.16 85);
|
||||
|
||||
--halo-shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
|
||||
--halo-shadow-base: 0 2px 8px oklch(0% 0 0 / 10%);
|
||||
--halo-shadow-lg: 0 4px 16px oklch(0% 0 0 / 14%);
|
||||
--halo-shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
|
||||
--halo-shadow-base: 0 2px 8px oklch(0% 0 0 / 10%);
|
||||
--halo-shadow-lg: 0 4px 16px oklch(0% 0 0 / 14%);
|
||||
|
||||
--halo-scrollbar-thumb: oklch(80% 0.01 250);
|
||||
--halo-scrollbar-track: oklch(95% 0.005 250);
|
||||
--halo-scrollbar-thumb: oklch(80% 0.01 250);
|
||||
--halo-scrollbar-track: oklch(95% 0.005 250);
|
||||
|
||||
--halo-search-bg: oklch(95% 0.01 250);
|
||||
--halo-search-text: oklch(45% 0.01 250);
|
||||
--halo-search-placeholder: oklch(60% 0.01 250);
|
||||
--halo-search-bg: oklch(95% 0.01 250);
|
||||
--halo-search-text: oklch(45% 0.01 250);
|
||||
--halo-search-placeholder: oklch(60% 0.01 250);
|
||||
|
||||
--halo-menu-item-hover: oklch(93% 0.02 160);
|
||||
--halo-menu-item-active: oklch(88% 0.03 160);
|
||||
--halo-menu-group-title: oklch(55% 0.01 250);
|
||||
--halo-menu-item-hover: oklch(93% 0.02 160);
|
||||
--halo-menu-item-active: oklch(88% 0.03 160);
|
||||
--halo-menu-group-title: oklch(55% 0.01 250);
|
||||
|
||||
--halo-table-header-bg: oklch(96% 0.005 250);
|
||||
--halo-table-row-hover: oklch(93% 0.015 250);
|
||||
--halo-table-border: oklch(88% 0.01 250);
|
||||
--halo-table-header-bg: oklch(96% 0.005 250);
|
||||
--halo-table-row-hover: oklch(93% 0.015 250);
|
||||
--halo-table-border: oklch(88% 0.01 250);
|
||||
|
||||
--halo-tag-bg: oklch(90% 0.04 160);
|
||||
--halo-tag-text: oklch(40% 0.1 160);
|
||||
--halo-tag-bg: oklch(90% 0.04 160);
|
||||
--halo-tag-text: oklch(40% 0.1 160);
|
||||
}
|
||||
|
||||
@@ -31,11 +31,7 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
|
||||
当前生效：<strong>{{ currentEffectiveMode }}</strong>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dark-mode-settings__options"
|
||||
role="radiogroup"
|
||||
aria-label="主题模式"
|
||||
>
|
||||
<div class="dark-mode-settings__options" role="radiogroup" aria-label="主题模式">
|
||||
<button
|
||||
v-for="option in modeOptions"
|
||||
:key="option.value"
|
||||
@@ -111,7 +107,9 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
|
||||
text-align: left;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, border-color 0.15s;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
|
||||
.dark-mode-settings__option:hover {
|
||||
@@ -139,4 +137,4 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
|
||||
font-size: 0.8125rem;
|
||||
color: var(--halo-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user