From 90352503b3af7b6b96f6116a15690f678245a864 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Wed, 24 May 2023 19:48:29 +1000
Subject: [PATCH] Handle theme change

---
 frontend/src/components/Settings/Settings.tsx | 146 +++++++++---------
 .../components/ToggleField/ToggleField.tsx    |   1 +
 2 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/Settings/Settings.tsx b/frontend/src/components/Settings/Settings.tsx
index 9b9b46b..260025e 100644
--- a/frontend/src/components/Settings/Settings.tsx
+++ b/frontend/src/components/Settings/Settings.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { maps } from 'hue-map'
 import { Settings as SettingsIcon } from 'lucide-react'
@@ -33,6 +33,12 @@ const Settings = () => {
     }
   }, [])
 
+  // Use user theme preference
+  useEffect(() => {
+    document.body.classList.toggle('light', store?.theme === 'Light')
+    document.body.classList.toggle('dark', store?.theme === 'Dark')
+  }, [store?.theme])
+
   return <>
     <button
       type="button"
@@ -50,79 +56,81 @@ const Settings = () => {
       <div onClick={e => e.stopPropagation()}>
         <span className={styles.heading}>{t('options.name')}</span>
 
-        <ToggleField
-          label={t('options.weekStart.label')}
-          name="weekStart"
-          options={{
-            'Sunday': t('options.weekStart.options.Sunday'),
-            'Monday': t('options.weekStart.options.Monday'),
-          }}
-          value={store?.weekStart === 0 ? 'Sunday' : 'Monday'}
-          onChange={value => store?.setWeekStart(value === 'Sunday' ? 0 : 1)}
-        />
+        {store && <>
+          <ToggleField
+            label={t('options.weekStart.label')}
+            name="weekStart"
+            options={{
+              'Sunday': t('options.weekStart.options.Sunday'),
+              'Monday': t('options.weekStart.options.Monday'),
+            }}
+            value={store?.weekStart === 0 ? 'Sunday' : 'Monday'}
+            onChange={value => store?.setWeekStart(value === 'Sunday' ? 0 : 1)}
+          />
 
-        <ToggleField
-          label={t('options.timeFormat.label')}
-          name="timeFormat"
-          options={{
-            '12h': t('options.timeFormat.options.12h'),
-            '24h': t('options.timeFormat.options.24h'),
-          }}
-          value={store?.timeFormat ?? '12h'}
-          onChange={value => store?.setTimeFormat(value)}
-        />
+          <ToggleField
+            label={t('options.timeFormat.label')}
+            name="timeFormat"
+            options={{
+              '12h': t('options.timeFormat.options.12h'),
+              '24h': t('options.timeFormat.options.24h'),
+            }}
+            value={store?.timeFormat ?? '12h'}
+            onChange={value => store?.setTimeFormat(value)}
+          />
 
-        <ToggleField
-          label={t('options.theme.label')}
-          name="theme"
-          options={{
-            'System': t('options.theme.options.System'),
-            'Light': t('options.theme.options.Light'),
-            'Dark': t('options.theme.options.Dark'),
-          }}
-          value={store?.theme ?? 'System'}
-          onChange={value => store?.setTheme(value)}
-        />
+          <ToggleField
+            label={t('options.theme.label')}
+            name="theme"
+            options={{
+              'System': t('options.theme.options.System'),
+              'Light': t('options.theme.options.Light'),
+              'Dark': t('options.theme.options.Dark'),
+            }}
+            value={store?.theme ?? 'System'}
+            onChange={value => store?.setTheme(value)}
+          />
 
-        <SelectField
-          label={t('options.colormap.label')}
-          name="colormap"
-          options={{
-            'crabfit': t('options.colormap.classic'),
-            ...Object.fromEntries(Object.keys(maps).sort().map(palette => [
-              palette,
-              unhyphenate(palette)
-            ])),
-          }}
-          isSmall
-          value={store?.colormap}
-          onChange={event => store?.setColormap(event.target.value)}
-        />
+          <SelectField
+            label={t('options.colormap.label')}
+            name="colormap"
+            options={{
+              'crabfit': t('options.colormap.classic'),
+              ...Object.fromEntries(Object.keys(maps).sort().map(palette => [
+                palette,
+                unhyphenate(palette)
+              ])),
+            }}
+            isSmall
+            value={store?.colormap}
+            onChange={event => store?.setColormap(event.target.value)}
+          />
 
-        <ToggleField
-          label={t('options.highlight.label')}
-          name="highlight"
-          description={t('options.highlight.title')}
-          options={{
-            'Off': t('options.highlight.options.Off'),
-            'On': t('options.highlight.options.On'),
-          }}
-          value={store?.highlight ? 'On' : 'Off'}
-          onChange={value => store?.setHighlight(value === 'On')}
-        />
+          <ToggleField
+            label={t('options.highlight.label')}
+            name="highlight"
+            description={t('options.highlight.title')}
+            options={{
+              'Off': t('options.highlight.options.Off'),
+              'On': t('options.highlight.options.On'),
+            }}
+            value={store?.highlight ? 'On' : 'Off'}
+            onChange={value => store?.setHighlight(value === 'On')}
+          />
 
-        <SelectField
-          label={t('options.language.label')}
-          name="language"
-          id="language"
-          options={{
-            ...Object.fromEntries(Object.entries(languageDetails).map(([id, details]) => [id, details.name])),
-            ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
-          }}
-          isSmall
-          value={i18n.language}
-          onChange={e => i18n.changeLanguage(e.target.value).then(() => router.refresh())}
-        />
+          <SelectField
+            label={t('options.language.label')}
+            name="language"
+            id="language"
+            options={{
+              ...Object.fromEntries(Object.entries(languageDetails).map(([id, details]) => [id, details.name])),
+              ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
+            }}
+            isSmall
+            value={i18n.language}
+            onChange={e => i18n.changeLanguage(e.target.value).then(() => router.refresh())}
+          />
+        </>}
       </div>
     </dialog>
   </>
diff --git a/frontend/src/components/ToggleField/ToggleField.tsx b/frontend/src/components/ToggleField/ToggleField.tsx
index 1b0cbf8..f7787b7 100644
--- a/frontend/src/components/ToggleField/ToggleField.tsx
+++ b/frontend/src/components/ToggleField/ToggleField.tsx
@@ -37,6 +37,7 @@ const ToggleField = <TValue extends string>({
           id={`${name}-${key}`}
           checked={value === key}
           onChange={() => onChange(key as TValue)}
+          onClick={() => onChange(key as TValue)}
         />
         <label className={styles.button} htmlFor={`${name}-${key}`}>{label as React.ReactNode}</label>
       </div>