Handle theme change

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,6 +56,7 @@ const Settings = () => {
       <div onClick={e => e.stopPropagation()}>
         <span className={styles.heading}>{t('options.name')}</span>
 
+        {store && <>
           <ToggleField
             label={t('options.weekStart.label')}
             name="weekStart"
@@ -123,6 +130,7 @@ const Settings = () => {
             value={i18n.language}
             onChange={e => i18n.changeLanguage(e.target.value).then(() => router.refresh())}
           />
+        </>}
       </div>
     </dialog>
   </>

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>