✨ Added a shade selector

Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade

src/tools/color.ts

@@ -1,17 +1,22 @@
 import { createContext, useContext } from 'react';
+import { MantineTheme } from '@mantine/core';
 
 type colorThemeContextType = {
-  primaryColor: string;
-  secondaryColor: string;
-  setPrimaryColor: (color: string) => void;
-  setSecondaryColor: (color: string) => void;
+  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() {

src/tools/theme.ts

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

src/tools/types.ts

@@ -1,12 +1,14 @@
 import { OptionValues } from '../components/modules/modules';
+import { MantineTheme } from '@mantine/core';
 
 export interface Settings {
   searchUrl: string;
   title?: string;
   logo?: string;
   favicon?: string;
-  primaryColor?: string;
-  secondaryColor?: string;
+  primaryColor?: MantineTheme['primaryColor'];
+  secondaryColor?: MantineTheme['primaryColor'];
+  primaryShade?: MantineTheme['primaryShade'];
   background?: string;
 }