kurihada
5b7b0ff1e4
- 添加 CSS 变量定义浅色和深色主题色板 - 扩展 Tailwind 配置支持语义化颜色 (surface-*, fg-*, line-*, code) - 创建 useTheme hook 管理主题状态和持久化 - 创建 ThemeToggle 组件支持三种模式 (light/dark/system) - 迁移所有组件从硬编码 gray-* 到语义化颜色 - 支持系统主题偏好检测 (prefers-color-scheme) - 添加主题初始化脚本防止闪烁 (FOUC)
64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx}',
|
|
'../ui/src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// 语义化颜色 (引用 CSS 变量)
|
|
surface: {
|
|
base: 'rgb(var(--color-bg-base) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-bg-subtle) / <alpha-value>)',
|
|
muted: 'rgb(var(--color-bg-muted) / <alpha-value>)',
|
|
emphasis: 'rgb(var(--color-bg-emphasis) / <alpha-value>)',
|
|
},
|
|
fg: {
|
|
DEFAULT: 'rgb(var(--color-text-primary) / <alpha-value>)',
|
|
secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
|
|
muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-text-subtle) / <alpha-value>)',
|
|
},
|
|
line: {
|
|
DEFAULT: 'rgb(var(--color-border-default) / <alpha-value>)',
|
|
muted: 'rgb(var(--color-border-muted) / <alpha-value>)',
|
|
},
|
|
// 代码块背景
|
|
code: 'rgb(var(--color-code-bg) / <alpha-value>)',
|
|
// 保留现有 primary 色板
|
|
primary: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
300: '#7dd3fc',
|
|
400: '#38bdf8',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
800: '#075985',
|
|
900: '#0c4a6e',
|
|
950: '#082f49',
|
|
},
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: { height: '0' },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: '0' },
|
|
},
|
|
},
|
|
animation: {
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
},
|
|
},
|
|
},
|
|
plugins: [require('tailwindcss-animate')],
|
|
};
|