[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]);