🎨 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/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -39,12 +39,7 @@ export function ColorSchemeSwitch() {
       <div className={classes.root}>
         <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
         <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
-        <Switch
-          color={config.settings.primaryColor || 'red'}
-          checked={colorScheme === 'dark'}
-          onChange={() => toggleColorScheme()}
-          size="md"
-        />
+        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
       </div>
       Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
       <Group spacing={2}>

src/components/Config/SaveConfig.tsx

@@ -59,20 +59,13 @@ export default function SaveConfigComponent(props: any) {
           </Group>
         </form>
       </Modal>
-      <Button
-        size="xs"
-        leftIcon={<Download />}
-        variant="outline"
-        color={config.settings.primaryColor || 'red'}
-        onClick={onClick}
-      >
+      <Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
         Download config
       </Button>
       <Button
         size="xs"
         leftIcon={<Trash />}
         variant="outline"
-        color={config.settings.primaryColor || 'red'}
         onClick={() => {
           axios
             .delete(`/api/configs/${config.name}`)
@@ -101,13 +94,7 @@ export default function SaveConfigComponent(props: any) {
       >
         Delete config
       </Button>
-      <Button
-        size="xs"
-        leftIcon={<Plus />}
-        variant="outline"
-        color={config.settings.primaryColor || 'red'}
-        onClick={() => setOpened(true)}
-      >
+      <Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
         Save a copy
       </Button>
     </Group>

src/components/Settings/AdvancedSettings.tsx

@@ -44,9 +44,7 @@ export default function TitleChanger() {
             {...form.getInputProps('favicon')}
           />
           <TextInput label="Background" placeholder="" {...form.getInputProps('background')} />
-          <Button type="submit" color={config.settings.primaryColor || 'red'}>
-            Save
-          </Button>
+          <Button type="submit">Save</Button>
         </Group>
       </form>
     </Group>

src/components/Settings/ColorSelector.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
 
 interface ColorControlProps {
   type: string;
@@ -9,19 +10,20 @@ interface ColorControlProps {
 export function ColorSelector({ type }: ColorControlProps) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
+
   const theme = useMantineTheme();
   const colors = Object.keys(theme.colors).map((color) => ({
     swatch: theme.colors[color][6],
     color,
   }));
 
-  const configColor =
-    type === 'primary'
-      ? config.settings.primaryColor || 'red'
-      : config.settings.secondaryColor || 'orange';
+  const configColor = type === 'primary' ? primaryColor : secondaryColor;
 
   const setConfigColor = (color: string) => {
     if (type === 'primary') {
+      setPrimaryColor(color);
       setConfig({
         ...config,
         settings: {
@@ -30,6 +32,7 @@ export function ColorSelector({ type }: ColorControlProps) {
         },
       });
     } else {
+      setSecondaryColor(color);
       setConfig({
         ...config,
         settings: {
@@ -62,7 +65,7 @@ export function ColorSelector({ type }: ColorControlProps) {
           <ColorSwatch
             component="button"
             type="button"
-            color={theme.colors[configColor || 'red'][6]}
+            color={theme.colors[configColor][6]}
             onClick={() => setOpened((o) => !o)}
             size={22}
             style={{ display: 'block', cursor: 'pointer' }}

src/components/Settings/ModuleEnabler.tsx

@@ -13,7 +13,6 @@ export default function ModuleEnabler(props: any) {
           size="md"
           checked={config.modules?.[module.title]?.enabled ?? false}
           label={`Enable ${module.title}`}
-          color={config.settings.primaryColor || 'red'}
           onChange={(e) => {
             setConfig({
               ...config,

src/components/layout/Logo.tsx

@@ -1,10 +1,12 @@
 import { Group, Image, Text } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import * as React from 'react';
+import { useColorTheme } from '../../tools/color';
 import { useConfig } from '../../tools/state';
 
 export function Logo({ style }: any) {
   const { config } = useConfig();
+  const { primaryColor, secondaryColor } = useColorTheme();
 
   return (
     <Group spacing="xs">
@@ -27,8 +29,8 @@ export function Logo({ style }: any) {
           weight="bold"
           variant="gradient"
           gradient={{
-            from: config.settings.primaryColor || 'red',
-            to: config.settings.secondaryColor || 'orange',
+            from: primaryColor,
+            to: secondaryColor,
             deg: 145,
           }}
         >

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 (

src/tools/color.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+type colorThemeContextType = {
+  primaryColor: string;
+  secondaryColor: string;
+  setPrimaryColor: (color: string) => void;
+  setSecondaryColor: (color: string) => void;
+};
+
+export const ColorTheme = createContext<colorThemeContextType>({
+  primaryColor: 'red',
+  secondaryColor: 'orange',
+  setPrimaryColor: () => {},
+  setSecondaryColor: () => {},
+});
+
+export function useColorTheme() {
+  const context = useContext(ColorTheme);
+  if (context === undefined) {
+    throw new Error('useColorTheme must be used within a ColorTheme.Provider');
+  }
+  return context;
+}