🎨 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,
           }}
         >