feat: 添加浅色主题支持

- 配置浅色主题配色方案和 CSS 变量 - 修复组件在浅色模式下的样式适配 - 统一文字颜色类名使用 CSS 变量 - 优化玻璃效果在浅色主题下的显示
2026-07-09 22:10:49 +08:00
commit b43e3725ee
34 changed files with 7911 additions and 0 deletions
@@ -0,0 +1,87 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // 深色主题（默认）
+        dark: {
+          bg: {
+            primary: '#09090b',
+            secondary: '#18181b',
+            tertiary: '#27272a',
+          },
+          text: {
+            primary: '#fafafa',
+            secondary: '#a1a1aa',
+            muted: '#71717a',
+          },
+        },
+        // 浅色主题
+        light: {
+          bg: {
+            primary: '#ffffff',
+            secondary: '#f4f4f5',
+            tertiary: '#e4e4e7',
+          },
+          text: {
+            primary: '#09090b',
+            secondary: '#52525b',
+            muted: '#a1a1aa',
+          },
+        },
+        // 通用主题色
+        accent: {
+          DEFAULT: '#6366f1',
+          hover: '#818cf8',
+          muted: '#4f46e5',
+        },
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+      },
+      fontFamily: {
+        sans: [
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'SF Pro Display',
+          'SF Pro Text',
+          'Helvetica Neue',
+          'Pretendard',
+          'Noto Sans SC',
+          'Segoe UI',
+          'sans-serif',
+        ],
+      },
+      boxShadow: {
+        'glass': '0 4px 24px -1px rgba(0, 0, 0, 0.08)',
+        'glass-hover': '0 8px 32px -1px rgba(0, 0, 0, 0.12)',
+        'glow': '0 0 20px rgba(99, 102, 241, 0.3)',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-out',
+        'slide-up': 'slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      borderRadius: {
+        '2xl': '16px',
+        '3xl': '24px',
+      },
+    },
+  },
+  plugins: [],
+}