主题配置

PocketSlide 支持完整的主题系统，包括主题模式（浅色/深色/系统）和主题颜色（蓝色/绿色/红色/灰度）切换。

使用方式

主题功能通过 ThemeProvider 和 useTheme hook 提供：

import { useTheme } from '@/components/theme-provider';

主题模式

支持的模式

模式	值	说明
浅色模式	light	明亮的浅色主题
深色模式	dark	护眼的深色主题
系统模式	system	跟随操作系统设置

切换主题

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <button onClick={() => setTheme('light')}>
        浅色模式
      </button>
      <button onClick={() => setTheme('dark')}>
        深色模式
      </button>
      <button onClick={() => setTheme('system')}>
        系统模式
      </button>
    </div>
  );
}

主题颜色

支持的颜色

颜色	值	说明
蓝色	blue	专业沉稳
绿色	green	活力自然
红色	red	热情活力
灰度	gray	简约低调

切换主题颜色

function ColorThemeSwitcher() {
  const { colorTheme, setColorTheme } = useTheme();

  return (
    <div>
      <button onClick={() => setColorTheme('blue')}>
        蓝色
      </button>
      <button onClick={() => setColorTheme('green')}>
        绿色
      </button>
      <button onClick={() => setColorTheme('red')}>
        红色
      </button>
      <button onClick={() => setColorTheme('gray')}>
        灰度
      </button>
    </div>
  );
}

使用示例

完整的主题切换组件

import { SunIcon, MoonIcon, ComputerDesktopIcon } from '@heroicons/react/24/outline';
import { useTheme } from '@/components/theme-provider';

const themeModes = [
  { key: 'light', name: '浅色模式', icon: SunIcon },
  { key: 'dark', name: '深色模式', icon: MoonIcon },
  { key: 'system', name: '系统模式', icon: ComputerDesktopIcon },
];

const colorThemes = [
  { key: 'blue', name: '蓝色', color: 'bg-blue-500' },
  { key: 'green', name: '绿色', color: 'bg-green-500' },
  { key: 'red', name: '红色', color: 'bg-red-500' },
  { key: 'gray', name: '灰度', color: 'bg-neutral-500' },
];

export default function ThemeSwitcher() {
  const { theme, setTheme, colorTheme, setColorTheme } = useTheme();

  return (
    <div className="space-y-8">
      {/* 主题模式切换 */}
      <div>
        <h3>主题模式</h3>
        <div className="flex gap-4">
          {themeModes.map((mode) => (
            <button
              key={mode.key}
              onClick={() => setTheme(mode.key as 'light' | 'dark' | 'system')}
              className={`p-4 rounded-lg border ${
                theme === mode.key ? 'border-primary bg-primary/10' : ''
              }`}
            >
              <mode.icon className="h-6 w-6 mx-auto" />
              <span>{mode.name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 主题颜色切换 */}
      <div>
        <h3>主题颜色</h3>
        <div className="flex gap-4">
          {colorThemes.map((color) => (
            <button
              key={color.key}
              onClick={() => setColorTheme(color.key as 'blue' | 'green' | 'red' | 'gray')}
              className={`p-4 rounded-lg border flex items-center gap-2 ${
                colorTheme === color.key ? 'border-primary bg-primary/10' : ''
              }`}
            >
              <span className={`h-6 w-6 rounded-full ${color.color}`} />
              <span>{color.name}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

实现原理

主题模式

使用 CSS 类名 light / dark 切换：

.light {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

主题颜色

通过 CSS 变量 color-blue / color-green 等切换：

:root {
  --primary: var(--color-blue);
}

[data-color-theme="green"] {
  --primary: var(--color-green);
}

[data-color-theme="red"] {
  --primary: var(--color-red);
}

[data-color-theme="gray"] {
  --primary: var(--color-gray);
}

相关组件

组件	说明
ThemeProvider	提供主题上下文，包裹整个应用
ModeToggle	支持交互切换的切换组件
useTheme	在组件中获取和修改主题的 hook