✨ Added primary/secondary color selection

Added two new inputs to the options menu: primary and secondary color selectors.

src/components/Settings/CommonSettings.tsx

@@ -5,6 +5,8 @@ import {
   SegmentedControl,
   TextInput,
   Anchor,
+  ColorPicker,
+  useMantineTheme,
 } from '@mantine/core';
 import { useState } from 'react';
 import { IconBrandGithub as BrandGithub } from '@tabler/icons';
@@ -14,6 +16,7 @@ import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
+import { ColorSelector } from './ColorSelector';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -30,6 +33,24 @@ export default function CommonSettings(args: any) {
     matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
   );
 
+  const theme = useMantineTheme();
+  const colors = Object.keys(theme.colors).map((color) => theme.colors[color][6]);
+
+  const [primaryColor, setPrimaryColor] = useState(config.settings.primary_color);
+  const [secondaryColor, setSecondaryColor] = useState(config.settings.secondary_color);
+
+  // const convertColorHexToNames = (hex: string) => {
+  //   // Have to add some exceptions here because it's not converting cleanly
+  //   let colorName = Object.keys(theme.colors).find((key) => theme.colors[key].includes(hex));
+  //   if (!colorName) {
+  //     if (hex === '#228ae6') colorName = 'blue';
+  //     else if (hex === '#15abbf') colorName = 'cyan';
+  //     else if (hex === '#3fbf57') colorName = 'green';
+  //     else if (hex === '#fc7d14') colorName = 'orange';
+  //   }
+  //   return colorName;
+  // };
+
   return (
     <Group direction="column" grow>
       <Group grow direction="column" spacing={0}>
@@ -76,6 +97,8 @@ export default function CommonSettings(args: any) {
       </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
       <ConfigChanger />
       <SaveConfigComponent />
       <Text