add setting to override theme primary shade (#1791)

src/renderer/features/analytics/hooks/use-app-tracker.ts

@@ -103,6 +103,7 @@ type SettingsProperties = {
     'settings.themeLight': string;
     'settings.tray': boolean;
     'settings.useThemeAccentColor': boolean;
+    'settings.useThemePrimaryShade': boolean;
     'settings.windowBarStyle': Platform;
     'settings.zoomFactor': number;
 };
@@ -192,6 +193,7 @@ const getSettingsProperties = (): SettingsProperties => {
         'settings.themeLight': settings.general.themeLight,
         'settings.tray': ignoreWeb(settings.window.tray),
         'settings.useThemeAccentColor': settings.general.useThemeAccentColor,
+        'settings.useThemePrimaryShade': settings.general.useThemePrimaryShade,
         'settings.windowBarStyle': ignoreWeb(settings.window.windowBarStyle),
         'settings.zoomFactor': ignoreWeb(settings.general.zoomFactor),
     } as any;

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -13,6 +13,7 @@ import { THEME_DATA, useSetColorScheme } from '/@/renderer/themes/use-app-theme'
 import { ColorInput } from '/@/shared/components/color-input/color-input';
 import { Group } from '/@/shared/components/group/group';
 import { Select } from '/@/shared/components/select/select';
+import { Slider } from '/@/shared/components/slider/slider';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { getAppTheme } from '/@/shared/themes/app-theme';
@@ -253,6 +254,51 @@ export const ThemeSettings = memo(() => {
             }),
             title: t('setting.accentColor', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    checked={settings.useThemePrimaryShade}
+                    onChange={(e) => {
+                        setSettings({
+                            general: {
+                                useThemePrimaryShade: e.currentTarget.checked,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.useThemePrimaryShade', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.useThemePrimaryShade', { postProcess: 'sentenceCase' }),
+        },
+        {
+            control: (
+                <Slider
+                    defaultValue={settings.primaryShade}
+                    label={(value) => value}
+                    max={9}
+                    min={0}
+                    onChangeEnd={(value) => {
+                        setSettings({
+                            general: {
+                                primaryShade: value,
+                            },
+                        });
+                    }}
+                    step={1}
+                    w={120}
+                />
+            ),
+            description: t('setting.primaryShade', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: settings.useThemePrimaryShade,
+            title: t('setting.primaryShade', { postProcess: 'sentenceCase' }),
+        },
     ];
 
     return (