#34

frontend/src/components/users/UserSettingsProvider.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 
-import { DEFAULT_USER_SETTINGS, fetchUserSettings } from '@/lib/settings'
+import {
+    applyClientAppearance,
+    DEFAULT_USER_SETTINGS,
+    fetchUserSettings,
+} from '@/lib/settings'
 
 import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
 
@@ -16,29 +20,6 @@ type ContextValue = {
 const UserSettingsContext = createContext<ContextValue | null> (null)
 
 
-const applyTheme = (theme: UserSettings['theme']) => {
-  const root = document.documentElement
-  const media = window.matchMedia ('(prefers-color-scheme: dark)')
-
-  const sync = () => {
-    const dark = theme === 'dark' || (theme === 'system' && media.matches)
-    root.classList.toggle ('dark', dark)
-    root.style.colorScheme = dark ? 'dark' : 'light'
-  }
-
-  sync ()
-
-  if (theme !== 'system')
-    return () => { }
-
-  const onChange = () => sync ()
-  media.addEventListener ('change', onChange)
-  return () => {
-    media.removeEventListener ('change', onChange)
-  }
-}
-
-
 export const UserSettingsProvider: FC<{
     children:  ReactNode
     user:      User | null }> = ({ children, user }) => {
@@ -87,7 +68,10 @@ export const UserSettingsProvider: FC<{
     }
   }, [user])
 
-  useEffect (() => applyTheme (settings.theme), [settings.theme])
+  useEffect (() => {
+    void settings.theme
+    applyClientAppearance ()
+  }, [settings.theme])
 
   const value = useMemo<ContextValue> (() => ({
       error,