From b2aaf6d6424093ab63c758925580b9343f95d277 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Tue, 8 Oct 2024 03:49:43 +0700
Subject: [PATCH] fix: fix theme on laravel

---
 .../stubs/laravel/theme-provider.stub         | 101 +++++++++---------
 1 file changed, 49 insertions(+), 52 deletions(-)

diff --git a/src/resources/stubs/laravel/theme-provider.stub b/src/resources/stubs/laravel/theme-provider.stub
index 1dbb5a8..e997db0 100644
--- a/src/resources/stubs/laravel/theme-provider.stub
+++ b/src/resources/stubs/laravel/theme-provider.stub
@@ -1,74 +1,71 @@
-import React from 'react';
+import * as React from 'react'
 
-type Theme = 'dark' | 'light' | 'system';
+type Theme = 'dark' | 'light' | 'system'
 
 type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
+    children: React.ReactNode
+    defaultTheme?: Theme
+    storageKey?: string
+}
 
 type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
+    theme: Theme
+    setTheme: (theme: Theme) => void
+}
 
 const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-};
+    theme: 'system',
+    setTheme: () => null
+}
 
-const ThemeProviderContext =
-  React.createContext<ThemeProviderState>(initialState);
+const ThemeProviderContext = React.createContext<ThemeProviderState>(initialState)
 
 export function ThemeProvider({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'vite-ui-theme',
-  ...props
+    children,
+    defaultTheme = 'system',
+    storageKey = 'vite-ui-theme',
+    ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = React.useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
-  );
+    const [theme, setTheme] = React.useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
 
-  React.useEffect(() => {
-    const root = window.document.documentElement;
+    React.useEffect(() => {
+        const root = window.document.documentElement
 
-    root.classList.remove('light', 'dark');
+        root.classList.remove('light', 'dark')
 
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light';
+        if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 
-      root.classList.add(systemTheme);
-      return;
+            root.classList.add(systemTheme)
+            return
+        }
+
+        if (theme === 'light' || theme === 'dark') {
+            root.classList.add(theme)
+        }
+    }, [theme])
+
+    const value = {
+        theme,
+        setTheme: (newTheme: Theme) => {
+            if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') {
+                localStorage.setItem(storageKey, newTheme)
+                setTheme(newTheme)
+            }
+        }
     }
 
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    )
 }
 
 export const useTheme = () => {
-  const context = React.useContext(ThemeProviderContext);
+    const context = React.useContext(ThemeProviderContext)
 
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider');
+    if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
 
-  return context;
-};
+    return context
+}