[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 <[email protected]> Co-authored-by: jeffvli <[email protected]>
jeffvli · Oct 23, 2023 · 742b13d · 742b13d · vercel · Oct 23, 2023
1 parent 8dcd49d
commit 742b13d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/src/renderer/app.tsx b/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]);

diff --git a/src/renderer/components/button/index.tsx b/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`};
-        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+        color: ${(props) => `var(--btn-${props.variant}-fg) !important`};
+        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 {

diff --git a/src/renderer/components/tabs/index.tsx b/src/renderer/components/tabs/index.tsx
@@ -42,6 +42,7 @@ const StyledTabs = styled(MantineTabs)`
 
         &:hover {
             background: none;
+            border-color: var(--primary-color);
         }
     }
 `;

diff --git a/src/renderer/features/settings/components/general/theme-settings.tsx b/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} />;

diff --git a/src/renderer/store/settings.store.ts b/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,