From a00eed24513376d5b8731d14bc9cfa2bbdcb790b Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 00:45:06 +0200
Subject: [PATCH] adapt theme context

---
 src/frontend/src/contexts/ThemeContext.tsx | 58 ++++++++++------------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/frontend/src/contexts/ThemeContext.tsx b/src/frontend/src/contexts/ThemeContext.tsx
index c973719f61..5460022720 100644
--- a/src/frontend/src/contexts/ThemeContext.tsx
+++ b/src/frontend/src/contexts/ThemeContext.tsx
@@ -1,11 +1,10 @@
 import { t } from '@lingui/macro';
 import {
-  ColorScheme,
-  ColorSchemeProvider,
   MantineProvider,
-  MantineThemeOverride
+  createTheme,
+  localStorageColorSchemeManager
 } from '@mantine/core';
-import { useColorScheme, useLocalStorage } from '@mantine/hooks';
+import { useColorScheme } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 
@@ -28,22 +27,16 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
 
   // Color Scheme
   const preferredColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-    key: 'scheme',
-    defaultValue: preferredColorScheme
+  const colorSchemeManager = localStorageColorSchemeManager({
+    key: 'scheme'
   });
-  const toggleColorScheme = (value?: ColorScheme) => {
-    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
-    myTheme.colorScheme = colorScheme;
-  };
 
   // Theme
-  const myTheme: MantineThemeOverride = {
-    colorScheme: colorScheme,
+  const myTheme = createTheme({
     primaryColor: primaryColor,
     white: whiteColor,
     black: blackColor,
-    loader: loader,
+    //loader: loader,
     defaultRadius: radius,
     breakpoints: {
       xs: '30em',
@@ -52,27 +45,26 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
       lg: '74em',
       xl: '90em'
     }
-  };
+  });
 
   return (
-    <ColorSchemeProvider
-      colorScheme={colorScheme}
-      toggleColorScheme={toggleColorScheme}
+    <MantineProvider
+      theme={myTheme}
+      defaultColorScheme={preferredColorScheme}
+      colorSchemeManager={colorSchemeManager}
     >
-      <MantineProvider theme={myTheme} withGlobalStyles withNormalizeCSS>
-        <Notifications />
-        <ModalsProvider
-          labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
-          modals={{
-            qr: QrCodeModal,
-            info: ServerInfoModal,
-            about: AboutInvenTreeModal,
-            license: LicenseModal
-          }}
-        >
-          {children}
-        </ModalsProvider>
-      </MantineProvider>
-    </ColorSchemeProvider>
+      <Notifications />
+      <ModalsProvider
+        labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
+        modals={{
+          qr: QrCodeModal,
+          info: ServerInfoModal,
+          about: AboutInvenTreeModal,
+          license: LicenseModal
+        }}
+      >
+        {children}
+      </ModalsProvider>
+    </MantineProvider>
   );
 }