深浅主题 (Theming)

import React, { useEffect, useState, useCallback, useMemo } from 'react'
import { Button } from '@tocino-ui/button'

/**
 * ====== CONSTANTS ======
 */
const THEME_STORAGE_KEY = 'your-design-system-theme'
const THEME_MODES = {
  LIGHT: 'light',
  DARK: 'dark',
  SYSTEM: 'system',
}

/**
 * ====== THEME MANAGER ======
 */
const themeManager = {
  getStoredTheme: () => {
    if (typeof window === 'undefined') return THEME_MODES.SYSTEM
    
    try {
      const stored = localStorage.getItem(THEME_STORAGE_KEY)
      if (stored && Object.values(THEME_MODES).includes(stored)) {
        return stored
      }
    } catch (error) {
      console.warn('无法读取主题设定:', error)
    }
    
    return THEME_MODES.SYSTEM
  },

  setStoredTheme: (theme) => {
    if (typeof window === 'undefined') return
    
    try {
      localStorage.setItem(THEME_STORAGE_KEY, theme)
    } catch (error) {
      console.warn('无法储存主题设定:', error)
    }
  },

  getSystemTheme: () => {
    if (typeof window === 'undefined') return THEME_MODES.DARK
    
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? THEME_MODES.DARK
      : THEME_MODES.LIGHT
  },

  resolveTheme: (theme) => {
    return theme === THEME_MODES.SYSTEM ? themeManager.getSystemTheme() : theme
  },

  applyTheme: (resolvedTheme) => {
    if (typeof document === 'undefined') return
    
    document.documentElement.setAttribute('data-theme', resolvedTheme)
    
    // 设定 color-scheme 以改善浏览器原生元件的显示
    document.documentElement.style.colorScheme = resolvedTheme
  },
}

/**
 * ====== useTheme Hook ======
 */
function useTheme(initialTheme = THEME_MODES.SYSTEM) {
  // 初始化主题状态
  const [theme, setThemeState] = useState(() => {
    if (typeof window === 'undefined') return initialTheme
    return themeManager.getStoredTheme()
  })

  // 计算实际渲染的主题
  const resolvedTheme = useMemo(() => {
    return themeManager.resolveTheme(theme)
  }, [theme])

  // 监听系统主题变化
  useEffect(() => {
    if (typeof window === 'undefined' || theme !== THEME_MODES.SYSTEM) return

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    
    const handleSystemThemeChange = () => {
      // 当前是 system 模式时，强制重新渲染以更新 resolvedTheme
      setThemeState(THEME_MODES.SYSTEM)
    }

    mediaQuery.addEventListener('change', handleSystemThemeChange)
    return () => mediaQuery.removeEventListener('change', handleSystemThemeChange)
  }, [theme])

  // 套用主题到 DOM
  useEffect(() => {
    themeManager.applyTheme(resolvedTheme)
  }, [resolvedTheme])


  // 持久化主题设定
  useEffect(() => {
    themeManager.setStoredTheme(theme)
  }, [theme])

  // 切换主题函数
  const toggleTheme = useCallback(() => {
    setThemeState(prev => {
      if (prev === THEME_MODES.SYSTEM) {
        // system 模式下，根据当前系统主题决定切换方向
        const currentSystemTheme = themeManager.getSystemTheme()
        return currentSystemTheme === THEME_MODES.DARK 
          ? THEME_MODES.LIGHT 
          : THEME_MODES.DARK
      }
      return prev === THEME_MODES.DARK ? THEME_MODES.LIGHT : THEME_MODES.DARK
    })
  }, [])

  // 设定主题函数
  const setTheme = useCallback((newTheme) => {
    setThemeState(newTheme)
  }, [])

  return useMemo(
    () => ({
      theme,
      resolvedTheme,
      toggleTheme,
      setTheme,
    }),
    [theme, resolvedTheme, toggleTheme, setTheme]
  )
}

/**
 * ====== 使用范例 ======
 */
export default function ThemeExample() {
  const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme()

  return (
    <div className="container">
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@tocino-ui/design-tokens/dist/normalize/normalize.css"
      />
      
      <h2 className="header">
        Current Theme: {theme}
        {theme === 'system' && ` (resolved: ${resolvedTheme})`}
      </h2>
      
      <div className="button-group">
        <Button 
          variant={theme === 'light' ? 'filled' : 'outline'} 
          onClick={() => setTheme('light')}
        >
          Light Mode
        </Button>
        
        <Button 
          variant={theme === 'dark' ? 'filled' : 'outline'} 
          onClick={() => setTheme('dark')}
        >
          Dark Mode
        </Button>
        
        <Button 
          variant={theme === 'system' ? 'filled' : 'outline'} 
          onClick={() => setTheme('system')}
        >
          System Mode
        </Button>
      </div>
      
      <div className="info">
        <p>试着切换你的操作系统主题设定，看看 System Mode 的变化！</p>
        <p>主题设定会自动储存在 localStorage 中。</p>
      </div>
    </div>
  )
}