[Feature] Support changing accent/primary color (#282)

* [Feature] Support changing accent/primary color

- adds color picker to settings with five swatches (blue default, yellow green and red imported from sonixd, purple new)
- changing color will change the appropriate css variable

* Remove hover styles that use an alternate primary

---------

Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -1,4 +1,5 @@
-import { Switch, Select } from '/@/renderer/components';
+import { ColorPicker, Stack } from '@mantine/core';
+import { Switch, Select, Text } from '/@/renderer/components';
 import {
     SettingsSection,
     SettingOption,
@@ -87,6 +88,35 @@ export const ThemeSettings = () => {
             isHidden: !settings.followSystemTheme,
             title: 'Theme (light)',
         },
+        {
+            control: (
+                <Stack align="center">
+                    <ColorPicker
+                        defaultValue={settings.accent}
+                        format="rgb"
+                        swatches={[
+                            'rgb(53, 116, 252)',
+                            'rgb(240, 170, 22)',
+                            'rgb(29, 185, 84)',
+                            'rgb(214, 81, 63)',
+                            'rgb(170, 110, 216)',
+                        ]}
+                        swatchesPerRow={5}
+                        onChangeEnd={(e) => {
+                            setSettings({
+                                general: {
+                                    ...settings,
+                                    accent: e,
+                                },
+                            });
+                        }}
+                    />
+                    <Text>{settings.accent}</Text>
+                </Stack>
+            ),
+            description: 'Sets the accent color',
+            title: 'Accent color',
+        },
     ];
 
     return <SettingsSection options={themeOptions} />;