Blizzard
ca7ce4c26f
把高频硬编码色（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>
48 lines
2.0 KiB
JavaScript
48 lines
2.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// 分层表面 / 边框 / 文字均由 CSS 变量驱动（RGB 三元组，保留 /透明度 修饰符）。
|
|
// 变量在 index.css 的 :root(亮) 与 .dark(暗) 两套值间切换 —— 一处定义，全 app 换肤。
|
|
ink: {
|
|
950: "rgb(var(--ink-950) / <alpha-value>)",
|
|
900: "rgb(var(--ink-900) / <alpha-value>)",
|
|
850: "rgb(var(--ink-850) / <alpha-value>)",
|
|
800: "rgb(var(--ink-800) / <alpha-value>)",
|
|
700: "rgb(var(--ink-700) / <alpha-value>)",
|
|
600: "rgb(var(--ink-600) / <alpha-value>)",
|
|
},
|
|
line: "rgb(var(--line) / <alpha-value>)",
|
|
slate: {
|
|
100: "rgb(var(--slate-100) / <alpha-value>)",
|
|
200: "rgb(var(--slate-200) / <alpha-value>)",
|
|
300: "rgb(var(--slate-300) / <alpha-value>)",
|
|
400: "rgb(var(--slate-400) / <alpha-value>)",
|
|
500: "rgb(var(--slate-500) / <alpha-value>)",
|
|
600: "rgb(var(--slate-600) / <alpha-value>)",
|
|
700: "rgb(var(--slate-700) / <alpha-value>)",
|
|
},
|
|
// 语义强调色 —— 两套主题通用（紫=brand，青=accent）。
|
|
brand: { DEFAULT: "#7c5cf6", 400: "#a78bfa", 500: "#8b5cf6", 600: "#6d28d9" },
|
|
accent: { DEFAULT: "#22d3ee", 400: "#22d3ee", 500: "#06b6d4" },
|
|
success: { DEFAULT: "#34d399", 500: "#10b981" },
|
|
warn: { DEFAULT: "#fbbf24", 500: "#f59e0b" },
|
|
danger: { DEFAULT: "#fb7185", 500: "#f43f5e" },
|
|
},
|
|
borderRadius: {
|
|
lg: "0.625rem", // 10px —— 卡片/面板
|
|
md: "0.5rem", // 8px —— 控件
|
|
},
|
|
boxShadow: {
|
|
glow: "0 0 0 1px rgba(139,92,246,0.45), 0 0 18px rgba(139,92,246,0.28)",
|
|
"glow-cyan": "0 0 0 1px rgba(34,211,238,0.4), 0 0 16px rgba(34,211,238,0.22)",
|
|
card: "var(--shadow-card)",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|