🏁 Final commit: Project Token Usage Viewer completed

src/hooks/useTheme.ts

@@ -0,0 +1,63 @@
+/**
+ * OpenBridge 主题管理 Hook
+ *
+ * 管理 data-obc-theme 属性，支持 day/dusk/night/bright 四种主题
+ * 主题选择会持久化到 localStorage
+ */
+import { useCallback, useEffect, useState } from 'react'
+
+export type ObcTheme = 'day' | 'dusk' | 'night' | 'bright'
+
+const STORAGE_KEY = 'obc-theme'
+const DEFAULT_THEME: ObcTheme = 'day'
+
+/**
+ * 获取初始主题（从 localStorage 或默认值）
+ */
+const getInitialTheme = (): ObcTheme => {
+  if (typeof window === 'undefined') {
+    return DEFAULT_THEME
+  }
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored && ['day', 'dusk', 'night', 'bright'].includes(stored)) {
+    return stored as ObcTheme
+  }
+  return DEFAULT_THEME
+}
+
+/**
+ * 管理 OpenBridge 主题切换
+ */
+export const useTheme = () => {
+  const [theme, setThemeState] = useState<ObcTheme>(getInitialTheme)
+
+  // 应用主题到 DOM
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-obc-theme', theme)
+      localStorage.setItem(STORAGE_KEY, theme)
+    }
+  }, [theme])
+
+  // 切换到指定主题
+  const setTheme = useCallback((newTheme: ObcTheme) => {
+    setThemeState(newTheme)
+  }, [])
+
+  // 循环切换主题
+  const cycleTheme = useCallback(() => {
+    const themes: ObcTheme[] = ['day', 'dusk', 'night', 'bright']
+    const currentIndex = themes.indexOf(theme)
+    const nextIndex = (currentIndex + 1) % themes.length
+    const nextTheme = themes[nextIndex]
+    if (nextTheme) {
+      setThemeState(nextTheme)
+    }
+  }, [theme])
+
+  return {
+    theme,
+    setTheme,
+    cycleTheme,
+  }
+}