Allow UI color customization

Author: martpie

src-tauri/src/plugins/config.rs

@@ -57,6 +57,7 @@ pub enum TrackViewDensity {
 pub struct Config {
     pub language: String,
     pub theme: String,
+    pub ui_accent_color: Option<String>,
     pub audio_volume: f32,
     pub audio_playback_rate: Option<f32>,
     pub audio_output_device: String,
@@ -82,6 +83,7 @@ impl Config {
         Config {
             language: "en".to_owned(),
             theme: SYSTEM_THEME.to_owned(),
+            ui_accent_color: None,
             audio_volume: 1.0,
             audio_playback_rate: Some(1.0),
             audio_output_device: "default".to_owned(),

src/components/Setting.module.css

@@ -48,6 +48,11 @@
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  &[type="color"] {
+    padding: 0;
+    width: 80px;
+  }
 }
 
 .settingError {

src/components/Setting.tsx

@@ -41,7 +41,7 @@ export function Title(props: Props) {
 
 export type InputProps = {
   label: string;
-  description?: string;
+  description?: string | React.ReactNode;
 };
 
 export function Input(
@@ -84,3 +84,23 @@ export function Select(
     </div>
   );
 }
+
+export function ColorSelector(
+  props: React.InputHTMLAttributes<HTMLInputElement> & InputProps,
+) {
+  const { label, description, ...otherProps } = props;
+  const id = useId();
+
+  return (
+    <div>
+      <Label htmlFor={id}>{label}</Label>
+      <input
+        id={id}
+        type="color"
+        className={styles.settingInput}
+        {...otherProps}
+      />
+      {description != null && <Description>{description}</Description>}
+    </div>
+  );
+}

src/elements/Flexbox.tsx

@@ -7,7 +7,7 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   direction?: 'vertical' | 'horizontal';
-  align?: 'center';
+  align?: 'center' | 'baseline';
 };
 
 export default function Flexbox(props: Props) {

src/generated/typings.ts

@@ -1,6 +1,6 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type Config = { language: string, theme: string, audio_volume: number, audio_playback_rate: number | null, audio_output_device: string, audio_follow_playing_track: boolean, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, library_autorefresh: boolean, sleepblocker: boolean, auto_update_checker: boolean, notifications: boolean, track_view_density: TrackViewDensity, };
+export type Config = { language: string, theme: string, ui_accent_color: string | null, audio_volume: number, audio_playback_rate: number | null, audio_output_device: string, audio_follow_playing_track: boolean, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, library_autorefresh: boolean, sleepblocker: boolean, auto_update_checker: boolean, notifications: boolean, track_view_density: TrackViewDensity, };
 
 export type DefaultView = "Library" | "Playlists";
 

src/routes/settings.ui.tsx

@@ -1,13 +1,16 @@
 import { t as tMacro } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useLoaderData } from '@tanstack/react-router';
+import { debounce } from 'lodash-es';
+import { useMemo } from 'react';
 
 import * as Setting from '../components/Setting';
 import CheckboxSetting from '../components/SettingCheckbox';
+import Button from '../elements/Button';
 import type { Config, DefaultView } from '../generated/typings';
 import useInvalidate, { useInvalidateCallback } from '../hooks/useInvalidate';
 import { themes } from '../lib/themes';
-import SettingsAPI from '../stores/SettingsAPI';
+import SettingsAPI, { DEFAULT_MAIN_COLOR } from '../stores/SettingsAPI';
 import { ALL_LANGUAGES } from '../translations/languages';
 
 export const Route = createFileRoute('/settings/ui')({
@@ -20,6 +23,12 @@ function ViewSettingsUI() {
 
   const invalidate = useInvalidate();
 
+  const setUIMainColorThrottled = useMemo(() => {
+    return debounce((value: string) => {
+      SettingsAPI.setUIMainColor(value).then(invalidate);
+    }, 250);
+  }, [invalidate]);
+
   return (
     <>
       <Setting.Section>
@@ -41,6 +50,27 @@ function ViewSettingsUI() {
           })}
         </Setting.Select>
       </Setting.Section>
+      <Setting.Section>
+        <Setting.ColorSelector
+          label={t`Accent color`}
+          value={config.ui_accent_color ?? DEFAULT_MAIN_COLOR}
+          description={
+            <Button
+              type="button"
+              bSize="small"
+              onClick={() => {
+                SettingsAPI.setUIMainColor(DEFAULT_MAIN_COLOR).then(invalidate);
+                SettingsAPI.applyUIMainColorToUI(DEFAULT_MAIN_COLOR);
+              }}
+            >{t`Reset`}</Button>
+          }
+          onChange={(e) => {
+            const value = e.currentTarget.value;
+            SettingsAPI.applyUIMainColorToUI(value);
+            setUIMainColorThrottled(value);
+          }}
+        />
+      </Setting.Section>
       <Setting.Section>
         <Setting.Select
           label={t`Language`}

src/stores/SettingsAPI.ts

@@ -13,6 +13,8 @@ import { logAndNotifyError } from '../lib/utils';
 import useLibraryStore from './useLibraryStore';
 import useToastsStore from './useToastsStore';
 
+export const DEFAULT_MAIN_COLOR = '#459ce7';
+
 // Manual prevention of a useEffect being called twice (to avoid refreshing the
 // library twice on startup in dev mode).
 // Also, we useInvalidate, SettingsAPI.init would infinitely loop. It means
@@ -27,11 +29,19 @@ async function init(then: () => void): Promise<void> {
 
   did_init = true;
   // Blocking (the window should not be shown until it's done)
-  await Promise.allSettled([
-    checkTheme(),
+  const [theme, color] = await Promise.all([
+    getCurrentWindow()
+      .theme()
+      .then((maybeTheme) => maybeTheme ?? 'light'),
+    config
+      .get('ui_accent_color')
+      .then((maybeColor) => maybeColor ?? DEFAULT_MAIN_COLOR),
     checkForUpdate({ silentFail: true }),
   ]);
 
+  applyThemeToUI(theme);
+  applyUIMainColorToUI(color);
+
   // Show the app once everything is loaded
   await getCurrentWindow().show();
   info('UI is ready!');
@@ -72,7 +82,7 @@ const setTheme = async (themeID: string): Promise<void> => {
 /**
  * Apply theme colors to  the BrowserWindow
  */
-async function applyThemeToUI(themeID: string): Promise<void> {
+function applyThemeToUI(themeID: string): void {
   const theme = getTheme(themeID);
 
   // TODO think about variables validity?
@@ -83,17 +93,28 @@ async function applyThemeToUI(themeID: string): Promise<void> {
   });
 }
 
-async function checkTheme(): Promise<void> {
-  const theme = (await getCurrentWindow().theme()) ?? 'light';
-  applyThemeToUI(theme);
-}
-
 async function setTracksDensity(
   density: Config['track_view_density'],
 ): Promise<void> {
   await config.set('track_view_density', density);
 }
 
+const setUIMainColor = async (
+  mainColor: Config['ui_accent_color'],
+): Promise<void> => {
+  await config.set('ui_accent_color', mainColor);
+};
+
+const applyUIMainColorToUI = (mainColor: Config['ui_accent_color']) => {
+  document.documentElement.style.setProperty('--main-color', mainColor);
+
+  //   --main-color: #459ce7;
+  // --main-color-darker: #3a73a4;
+  // --main-color-lighter: #63aff0;
+  // --link-color: #459ce7;
+  // --link-color-hover: #52afff;
+};
+
 /**
  * Check if a new release is available
  */
@@ -214,6 +235,8 @@ const SettingsAPI = {
   setLanguage,
   setTheme,
   applyThemeToUI,
+  setUIMainColor,
+  applyUIMainColorToUI,
   setTracksDensity,
   checkForUpdate,
   toggleSleepBlocker,

src/translations/en.po

@@ -66,7 +66,7 @@ msgstr "Artists"
 
 #: src/components/Footer.tsx:39
 #: src/routes/playlists.tsx:169
-#: src/routes/settings.ui.tsx:96
+#: src/routes/settings.ui.tsx:126
 msgid "Playlists"
 msgstr "Playlists"
 
@@ -449,6 +449,7 @@ msgid "Reset library?"
 msgstr "Reset library?"
 
 #: src/routes/settings.library.tsx:144
+#: src/routes/settings.ui.tsx:65
 msgid "Reset"
 msgstr "Reset"
 
@@ -468,71 +469,75 @@ msgstr "Interface"
 msgid "About"
 msgstr "About"
 
-#: src/routes/settings.ui.tsx:27
+#: src/routes/settings.ui.tsx:36
 msgid "Theme"
 msgstr "Theme"
 
-#: src/routes/settings.ui.tsx:28
+#: src/routes/settings.ui.tsx:37
 msgid "Change the appearance of the interface"
 msgstr "Change the appearance of the interface"
 
-#: src/routes/settings.ui.tsx:34
+#: src/routes/settings.ui.tsx:43
 msgid "System (default)"
 msgstr "System (default)"
 
-#: src/routes/settings.ui.tsx:46
+#: src/routes/settings.ui.tsx:55
+msgid "Accent color"
+msgstr "Accent color"
+
+#: src/routes/settings.ui.tsx:76
 msgid "Language"
 msgstr "Language"
 
-#: src/routes/settings.ui.tsx:64
+#: src/routes/settings.ui.tsx:94
 msgid "Tracks density"
 msgstr "Tracks density"
 
-#: src/routes/settings.ui.tsx:65
+#: src/routes/settings.ui.tsx:95
 msgid "Change the tracks spacing"
 msgstr "Change the tracks spacing"
 
-#: src/routes/settings.ui.tsx:74
+#: src/routes/settings.ui.tsx:104
 msgid "Normal (default)"
 msgstr "Normal (default)"
 
-#: src/routes/settings.ui.tsx:77
+#: src/routes/settings.ui.tsx:107
 msgid "Compact"
 msgstr "Compact"
 
-#: src/routes/settings.ui.tsx:83
+#: src/routes/settings.ui.tsx:113
 msgid "Default view"
 msgstr "Default view"
 
-#: src/routes/settings.ui.tsx:85
+#: src/routes/settings.ui.tsx:115
 msgid "Change the default view when starting the application"
 msgstr "Change the default view when starting the application"
 
-#: src/routes/settings.ui.tsx:93
+#: src/routes/settings.ui.tsx:123
 msgid "Library (default)"
 msgstr "Library (default)"
 
-#: src/routes/settings.ui.tsx:103
+#: src/routes/settings.ui.tsx:133
 msgid "Display Notifications"
 msgstr "Display Notifications"
 
-#: src/routes/settings.ui.tsx:104
+#: src/routes/settings.ui.tsx:134
 msgid "Send notifications when the playing track changes"
 msgstr "Send notifications when the playing track changes"
 
-#: src/routes/settings.ui.tsx:114
+#: src/routes/settings.ui.tsx:144
 msgid "Sleep mode blocker"
 msgstr "Sleep mode blocker"
 
-#: src/routes/settings.ui.tsx:115
+#: src/routes/settings.ui.tsx:145
 msgid "Prevent the computer from going into sleep mode when playing"
 msgstr "Prevent the computer from going into sleep mode when playing"
 
-#: src/routes/settings.ui.tsx:130
+#: src/routes/settings.ui.tsx:160
 msgid "Light"
 msgstr "Light"
 
-#: src/routes/settings.ui.tsx:132
+#: src/routes/settings.ui.tsx:162
 msgid "Dark"
 msgstr "Dark"
 
@@ -591,11 +596,11 @@ msgid "The playlist \"{name}\" was created"
 msgstr "The playlist \"{name}\" was created"
 
 #. placeholder {0}: newRelease.tag_name
-#: src/stores/SettingsAPI.ts:137
+#: src/stores/SettingsAPI.ts:158
 msgid "Museeks {0} is available, check https://museeks.io!"
 msgstr "Museeks {0} is available, check https://museeks.io!"
 
-#: src/stores/SettingsAPI.ts:139
+#: src/stores/SettingsAPI.ts:160
 msgid "Museeks {currentVersion} is the latest version available."
 msgstr "Museeks {currentVersion} is the latest version available."