🔀 Merge pull request #188 from Aimsucks/more-customizations

Color, shade, app opacity, and background customizations thank you @Aimsucks !

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, createStyles, Grid, Group } from '@mantine/core';
+import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -42,6 +42,7 @@ const AppShelf = (props: any) => {
   });
   const [activeId, setActiveId] = useState(null);
   const { config, setConfig } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
 
   const sensors = useSensors(
     useSensor(TouchSensor, {
@@ -164,7 +165,16 @@ const AppShelf = (props: any) => {
           ) : null}
           <Accordion.Item key="Downloads" label="Your downloads">
             <ModuleMenu module={DownloadsModule} />
-            <DownloadComponent />
+            <Paper
+              style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+              }}
+            >
+              <DownloadComponent />
+            </Paper>
           </Accordion.Item>
         </Accordion>
       </Group>

src/components/AppShelf/AppShelfItem.tsx

@@ -1,4 +1,13 @@
-import { Text, Card, Anchor, AspectRatio, Image, Center, createStyles } from '@mantine/core';
+import {
+  Text,
+  Card,
+  Anchor,
+  AspectRatio,
+  Image,
+  Center,
+  createStyles,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
@@ -6,6 +15,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -41,6 +51,8 @@ export function SortableAppShelfItem(props: any) {
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
   const [hovering, setHovering] = useState(false);
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
   const { classes } = useStyles();
   return (
     <motion.div
@@ -57,7 +69,18 @@ export function AppShelfItem(props: any) {
         setHovering(false);
       }}
     >
-      <Card withBorder radius="lg" shadow="md" className={classes.item}>
+      <Card
+        withBorder
+        radius="lg"
+        shadow="md"
+        className={classes.item}
+        style={{
+          background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+          borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        }}
+      >
         <Card.Section>
           <Anchor
             target="_blank"

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
 import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -29,6 +30,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function ColorSchemeSwitch() {
+  const { config } = useConfig();
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const { classes, cx } = useStyles();
 

src/components/Settings/AdvancedSettings.tsx

@@ -1,6 +1,9 @@
 import { TextInput, Group, Button } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
+import { ColorSelector } from './ColorSelector';
+import { OpacitySelector } from './OpacitySelector';
+import { ShadeSelector } from './ShadeSelector';
 
 export default function TitleChanger() {
   const { config, setConfig } = useConfig();
@@ -10,10 +13,16 @@ export default function TitleChanger() {
       title: config.settings.title,
       logo: config.settings.logo,
       favicon: config.settings.favicon,
+      background: config.settings.background,
     },
   });
 
-  const saveChanges = (values: { title?: string; logo?: string; favicon?: string }) => {
+  const saveChanges = (values: {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    background?: string;
+  }) => {
     setConfig({
       ...config,
       settings: {
@@ -21,6 +30,7 @@ export default function TitleChanger() {
         title: values.title,
         logo: values.logo,
         favicon: values.favicon,
+        background: values.background,
       },
     });
   };
@@ -36,9 +46,18 @@ export default function TitleChanger() {
             placeholder="/favicon.svg"
             {...form.getInputProps('favicon')}
           />
+          <TextInput
+            label="Background"
+            placeholder="/img/background.png"
+            {...form.getInputProps('background')}
+          />
           <Button type="submit">Save</Button>
         </Group>
       </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
     </Group>
   );
 }

src/components/Settings/ColorSelector.tsx

@@ -0,0 +1,96 @@
+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;
+}
+
+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' ? primaryColor : secondaryColor;
+
+  const setConfigColor = (color: string) => {
+    if (type === 'primary') {
+      setPrimaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          primaryColor: color,
+        },
+      });
+    } else {
+      setSecondaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          secondaryColor: color,
+        },
+      });
+    }
+  };
+
+  const swatches = colors.map(({ color, swatch }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigColor(color)}
+      key={color}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[configColor][6]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            width: 152,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group spacing="xs">{swatches}</Group>
+      </Popover>
+      <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
+    </Group>
+  );
+}

src/components/Settings/CommonSettings.tsx

@@ -67,8 +67,9 @@ export default function CommonSettings(args: any) {
           />
         )}
       </Group>
-      <ModuleEnabler />
+
       <ColorSchemeSwitch />
+      <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
       <Text

src/components/Settings/ModuleEnabler.tsx

@@ -1,4 +1,4 @@
-import { Group, Switch } from '@mantine/core';
+import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
 import * as Modules from '../modules';
 import { useConfig } from '../../tools/state';
 
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
   const modules = Object.values(Modules).map((module) => module);
   return (
     <Group direction="column">
-      {modules.map((module) => (
+      <Title order={4}>Module enabler</Title>
-        <Switch
+      <SimpleGrid cols={3} spacing="xl">
-          key={module.title}
+        {modules.map((module) => (
-          size="md"
+          <Checkbox
-          checked={config.modules?.[module.title]?.enabled ?? false}
+            key={module.title}
-          label={`Enable ${module.title}`}
+            size="md"
-          onChange={(e) => {
+            checked={config.modules?.[module.title]?.enabled ?? false}
-            setConfig({
+            label={`${module.title}`}
-              ...config,
+            onChange={(e) => {
-              modules: {
+              setConfig({
-                ...config.modules,
+                ...config,
-                [module.title]: {
+                modules: {
-                  ...config.modules?.[module.title],
+                  ...config.modules,
-                  enabled: e.currentTarget.checked,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                 },
-              },
+              });
-            });
+            }}
-          }}
+          />
-        />
+        ))}
-      ))}
+      </SimpleGrid>
     </Group>
   );
 }

src/components/Settings/OpacitySelector.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function OpacitySelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+    { value: 30, label: '30' },
+    { value: 40, label: '40' },
+    { value: 50, label: '50' },
+    { value: 60, label: '60' },
+    { value: 70, label: '70' },
+    { value: 80, label: '80' },
+    { value: 90, label: '90' },
+    { value: 100, label: '100' },
+  ];
+
+  const setConfigOpacity = (opacity: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appOpacity: opacity,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Opacity</Text>
+      <Slider
+        defaultValue={config.settings.appOpacity || 100}
+        step={10}
+        min={10}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setConfigOpacity(value)}
+      />
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.tsx

@@ -11,7 +11,7 @@ function SettingsMenu(props: any) {
       <Tabs.Tab data-autofocus label="Common">
         <CommonSettings />
       </Tabs.Tab>
-      <Tabs.Tab label="Advanced">
+      <Tabs.Tab label="Customisations">
         <AdvancedSettings />
       </Tabs.Tab>
     </Tabs>

src/components/Settings/ShadeSelector.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+export function ShadeSelector() {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const primaryShades = theme.colors[primaryColor].map((s, i) => ({
+    swatch: theme.colors[primaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+  const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
+    swatch: theme.colors[secondaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+
+  const setConfigShade = (shade: MantineTheme['primaryShade']) => {
+    setPrimaryShade(shade);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        primaryShade: shade,
+      },
+    });
+  };
+
+  const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group direction="column" spacing="xs">
+          <Group spacing="xs">{primarySwatches}</Group>
+          <Group spacing="xs">{secondarySwatches}</Group>
+        </Group>
+      </Popover>
+      <Text>Shade</Text>
+    </Group>
+  );
+}

src/components/layout/Aside.tsx

@@ -28,19 +28,22 @@ export default function Aside(props: any) {
       className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      {matches && (
+      <>
-        <Group my="sm" grow direction="column" style={{ width: 300 }}>
+        {matches && (
-          <ModuleWrapper module={CalendarModule} />
+          <Group my="sm" grow direction="column" style={{ width: 300 }}>
-          <ModuleWrapper module={TotalDownloadsModule} />
+            <ModuleWrapper module={CalendarModule} />
-          <ModuleWrapper module={WeatherModule} />
+            <ModuleWrapper module={TotalDownloadsModule} />
-          <ModuleWrapper module={DateModule} />
+            <ModuleWrapper module={WeatherModule} />
-        </Group>
+            <ModuleWrapper module={DateModule} />
-      )}
+          </Group>
+        )}
+      </>
     </MantineAside>
   );
 }

src/components/layout/Background.tsx

@@ -0,0 +1,20 @@
+import { Global } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function Background() {
+  const { config } = useConfig();
+
+  return (
+    <Global
+      styles={{
+        body: {
+          minHeight: '100vh',
+          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+}

src/components/layout/Header.tsx

@@ -41,7 +41,7 @@ export function Header(props: any) {
 
   return (
     <Head height="auto">
-      <Group m="xs" position="apart">
+      <Group p="xs" position="apart">
         <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
         </Box>

src/components/layout/Layout.tsx

@@ -3,6 +3,7 @@ import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
 import { HeaderConfig } from './HeaderConfig';
+import { Background } from './Background';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -13,6 +14,7 @@ export default function Layout({ children, style }: any) {
   return (
     <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
       <HeaderConfig />
+      <Background />
       <main
         className={cx(classes.main)}
         style={{

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">
@@ -26,7 +28,11 @@ export function Logo({ style }: any) {
           sx={style}
           weight="bold"
           variant="gradient"
-          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+          gradient={{
+            from: primaryColor,
+            to: secondaryColor,
+            deg: 145,
+          }}
         >
           {config.settings.title || 'Homarr'}
         </Text>

src/components/modules/downloads/DownloadsModule.tsx

@@ -55,7 +55,7 @@ export default function DownloadComponent() {
         setTorrents(response.data);
         setIsLoading(false);
       });
-    }, 1000);
+    }, 5000);
   }, [config.services]);
 
   if (downloadServices.length === 0) {

src/components/modules/moduleWrapper.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Group, Menu, Switch, TextInput } from '@mantine/core';
+import { Button, Card, Group, Menu, Switch, TextInput, useMantineColorScheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
@@ -91,6 +91,7 @@ function getItems(module: IModule) {
 
 export function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
+  const { colorScheme } = useMantineColorScheme();
   const { config, setConfig } = useConfig();
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
@@ -99,8 +100,21 @@ export function ModuleWrapper(props: any) {
   if (!isShown) {
     return null;
   }
+
   return (
-    <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+    <Card
+      {...props}
+      hidden={!isShown}
+      withBorder
+      radius="lg"
+      shadow="sm"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
       <ModuleMenu
         module={module}
         styles={{

src/pages/_app.tsx

@@ -3,17 +3,30 @@ import { useState } from 'react';
 import { AppProps } from 'next/app';
 import { getCookie, setCookies } from 'cookies-next';
 import Head from 'next/head';
-import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
+import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
 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 [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
+  const colorTheme = {
+    primaryColor,
+    secondaryColor,
+    setPrimaryColor,
+    setSecondaryColor,
+    primaryShade,
+    setPrimaryShade,
+  };
+
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
@@ -24,29 +37,31 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   return (
     <>
       <Head>
-        <title>Homarr 🦞</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-        <link rel="shortcut icon" href="/favicon.svg" />
       </Head>
 
       <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <MantineProvider
+        <ColorTheme.Provider value={colorTheme}>
-          theme={{
+          <MantineProvider
-            ...theme,
+            theme={{
-            colorScheme,
+              ...theme,
-          }}
+              primaryColor,
-          styles={{
+              primaryShade,
-            ...styles,
+              colorScheme,
-          }}
+            }}
-          withGlobalStyles
+            styles={{
-          withNormalizeCSS
+              ...styles,
-        >
+            }}
-          <NotificationsProvider limit={4} position="bottom-left">
+            withGlobalStyles
-            <ConfigProvider>
+            withNormalizeCSS
-              <Component {...pageProps} />
+          >
-            </ConfigProvider>
+            <NotificationsProvider limit={4} position="bottom-left">
-          </NotificationsProvider>
+              <ConfigProvider>
-        </MantineProvider>
+                <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,28 @@
+import { createContext, useContext } from 'react';
+import { MantineTheme } from '@mantine/core';
+
+type colorThemeContextType = {
+  primaryColor: MantineTheme['primaryColor'];
+  secondaryColor: MantineTheme['primaryColor'];
+  primaryShade: MantineTheme['primaryShade'];
+  setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
+  setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
+  setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
+};
+
+export const ColorTheme = createContext<colorThemeContextType>({
+  primaryColor: 'red',
+  secondaryColor: 'orange',
+  primaryShade: 6,
+  setPrimaryColor: () => {},
+  setSecondaryColor: () => {},
+  setPrimaryShade: () => {},
+});
+
+export function useColorTheme() {
+  const context = useContext(ColorTheme);
+  if (context === undefined) {
+    throw new Error('useColorTheme must be used within a ColorTheme.Provider');
+  }
+  return context;
+}

src/tools/theme.ts

@@ -1,6 +1,3 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {
+export const theme: MantineProviderProps['theme'] = {};
-  primaryColor: 'red',
-  primaryShade: 6,
-};

src/tools/types.ts

@@ -1,3 +1,4 @@
+import { MantineTheme } from '@mantine/core';
 import { OptionValues } from '../components/modules/modules';
 
 export interface Settings {
@@ -5,6 +6,11 @@ export interface Settings {
   title?: string;
   logo?: string;
   favicon?: string;
+  primaryColor?: MantineTheme['primaryColor'];
+  secondaryColor?: MantineTheme['primaryColor'];
+  primaryShade?: MantineTheme['primaryShade'];
+  background?: string;
+  appOpacity?: number;
 }
 
 export interface Config {