[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>
This commit is contained in:
parent
8dcd49d574
commit
742b13d65e
5 changed files with 48 additions and 4 deletions
|
@ -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]);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -42,6 +42,7 @@ const StyledTabs = styled(MantineTabs)`
|
|||
|
||||
&:hover {
|
||||
background: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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} />;
|
||||
|
|
|
@ -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,
|
||||
|
|
Reference in a new issue