mirrors2/openteam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端: 修复浅色模式白字 + 主题优化

Browse Source 
- 修 nav 激活态残留 text-zinc-50 导致浅色下白字白底
- @theme 令牌改实色字面量, 浅色用 [data-theme=light] 覆盖同一批 --color-*
- 新增 soft 令牌(accent/ok/warn/err, color-mix 运行时解析)替代烘焙的透明度修饰符,
  修复 badge 实色底、focus ring 实线等问题
- ThemeToggle 改三选下拉(浅色/深色/跟随系统), 系统自动为显式选项
- 浅色强调色调深保证 WCAG 对比度, 全量复查无残留硬编码颜色类

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sakurasan
2026-08-15 16:30:11 +08:00
co-authored by Claude
parent a422034b2b
commit 6adadebaf0
14 changed files with 148 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+44 -50
View File
@@ -4,77 +4,71 @@
/* ------------------------------------------------------------------ */
/* 设计 tokens（taste-skill 产出） */
/* 三主题：dark / light / system（data-theme 切换，CSS 变量语义令牌） */
/* 单一强调色 emerald · 圆角:卡片 8 / 控件 6 / 徽章 pill */
/* 三主题 dark / light / system（data-theme 切换） */
/* 令牌值在 @theme 内写实色字面量 → 透明度修饰符(如 bg-accent-soft)可用； */
/* [data-theme=light] 覆盖同一批 --color-* 变量实现主题切换。 */
/* 圆角:卡片 8 / 控件 6 / 徽章 pill */
/* ------------------------------------------------------------------ */
@theme {
--font-sans: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
/* 语义令牌 → CSS 变量（随 data-theme 切换） */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface2: var(--surface2);
--color-edge: var(--edge);
--color-edge2: var(--edge2);
--color-ink: var(--ink);
--color-muted: var(--muted);
--color-accent: var(--accent);
--color-accent-strong: var(--accent-strong);
--color-accent-ink: var(--accent-ink);
--color-ok: var(--ok);
--color-warn: var(--warn);
--color-err: var(--err);
/* 深色（默认）语义令牌 */
--color-bg: #09090b;
--color-surface: #18181b;
--color-surface2: #27272a;
--color-edge: #27272a;
--color-edge2: #3f3f46;
--color-ink: #f4f4f5;
--color-muted: #a1a1aa;
--color-accent: oklch(0.72 0.17 152);
--color-accent-strong: oklch(0.64 0.19 152);
--color-accent-ink: #09090b;
--color-ok: oklch(0.72 0.17 152);
--color-warn: #fbbf24;
--color-err: #f87171;
/* 软色（color-mix 运行时解析，随主题自适应） */
--color-accent-soft: color-mix(in oklab, var(--color-accent) 15%, transparent);
--color-ok-soft: color-mix(in oklab, var(--color-ok) 15%, transparent);
--color-warn-soft: color-mix(in oklab, var(--color-warn) 15%, transparent);
--color-err-soft: color-mix(in oklab, var(--color-err) 12%, transparent);
}
/* 深色（默认） */
:root,
[data-theme='dark'] {
/* 默认深色 */
:root {
color-scheme: dark;
--bg: #09090b;
--surface: #18181b;
--surface2: #27272a;
--edge: #27272a;
--edge2: #3f3f46;
--ink: #f4f4f5;
--muted: #a1a1aa;
--accent: oklch(0.72 0.17 152);
--accent-strong: oklch(0.64 0.19 152);
--accent-ink: #09090b;
--ok: oklch(0.72 0.17 152);
--warn: #fbbf24;
--err: #f87171;
}
/* 浅色 */
/* 浅色：覆盖同一批语义令牌 */
[data-theme='light'] {
color-scheme: light;
--bg: #fafafa;
--surface: #ffffff;
--surface2: #f4f4f5;
--edge: #e4e4e7;
--edge2: #d4d4d8;
--ink: #18181b;
--muted: #52525b;
--accent: oklch(0.58 0.16 152);
--accent-strong: oklch(0.52 0.16 152);
--accent-ink: #ffffff;
--ok: oklch(0.58 0.16 152);
--warn: #d97706;
--err: #dc2626;
--color-bg: #fafafa;
--color-surface: #ffffff;
--color-surface2: #f4f4f5;
--color-edge: #e4e4e7;
--color-edge2: #d4d4d8;
--color-ink: #18181b;
--color-muted: #52525b;
--color-accent: oklch(0.52 0.14 152);
--color-accent-strong: oklch(0.47 0.14 152);
--color-accent-ink: #ffffff;
--color-ok: oklch(0.52 0.14 152);
--color-warn: #d97706;
--color-err: #dc2626;
}
body {
background-color: var(--bg);
color: var(--ink);
background-color: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
/* 全站统一键盘焦点可见性 */
:focus-visible {
outline: 2px solid var(--accent);
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
@@ -90,7 +84,7 @@ body {
}
.table-row {
@apply border-b border-edge last:border-0 hover:bg-surface2/40;
@apply border-b border-edge last:border-0 hover:bg-surface2;
}
}