# 主题和 CSS 变量

使用 CSS 变量实现主题切换。

## 定义 CSS 变量

```css
/* 默认主题（亮色） */
:root {
  /* 颜色 */
  --color-primary: #ff351a;
  --color-secondary: #00ebeb;
  --color-background: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-border: #e0e0e0;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 字体 */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 24px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 50%;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
}
```

## 暗色主题

```css
/* 暗色主题 */
[data-theme='dark'] {
  --color-primary: #ff5c45;
  --color-secondary: #33eeee;
  --color-background: #1a1a2e;
  --color-surface: #252540;
  --color-text: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-border: #33334d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
}
```

## 使用 CSS 变量

```css
/* 组件样式 */
.button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-sm);
}

.button-secondary {
  background-color: var(--color-secondary);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.title {
  color: var(--color-text);
  font-size: var(--font-size-xl);
}

.description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}
```

## 在 Lynx 中切换主题

```jsx
// ThemeProvider.jsx
import { useState, useEffect } from '@lynx-js/react';

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // 设置主题属性
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <view className={`theme-wrapper ${theme}`}>
      {children}
      <view className="theme-toggle" bindtap={toggleTheme}>
        <text>{theme === 'light' ? '🌙' : '☀️'}</text>
      </view>
    </view>
  );
}
```

## 最佳实践

1. **命名规范**: 使用 `--category-property` 格式
2. **分层定义**: 颜色、间距、字体分开定义
3. **语义化**: 使用 `--color-primary` 而非 `--color-red`
4. **默认值**: 始终提供默认值 `var(--prop, default)`

```css
.button {
  /* 提供默认值 */
  color: var(--button-color, var(--color-primary));
  padding: var(--button-padding, var(--spacing-md));
}
```