🎨 Made color switcher change Mantine styles

Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context.

src/pages/_app.tsx

@@ -6,15 +6,24 @@ import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
-import { ConfigProvider, useConfig } from '../tools/state';
+import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
 import { styles } from '../tools/styles';
+import { ColorTheme } from '../tools/color';
 
-export default function App(props: AppProps & { colorScheme: ColorScheme }) {
+export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
-  const { config } = useConfig();
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
+  const [primaryColor, setPrimaryColor] = useState<string>('red');
+  const [secondaryColor, setSecondaryColor] = useState<string>('orange');
+  const colorTheme = {
+    primaryColor,
+    secondaryColor,
+    setPrimaryColor,
+    setSecondaryColor,
+  };
+
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
@@ -31,24 +40,26 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
       </Head>
 
       <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <MantineProvider
-          theme={{
-            ...theme,
-            primaryColor: config.settings.primaryColor || 'red',
-            colorScheme,
-          }}
-          styles={{
-            ...styles,
-          }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          <NotificationsProvider limit={4} position="bottom-left">
-            <ConfigProvider>
-              <Component {...pageProps} />
-            </ConfigProvider>
-          </NotificationsProvider>
-        </MantineProvider>
+        <ColorTheme.Provider value={colorTheme}>
+          <MantineProvider
+            theme={{
+              ...theme,
+              primaryColor,
+              colorScheme,
+            }}
+            styles={{
+              ...styles,
+            }}
+            withGlobalStyles
+            withNormalizeCSS
+          >
+            <NotificationsProvider limit={4} position="bottom-left">
+              <ConfigProvider>
+                <Component {...pageProps} />
+              </ConfigProvider>
+            </NotificationsProvider>
+          </MantineProvider>
+        </ColorTheme.Provider>
       </ColorSchemeProvider>
     </>
   );

src/pages/index.tsx

@@ -7,6 +7,7 @@ import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 import { migrateToIdConfig } from '../tools/migrate';
 import { getConfig } from '../tools/getConfig';
+import { useColorTheme } from '../tools/color';
 import Layout from '../components/layout/Layout';
 
 export async function getServerSideProps({
@@ -29,8 +30,11 @@ export async function getServerSideProps({
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
   const { setConfig } = useConfig();
+  const { setPrimaryColor, setSecondaryColor } = useColorTheme();
   useEffect(() => {
     const migratedConfig = migrateToIdConfig(initialConfig);
+    setPrimaryColor(migratedConfig.settings.primaryColor || 'red');
+    setSecondaryColor(migratedConfig.settings.secondaryColor || 'orange');
     setConfig(migratedConfig);
   }, [initialConfig]);
   return (