cleaning up and fixing light/dark mode

Author: tnylea

resources/js/app.tsx

@@ -1,5 +1,4 @@
 import '../css/app.css';
-import './bootstrap';
 
 import {
     createInertiaApp
@@ -10,27 +9,9 @@ import {
 import {
     createRoot
 } from 'react-dom/client';
+import { initializeTheme } from './hooks/use-appearance';
 
-const appName =
-    import.meta.env.VITE_APP_NAME || 'Laravel';
-
-
-/*
-*  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 isDark = 
-        savedAppearance === 'dark' || 
-        (savedAppearance === 'system' && prefersDark);
-    
-    if (isDark) {
-        document.documentElement.classList.add('dark');
-    }
-})();
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
@@ -39,11 +20,7 @@ createInertiaApp({
             `./pages/${name}.tsx`,
             import.meta.glob('./pages/**/*.tsx'),
         ),
-    setup({
-        el,
-        App,
-        props
-    }) {
+    setup({ el, App, props }) {
         const root = createRoot(el);
 
         root.render(<App {
@@ -54,4 +31,7 @@ createInertiaApp({
     progress: {
         color: '#4B5563',
     },
-});
+});
+
+// This will set dark/light mode on load
+initializeTheme();

resources/js/bootstrap.js

@@ -2,35 +2,43 @@ import { useState, useEffect } from 'react';
 
 export type Appearance = 'light' | 'dark' | 'system';
 
-export function useAppearance() {
-  const [appearance, setAppearance] = useState<Appearance>('system');
-
-  const prefersDark = () =>
+const prefersDark = () =>
     window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-  const applyTheme = (mode: Appearance) => {
-    const isDark = mode === 'dark' || (mode === 'system' && prefersDark());
+const applyTheme = (appearance: Appearance) => {
+    const isDark = 
+        appearance === 'dark' || 
+        (appearance === 'system' && prefersDark());
+    
     document.documentElement.classList.toggle('dark', isDark);
-  };
+}
 
-  const updateAppearance = (mode: Appearance) => {
-    setAppearance(mode);
-    localStorage.setItem('appearance', mode);
-    applyTheme(mode);
-  };
+export function initializeTheme() {
+    const savedAppearance = localStorage.getItem('appearance') as Appearance || 'system';
+    applyTheme(savedAppearance);
+}
 
-  useEffect(() => {
-    const savedAppearance = localStorage.getItem('appearance') as Appearance;
-    updateAppearance(savedAppearance || 'system');
+export function useAppearance() {
+    const [appearance, setAppearance] = useState<Appearance>('system');
 
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = () => {
-      if (appearance === 'system') applyTheme('system');
+    const updateAppearance = (mode: Appearance) => {
+        setAppearance(mode);
+        localStorage.setItem('appearance', mode);
+        applyTheme(mode);
     };
 
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
+    useEffect(() => {
+        const savedAppearance = localStorage.getItem('appearance') as Appearance;
+        updateAppearance(savedAppearance || 'system');
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => {
+            if (appearance === 'system') applyTheme('system');
+        };
+
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
 
-  return { appearance, updateAppearance };
+    return { appearance, updateAppearance };
 }

resources/js/hooks/use-appearance.tsx

@@ -22,8 +22,10 @@ export default function ConfirmPassword() {
     };
 
     return (
-        <AuthLayout title="Confirm Your Password" description="This is a secure area of the application. Please confirm your
-                password before continuing">
+        <AuthLayout 
+            title="Confirm Your Password" 
+            description="This is a secure area of the application. Please confirm your password before continuing"
+        >
             <Head title="Confirm Password" />
 
 

resources/js/pages/auth/confirm-password.tsx

@@ -51,7 +51,7 @@ export default function Login({
             <Head title="Log in" />
 
             {status && (
-                <div className="mb-4 text-sm font-medium text-green-600">
+                <div className="mb-4 text-sm font-medium text-center text-green-600">
                     {status}
                 </div>
             )}