[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/app.tsx

@@ -37,6 +37,8 @@ const remote = isElectron() ? window.electron.remote : null;
 
 export const App = () => {
     const theme = useTheme();
+    const contentFont = useSettingsStore((state) => state.general.fontContent);
+    const accent = useSettingsStore((store) => store.general.accent);
     const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
     const { type: playbackType } = usePlaybackSettings();
     const { bindings } = useHotkeySettings();
@@ -80,6 +82,11 @@ export const App = () => {
         }
     }, [builtIn, custom, system, type]);
 
+    useEffect(() => {
+        const root = document.documentElement;
+        root.style.setProperty('--primary-color', accent);
+    }, [accent]);
+
     const providerValue = useMemo(() => {
         return { handlePlayQueueAdd };
     }, [handlePlayQueueAdd]);

src/renderer/components/button/index.tsx

@@ -39,8 +39,10 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }
 
     &:not([data-disabled])&:hover {
-        color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
+        color: ${(props) => `var(--btn-${props.variant}-fg) !important`};
-        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg)`};
+        background-image: ${(props) =>
+            props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
         border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
 
         svg {
@@ -50,7 +52,9 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
 
     &:not([data-disabled])&:focus-visible {
         color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
-        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg)`};
+        background-image: ${(props) =>
+            props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
     }
 
     &:active {

src/renderer/components/tabs/index.tsx

@@ -42,6 +42,7 @@ const StyledTabs = styled(MantineTabs)`
 
         &:hover {
             background: none;
+            border-color: var(--primary-color);
         }
     }
 `;

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} />;

src/renderer/store/settings.store.ts

@@ -119,6 +119,7 @@ export interface SettingsState {
         type: FontType;
     };
     general: {
+        accent: string;
         defaultFullPlaylist: boolean;
         followSystemTheme: boolean;
 
@@ -222,6 +223,7 @@ const initialState: SettingsState = {
         type: FontType.BUILT_IN,
     },
     general: {
+        accent: 'rgb(53, 116, 252)',
         defaultFullPlaylist: true,
         followSystemTheme: false,
         playButtonBehavior: Play.NOW,