feat: publish HoloLake model-native living system source

product-source/hololake-platform/src/hooks/useGuanghuTheme.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  GUANGHU_THEMES,
+  GUANGHU_THEME_STORAGE_KEY,
+  readGuanghuTheme,
+  writeGuanghuTheme,
+  type GuanghuTheme,
+} from '../lib/guanghuTheme'
+import { applyThemeModeToDocument, writeStoredThemeMode } from '../lib/themeMode'
+
+function applyGuanghuTheme(theme: GuanghuTheme): void {
+  document.documentElement.setAttribute('data-guanghu-theme', theme)
+  if (theme === 'native') return
+
+  const mode = ['lake-light', 'dawn-gold', 'tundra-green', 'peach-mist'].includes(theme) ? 'light' : 'dark'
+  applyThemeModeToDocument(document, mode)
+  writeStoredThemeMode(window.localStorage, mode)
+}
+
+export function useGuanghuTheme(): {
+  theme: GuanghuTheme
+  setTheme: (theme: GuanghuTheme) => void
+  cycleTheme: () => void
+} {
+  const [theme, setTheme] = useState<GuanghuTheme>(() => (
+    typeof window === 'undefined' ? 'native' : readGuanghuTheme(window.localStorage)
+  ))
+
+  useEffect(() => {
+    applyGuanghuTheme(theme)
+    writeGuanghuTheme(window.localStorage, theme)
+  }, [theme])
+
+  const cycleTheme = useCallback(() => {
+    setTheme(current => {
+      const index = GUANGHU_THEMES.indexOf(current)
+      return GUANGHU_THEMES[(index + 1) % GUANGHU_THEMES.length]
+    })
+  }, [])
+
+  return { theme, setTheme, cycleTheme }
+}
+
+export { GUANGHU_THEME_STORAGE_KEY }