42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Group, rem,
|
|
Tooltip,
|
|
useComputedColorScheme,
|
|
useMantineColorScheme,
|
|
useMantineTheme
|
|
} from "@mantine/core";
|
|
import {iconMStyle} from "~/styles";
|
|
|
|
import ThemeLightDarkIcon from "mdi-react/ThemeLightDarkIcon";
|
|
import WeatherNightIcon from "mdi-react/WeatherNightIcon";
|
|
import WeatherSunnyIcon from "mdi-react/WeatherSunnyIcon";
|
|
import type {CSSProperties} from "react";
|
|
|
|
|
|
export function ThemeToggle({extraStyle, iconStyle}: {extraStyle?: CSSProperties, iconStyle?: CSSProperties}) {
|
|
const { colorScheme, setColorScheme } = useMantineColorScheme();
|
|
// const [colorSchemeState, toggleColorSchemeState] = useToggle(['auto', 'dark', 'light'] as const);
|
|
const computedColorScheme = useComputedColorScheme('light');
|
|
const theme = useMantineTheme();
|
|
|
|
const nextScheme = colorScheme === "auto" ? "dark" : colorScheme === "dark" ? "light" : "auto";
|
|
|
|
const onClickChangeColorScheme = () => {
|
|
setColorScheme(nextScheme)
|
|
}
|
|
|
|
return (
|
|
<Group justify="center">
|
|
<Tooltip label={colorScheme === 'auto' ? 'Auto' : colorScheme === 'dark' ? 'Dark' : 'Light'} position="left">
|
|
<ActionIcon variant="light" size="md" onClick={onClickChangeColorScheme} color={
|
|
colorScheme === 'auto' ? undefined : computedColorScheme === 'dark' ? theme.colors.blue[4] : theme.colors.yellow[6]
|
|
} style={ extraStyle ? {...extraStyle} : {} }>
|
|
{colorScheme === 'auto' ? <ThemeLightDarkIcon style={iconStyle || iconMStyle}/> :
|
|
colorScheme === 'dark' ? <WeatherNightIcon style={iconStyle || iconMStyle}/> : <WeatherSunnyIcon style={iconStyle || iconMStyle}/>}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</Group>
|
|
);
|
|
}
|