move ThemeProvider and ThemeToggle components

lightrag_webui/src/components/graph/ThemeProvider.tsx

@@ -1,57 +0,0 @@
-import { createContext, useEffect, useState } from 'react'
-import { Theme, useSettingsStore } from '@/stores/settings'
-
-type ThemeProviderProps = {
-  children: React.ReactNode
-}
-
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
-
-/**
- * Component that provides the theme state and setter function to its children.
- */
-export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(useSettingsStore.getState().theme)
-
-  useEffect(() => {
-    const root = window.document.documentElement
-    root.classList.remove('light', 'dark')
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      root.classList.add(systemTheme)
-      setTheme(systemTheme)
-      return
-    }
-
-    root.classList.add(theme)
-  }, [theme])
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      useSettingsStore.getState().setTheme(theme)
-      setTheme(theme)
-    }
-  }
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  )
-}
-
-export { ThemeProviderContext }

lightrag_webui/src/components/graph/ThemeToggle.tsx

@@ -1,39 +0,0 @@
-import Button from '@/components/ui/Button'
-import useTheme from '@/hooks/useTheme'
-import { MoonIcon, SunIcon } from 'lucide-react'
-import { useCallback } from 'react'
-import { controlButtonVariant } from '@/lib/constants'
-
-/**
- * Component that toggles the theme between light and dark.
- */
-export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const setLight = useCallback(() => setTheme('light'), [setTheme])
-  const setDark = useCallback(() => setTheme('dark'), [setTheme])
-
-  if (theme === 'dark') {
-    return (
-      <Button
-        onClick={setLight}
-        variant={controlButtonVariant}
-        tooltip="Switch to light theme"
-        size="icon"
-        side="bottom"
-      >
-        <MoonIcon />
-      </Button>
-    )
-  }
-  return (
-    <Button
-      onClick={setDark}
-      variant={controlButtonVariant}
-      tooltip="Switch to dark theme"
-      size="icon"
-      side="bottom"
-    >
-      <SunIcon />
-    </Button>
-  )
-}