主题.md

基于 tailwind css 开发，基础的原子变量，我们需要在 tailwind.config.js 中进行编辑

// tailwind.config.js
module.exports = {
  theme: {
    // 定义基础设计令牌
    colors: {
      primary: {
        light: 'var(--color-primary-light)',
        DEFAULT: 'var(--color-primary)',
        dark: 'var(--color-primary-dark)',
      },
      // ...其他颜色
    },
    // 定义其他设计令牌
    spacing: {
      sm: 'var(--spacing-sm)',
      md: 'var(--spacing-md)',
      lg: 'var(--spacing-lg)',
    },
    // ...
  }
}

CSS变量定义

/* styles/themes.css */
:root {
  /* 浅色主题变量 */
  --color-primary: #4f46e5;
  --color-primary-light: #818cf8;
  --color-primary-dark: #3730a3;
  /* ...其他变量 */
}

[data-theme='dark'] {
  /* 深色主题变量 */
  --color-primary: #818cf8;
  --color-primary-light: #c7d2fe;
  --color-primary-dark: #4f46e5;
  /* ...其他变量 */
}

文件组织

src/
  ├── styles/
  │   ├── themes/
  │   │   ├── light.css    # 浅色主题变量
  │   │   └── dark.css     # 深色主题变量
  │   ├── tokens/          # 设计令牌定义
  │   └── main.css         # 主样式文件
  └── tailwind.config.js   # Tailwind配置