fix color schema switcher

src/frontend/src/components/items/ColorToggle.tsx

@@ -5,11 +5,14 @@ import { vars } from '../../theme';
 
 export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  //const computedColorScheme = useComputedColorScheme('light', {
+  //  getInitialValueInEffect: true
+  //});
 
   return (
     <Group justify="center">
       <ActionIcon
-        onClick={() => toggleColorScheme()}
+        onClick={toggleColorScheme}
         size="lg"
         style={{
           color:

src/frontend/src/contexts/ThemeContext.tsx

@@ -1,10 +1,5 @@
 import { t } from '@lingui/macro';
-import {
+import { MantineProvider, createTheme } from '@mantine/core';
-  MantineProvider,
-  createTheme,
-  localStorageColorSchemeManager
-} from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 
@@ -13,6 +8,7 @@ import { LicenseModal } from '../components/modals/LicenseModal';
 import { QrCodeModal } from '../components/modals/QrCodeModal';
 import { ServerInfoModal } from '../components/modals/ServerInfoModal';
 import { useLocalState } from '../states/LocalState';
+import { colorSchema } from './colorSchema';
 
 export function ThemeContext({ children }: { children: JSX.Element }) {
   const [primaryColor, whiteColor, blackColor, radius] = useLocalState(
@@ -24,12 +20,6 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
     ]
   );
 
-  // Color Scheme
-  const preferredColorScheme = useColorScheme();
-  const colorSchemeManager = localStorageColorSchemeManager({
-    key: 'scheme'
-  });
-
   // Theme
   const myTheme = createTheme({
     primaryColor: primaryColor,
@@ -46,11 +36,7 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
   });
 
   return (
-    <MantineProvider
+    <MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
-      theme={myTheme}
-      defaultColorScheme={preferredColorScheme}
-      colorSchemeManager={colorSchemeManager}
-    >
       <Notifications />
       <ModalsProvider
         labels={{ confirm: t`Submit`, cancel: t`Cancel` }}

src/frontend/src/contexts/colorSchema.tsx

@@ -0,0 +1,67 @@
+import {
+  MantineColorScheme,
+  MantineColorSchemeManager,
+  isMantineColorScheme
+} from '@mantine/core';
+
+export interface LocalStorageColorSchemeManagerOptions {
+  /** Local storage key used to retrieve value with `localStorage.getItem(key)`, `mantine-color-scheme` by default */
+  key?: string;
+}
+
+export function localStorageColorSchemeManager({
+  key = 'mantine-color-scheme'
+}: LocalStorageColorSchemeManagerOptions = {}): MantineColorSchemeManager {
+  let handleStorageEvent: (event: StorageEvent) => void;
+
+  return {
+    get: (defaultValue) => {
+      if (typeof window === 'undefined') {
+        return defaultValue;
+      }
+
+      try {
+        return (
+          (window.localStorage.getItem(key) as MantineColorScheme) ||
+          defaultValue
+        );
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: (value) => {
+      try {
+        window.localStorage.setItem(key, value);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[@mantine/core] Local storage color scheme manager was unable to save color scheme.',
+          error
+        );
+      }
+    },
+
+    subscribe: (onUpdate) => {
+      handleStorageEvent = (event) => {
+        if (event.storageArea === window.localStorage && event.key === key) {
+          isMantineColorScheme(event.newValue) && onUpdate(event.newValue);
+        }
+      };
+
+      window.addEventListener('storage', handleStorageEvent);
+    },
+
+    unsubscribe: () => {
+      window.removeEventListener('storage', handleStorageEvent);
+    },
+
+    clear: () => {
+      window.localStorage.removeItem(key);
+    }
+  };
+}
+
+export const colorSchema = localStorageColorSchemeManager({
+  key: 'scheme'
+});

src/frontend/src/functions/loading.tsx

@@ -1,11 +1,12 @@
 import { Center, Loader, MantineProvider, Stack } from '@mantine/core';
 import { Suspense } from 'react';
 
+import { colorSchema } from '../contexts/colorSchema';
 import { theme } from '../theme';
 
 function LoadingFallback() {
   return (
-    <MantineProvider theme={theme}>
+    <MantineProvider theme={theme} colorSchemeManager={colorSchema}>
       <Stack>
         <Center>
           <Loader />