From 742b13d65ecb75e3011fd5bad8c3092d4a11d93b Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Mon, 23 Oct 2023 00:46:28 +0000
Subject: [PATCH] [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                          |  7 ++++
 src/renderer/components/button/index.tsx      | 10 ++++--
 src/renderer/components/tabs/index.tsx        |  1 +
 .../components/general/theme-settings.tsx     | 32 ++++++++++++++++++-
 src/renderer/store/settings.store.ts          |  2 ++
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 26e7a522f..cf74f2f6f 100644
--- 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
index 22a0433f6..344f7ff19 100644
--- 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
index c45b0ad7b..696ca1188 100644
--- 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
index 86525135d..f20164307 100644
--- 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
index febfbd802..1331f167a 100644
--- 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,