Track whether the color scheme follows the system setting

src/constants/LocalStorageKey.ts

@@ -1,5 +1,6 @@
 export enum LocalStorageKey {
-  ColorScheme = 'luna.contexts.colorScheme',
+  ColorScheme = 'luna.contexts.colorScheme.colorScheme',
+  ColorSchemeFollowsSystem = 'luna.contexts.colorScheme.followsSystem',
   AdminResourcesLayout = 'luna.screens.home.admin.resources.layout',
   DisplaysZoom = 'luna.screens.home.displays.zoom',
 }

src/contexts/ColorSchemeContext.tsx

@@ -7,28 +7,31 @@ import {
   createContext,
   useEffect,
   useMemo,
+  useState,
 } from 'react';
 
 interface ColorScheme {
   readonly isDark: boolean;
 }
 
-function systemDarkQuery(): MediaQueryList {
+function systemDarkModeQuery(): MediaQueryList {
   return window.matchMedia('(prefers-color-scheme: dark)');
 }
 
-function systemColorScheme(): ColorScheme {
-  const query = systemDarkQuery();
+function currentSystemColorScheme(): ColorScheme {
+  const query = systemDarkModeQuery();
   return { isDark: query.matches };
 }
 
 export interface ColorSchemeContextValue {
   readonly colorScheme: ColorScheme;
+  readonly followsSystem: boolean;
   setColorScheme: Dispatch<SetStateAction<ColorScheme>>;
 }
 
 export const ColorSchemeContext = createContext<ColorSchemeContextValue>({
   colorScheme: { isDark: false },
+  followsSystem: true,
   setColorScheme() {},
 });
 
@@ -39,23 +42,43 @@ interface ColorSchemeContextProviderProps {
 export function ColorSchemeContextProvider({
   children,
 }: ColorSchemeContextProviderProps) {
+  const [systemColorScheme, setSystemColorScheme] = useState<ColorScheme>(
+    currentSystemColorScheme()
+  );
+
+  useEffect(() => {
+    systemDarkModeQuery().addEventListener('change', () => {
+      setSystemColorScheme(currentSystemColorScheme());
+    });
+  }, []);
+
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>(
     LocalStorageKey.ColorScheme,
-    systemColorScheme
+    () => systemColorScheme
+  );
+
+  const [followsSystem, setFollowsSystem] = useLocalStorage<boolean>(
+    LocalStorageKey.ColorSchemeFollowsSystem,
+    () => true
   );
 
   useEffect(() => {
-    systemDarkQuery().addEventListener('change', () => {
-      setColorScheme(systemColorScheme());
-    });
-  }, [setColorScheme]);
+    setFollowsSystem(colorScheme.isDark === systemColorScheme.isDark);
+  }, [colorScheme, systemColorScheme, setFollowsSystem]);
+
+  useEffect(() => {
+    if (followsSystem) {
+      setColorScheme(systemColorScheme);
+    }
+  }, [followsSystem, systemColorScheme, setColorScheme]);
 
   const value: ColorSchemeContextValue = useMemo(
     () => ({
       colorScheme,
+      followsSystem,
       setColorScheme,
     }),
-    [colorScheme, setColorScheme]
+    [colorScheme, followsSystem, setColorScheme]
   );
 
   return (