umami/components/pages/settings/profile/ThemeSetting.js

34 lines
814 B
JavaScript
Raw Normal View History

2022-03-01 05:54:32 +01:00
import classNames from 'classnames';
import { Button, Icon } from 'react-basics';
2022-03-01 05:54:32 +01:00
import useTheme from 'hooks/useTheme';
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
import styles from './ThemeSetting.module.css';
2023-04-21 17:00:42 +02:00
export function ThemeSetting() {
const { theme, saveTheme } = useTheme();
2022-03-01 05:54:32 +01:00
return (
<div className={styles.buttons}>
<Button
className={classNames({ [styles.active]: theme === 'light' })}
onClick={() => saveTheme('light')}
>
<Icon>
<Sun />
</Icon>
</Button>
2022-03-01 05:54:32 +01:00
<Button
className={classNames({ [styles.active]: theme === 'dark' })}
onClick={() => saveTheme('dark')}
>
<Icon>
<Moon />
</Icon>
</Button>
2022-03-01 05:54:32 +01:00
</div>
);
}
2023-04-21 17:00:42 +02:00
export default ThemeSetting;