Migrate Traefik Proxy dashboard UI to React

webui/src/hooks/use-theme.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { useLocalStorage } from 'usehooks-ts'
+
+const SYSTEM = 'system'
+const DARK = 'dark'
+const LIGHT = 'light'
+
+type ThemeOptions = 'system' | 'dark' | 'light'
+const THEME_OPTIONS: ThemeOptions[] = [SYSTEM, DARK, LIGHT]
+
+type UseThemeRes = {
+  selectedTheme: ThemeOptions
+  appliedTheme: ThemeOptions
+  setTheme: () => void
+}
+
+export const useTheme = (): UseThemeRes => {
+  const [selectedTheme, setSelectedTheme] = useLocalStorage<ThemeOptions>('selected-theme', SYSTEM)
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  const appliedTheme = useMemo(() => {
+    if (selectedTheme === SYSTEM) {
+      if (prefersDark) return DARK
+      return LIGHT
+    }
+
+    return selectedTheme
+  }, [selectedTheme, prefersDark])
+
+  return {
+    selectedTheme,
+    appliedTheme,
+    setTheme: () => {
+      setSelectedTheme((curr: ThemeOptions): ThemeOptions => {
+        const currIdx = THEME_OPTIONS.indexOf(curr)
+        const nextIdx = currIdx + 1
+        if (nextIdx === THEME_OPTIONS.length) return SYSTEM
+
+        return THEME_OPTIONS[nextIdx]
+      })
+    },
+  }
+}
+
+export const useIsDarkMode = () => {
+  const { appliedTheme } = useTheme()
+
+  return appliedTheme === DARK
+}