updating dark mode

Author: tnylea

resources/js/app.tsx

@@ -14,20 +14,23 @@ import {
 const appName =
     import.meta.env.VITE_APP_NAME || 'Laravel';
 
-// window.appearance = 'system';
 
-// // Initialize appearance
-// if (typeof window !== 'undefined') {
-//     const appearance = localStorage.getItem('appearance') || 'system';
-//     window.appearance = appearance;
+/*
+*  Dark/Light Mode Initialization
+*  - This needs to be added to every page so that way the correct appearance is loaded
+*/
+(function() {
+    const savedAppearance = localStorage.getItem('appearance') || 'system';
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-//     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-//     const shouldBeDark = appearance === 'dark' || (appearance === 'system' && prefersDark);
+    const isDark = 
+        savedAppearance === 'dark' || 
+        (savedAppearance === 'system' && prefersDark);
 
-//     if (shouldBeDark) {
-//         document.body.classList.add('dark');
-//     }
-// }
+    if (isDark) {
+        document.documentElement.classList.add('dark');
+    }
+})();
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,

resources/js/hooks/use-appearance.tsx

@@ -10,7 +10,7 @@ export function useAppearance() {
 
   const applyTheme = (mode: Appearance) => {
     const isDark = mode === 'dark' || (mode === 'system' && prefersDark());
-    document.body.classList.toggle('dark', isDark);
+    document.documentElement.classList.toggle('dark', isDark);
   };
 
   const updateAppearance = (mode: Appearance) => {

resources/views/app.blade.php

@@ -5,8 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
-
-        <!-- Scripts -->
+        
         @routes
         @viteReactRefresh
         @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])

routes/web.php

@@ -30,7 +30,7 @@
     Route::get('settings/password', [PasswordController::class, 'edit'])->name('password.edit');
     Route::put('settings/password', [PasswordController::class, 'update'])->name('password.update');
 
-    Route::get('settings/appearance', function(){
+    Route::get('settings/appearance', function () {
         return Inertia::render('Settings/Appearance');
     })->name('appearance');