Move dark mode to context provider

Author: adamwhp

composer.json

@@ -8,7 +8,7 @@
     "ext-imagick": "*",
     "bacon/bacon-qr-code": "^3.0",
     "guzzlehttp/guzzle": "^7.8",
-    "inertiajs/inertia-laravel": "2.x-dev",
+    "inertiajs/inertia-laravel": "v2.0.0",
     "intervention/image": "^3.9",
     "laravel/framework": "^11.0",
     "laravel/horizon": "^v5.23",

composer.lock

@@ -0,0 +1,44 @@
+import { useDarkMode as useDarkModeCore, usePreferredDark } from '@reactuses/core'
+import { createContext, PropsWithChildren, useContext } from 'react'
+
+type DarkModeProviderState = {
+  isDarkMode: boolean
+  setDarkMode: (darkMode: boolean) => void
+}
+
+const initialState = {
+  isDarkMode: false,
+  setDarkMode: () => null,
+}
+
+const DarkModeProviderContext = createContext<DarkModeProviderState>(initialState)
+
+export function DarkModeProvider({ children, ...props }: PropsWithChildren) {
+  const [isDarkMode, toggleDarkMode] = useDarkModeCore({
+    classNameDark: 'dark',
+    classNameLight: '',
+    defaultValue: usePreferredDark(false),
+  })
+
+  function setDarkMode(darkMode: boolean) {
+    if (darkMode !== isDarkMode) {
+      toggleDarkMode()
+    }
+  }
+
+  return (
+    <DarkModeProviderContext.Provider {...props} value={{ isDarkMode: !!isDarkMode, setDarkMode }}>
+      {children}
+    </DarkModeProviderContext.Provider>
+  )
+}
+
+export function useDarkMode() {
+  const context = useContext(DarkModeProviderContext)
+
+  if (context === undefined) {
+    throw new Error('useDarkMode must be used within a DarkModeProvider')
+  }
+
+  return context
+}

package-lock.json

@@ -1,11 +1,9 @@
 import { Toaster } from '@/Components/UI/Toaster'
 import { useLocale } from '@/Hooks/useLocale'
-import { useTheme } from '@/Hooks/useTheme'
 import { PropsWithChildren } from 'react'
 
 export function DefaultLayout({ children }: PropsWithChildren) {
   useLocale()
-  useTheme()
 
   return (
     <>

resources/js/Components/Providers/DarkModeProvider.tsx

@@ -1,5 +1,6 @@
 import { IconFlagFR } from '@/Components/Icons/IconFlagFR'
 import { IconFlagGB } from '@/Components/Icons/IconFlagGB'
+import { useDarkMode } from '@/Components/Providers/DarkModeProvider'
 import { SettingsGrid } from '@/Components/SettingsGrid'
 import { Button } from '@/Components/UI/Button'
 import {
@@ -21,7 +22,6 @@ import {
 import { Switch } from '@/Components/UI/Switch'
 import { useFormValidation } from '@/Hooks/useFormValidation'
 import { useLocale } from '@/Hooks/useLocale'
-import { useTheme } from '@/Hooks/useTheme'
 import { useToast } from '@/Hooks/useToast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { router } from '@inertiajs/react'
@@ -35,27 +35,27 @@ const formSchema = z.object({
   language: z.string(),
 })
 
-export function ThemeForm() {
+export function DarkModeForm() {
   const { t } = useLaravelReactI18n()
 
-  const { isDarkTheme, toggleTheme } = useTheme()
+  const { isDarkMode, setDarkMode } = useDarkMode()
 
   const form = useForm({
     defaultValues: {
-      use_dark_theme: isDarkTheme,
+      use_dark_mode: isDarkMode,
     },
   })
 
-  function handleThemeChange() {
-    toggleTheme()
+  function handleDarkModeChange(useDarkMode: boolean) {
+    setDarkMode(useDarkMode)
   }
 
   return (
     <Form {...form}>
       <form className="mt-6 space-y-6">
         <FormField
           control={form.control}
-          name="use_dark_theme"
+          name="use_dark_mode"
           render={({ field }) => (
             <FormItem className="flex justify-between space-x-4">
               <div className="space-y-2">
@@ -65,10 +65,10 @@ export function ThemeForm() {
 
               <FormControl>
                 <Switch
-                  checked={isDarkTheme}
+                  checked={isDarkMode}
                   onCheckedChange={(e) => {
                     field.onChange(e)
-                    handleThemeChange()
+                    handleDarkModeChange(e)
                   }}
                 />
               </FormControl>
@@ -144,7 +144,7 @@ export function PreferencesForm() {
       description={t('account.preferences_description')}
       title={t('account.preferences')}
     >
-      <ThemeForm />
+      <DarkModeForm />
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="mt-6 space-y-6">

resources/js/Hooks/useTheme.ts

@@ -1,3 +1,4 @@
+import { DarkModeProvider } from '@/Components/Providers/DarkModeProvider'
 import { DefaultLayout } from '@/Layouts/DefaultLayout'
 import { createInertiaApp } from '@inertiajs/react'
 import { LaravelReactI18nProvider } from 'laravel-react-i18n'
@@ -26,7 +27,9 @@ createInertiaApp({
   setup({ el, App, props }) {
     createRoot(el).render(
       <LaravelReactI18nProvider files={import.meta.glob('/lang/*.json')}>
-        <App {...props} />
+        <DarkModeProvider>
+          <App {...props} />
+        </DarkModeProvider>
       </LaravelReactI18nProvider>
     )
   },