mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-10-29 10:02:09 +08:00
32 lines
800 B
TypeScript
32 lines
800 B
TypeScript
import { Button, ButtonGroup } from '@mui/material'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type ThemeValue = IVergeConfig['theme_mode']
|
|
|
|
interface Props {
|
|
value?: ThemeValue
|
|
onChange?: (value: ThemeValue) => void
|
|
}
|
|
|
|
export const ThemeModeSwitch = (props: Props) => {
|
|
const { value, onChange } = props
|
|
const { t } = useTranslation()
|
|
|
|
const modes = ['light', 'dark', 'system'] as const
|
|
|
|
return (
|
|
<ButtonGroup size="small" sx={{ my: '4px' }}>
|
|
{modes.map((mode) => (
|
|
<Button
|
|
key={mode}
|
|
variant={mode === value ? 'contained' : 'outlined'}
|
|
onClick={() => onChange?.(mode)}
|
|
sx={{ textTransform: 'capitalize' }}
|
|
>
|
|
{t(`settings.sections.appearance.${mode}`)}
|
|
</Button>
|
|
))}
|
|
</ButtonGroup>
|
|
)
|
|
}
|