feat(desktop): 亮/暗主题切换 —— 默认亮色,一处令牌驱动全 app 换肤
把高频硬编码色(ink 表面 / line 边框 / slate 文字)重定义为 CSS 变量(RGB 三元组, 保留 /透明度 修饰符),:root(亮) 与 .dark(暗) 两套值切换——改 tailwind.config + index.css 两处即让全 app 换肤,无需逐文件迁移。 - 亮色走 shadcn 中性灰(zinc:zinc-50 底/白卡/zinc-200 边/zinc-900 字); 暗色精炼为中性 zinc 暗(替代原偏蓝 ink),顺带提质感。 - lib/theme.ts:useTheme + applyInitialTheme(main 启动前设类,避免首屏闪烁)+ localStorage 持久化,默认亮色。 - TopBar 加 Sun/Moon 切换钮;滚动条/输入控件 color-scheme 随主题。 - 修亮色下会失效的 bg-white/5 → bg-ink-800(Tabs/Badge/ExecTrace 的中性微底); 模态遮罩 bg-black/55 两模式皆宜,保留。 验证:tsc + vitest 48 过 + 生产构建通过(var 色全解析)。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,50 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 主题令牌::root=亮色,.dark=暗色。值为 RGB 三元组,供 tailwind 的 rgb(var() / α) 取用。
|
||||
亮色走 shadcn 中性灰(zinc),暗色为精炼中性暗(zinc 系,替代原偏蓝的 ink)。 */
|
||||
:root {
|
||||
--ink-950: 249 249 250; /* 页面底 */
|
||||
--ink-900: 255 255 255; /* 顶栏/面板 */
|
||||
--ink-850: 255 255 255; /* 卡片 */
|
||||
--ink-800: 244 244 245; /* hover/抬升 */
|
||||
--ink-700: 228 228 231;
|
||||
--ink-600: 212 212 216;
|
||||
--line: 228 228 231; /* 边框 zinc-200 */
|
||||
--slate-100: 24 24 27; /* 最强文字 */
|
||||
--slate-200: 24 24 27; /* 主文字 */
|
||||
--slate-300: 63 63 70;
|
||||
--slate-400: 82 82 91;
|
||||
--slate-500: 113 113 122; /* 次要 */
|
||||
--slate-600: 161 161 170; /* 弱 */
|
||||
--slate-700: 212 212 216;
|
||||
--sb-thumb: 212 212 216;
|
||||
--sb-thumb-hover: 161 161 170;
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ink-950: 10 10 12;
|
||||
--ink-900: 20 20 24;
|
||||
--ink-850: 24 24 27;
|
||||
--ink-800: 31 31 35;
|
||||
--ink-700: 38 38 43;
|
||||
--ink-600: 50 50 56;
|
||||
--line: 39 39 42; /* zinc-800 */
|
||||
--slate-100: 244 244 245;
|
||||
--slate-200: 228 228 231;
|
||||
--slate-300: 212 212 216;
|
||||
--slate-400: 161 161 170;
|
||||
--slate-500: 138 138 147;
|
||||
--slate-600: 113 113 122;
|
||||
--slate-700: 82 82 91;
|
||||
--sb-thumb: 39 39 42;
|
||||
--sb-thumb-hover: 63 63 70;
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
@@ -10,25 +54,25 @@ body,
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0d12;
|
||||
color: #cbd2de;
|
||||
background: rgb(var(--ink-950));
|
||||
color: rgb(var(--slate-300));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 深色滚动条 */
|
||||
/* 滚动条随主题 */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #242b3c;
|
||||
background: rgb(var(--sb-thumb));
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #323a4f;
|
||||
background: rgb(var(--sb-thumb-hover));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -44,9 +88,4 @@ body {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 输入控件深色统一 */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
color-scheme: dark;
|
||||
}
|
||||
/* 输入控件随主题(color-scheme 由 :root/.dark 设定,控件自动继承) */
|
||||
|
||||
Reference in New Issue
Block a user