80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
|
|
import { Sun1, Moon } from 'iconsax-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Icon } from '@harmony/kit';
|
|
import { type MouseEvent } from 'react';
|
|
|
|
enum ThemeMode {
|
|
Light = 'light',
|
|
Dark = 'dark',
|
|
}
|
|
|
|
interface ThemeToggleButtonProps {
|
|
value: 'light' | 'dark';
|
|
onChange: (newMode: 'light' | 'dark') => void;
|
|
}
|
|
|
|
export const ThemeToggleButton = ({
|
|
value,
|
|
onChange,
|
|
}: ThemeToggleButtonProps) => {
|
|
const { t } = useTranslation('setting');
|
|
|
|
const handleChange = (
|
|
_event: MouseEvent<HTMLElement>,
|
|
newMode: 'light' | 'dark' | null,
|
|
) => {
|
|
if (newMode !== null) {
|
|
onChange(newMode);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<ToggleButtonGroup
|
|
value={value}
|
|
exclusive
|
|
color="primary"
|
|
onChange={handleChange}
|
|
size="medium"
|
|
sx={{
|
|
borderRadius: 1.5,
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<ToggleButton
|
|
value={ThemeMode.Light}
|
|
aria-label="light theme"
|
|
sx={{
|
|
textTransform: 'none',
|
|
display: 'flex',
|
|
gap: 1,
|
|
px: 2,
|
|
py: 1,
|
|
}}
|
|
>
|
|
<Icon Component={Sun1} color="primary.main" variant="Bold" />
|
|
{t('settings.light')}
|
|
</ToggleButton>
|
|
|
|
<ToggleButton
|
|
value={ThemeMode.Dark}
|
|
aria-label="dark theme"
|
|
sx={{
|
|
textTransform: 'none',
|
|
display: 'flex',
|
|
gap: 1,
|
|
px: 2,
|
|
py: 1,
|
|
}}
|
|
>
|
|
<Icon Component={Moon} size="medium" color="primary.light" />
|
|
{t('settings.dark')}
|
|
</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
</Box>
|
|
);
|
|
};
|