48 lines
989 B
TypeScript
48 lines
989 B
TypeScript
import {
|
|
Box,
|
|
Center,
|
|
SegmentedControl,
|
|
useMantineColorScheme,
|
|
} from "@mantine/core";
|
|
import { TbMoon, TbRobot, TbSun } from "react-icons/tb";
|
|
|
|
export function ThemeSetting() {
|
|
const { colorScheme, setColorScheme } = useMantineColorScheme();
|
|
|
|
return (
|
|
<SegmentedControl
|
|
value={colorScheme}
|
|
onChange={(v) => setColorScheme(v as any)}
|
|
data={[
|
|
{
|
|
value: "light",
|
|
label: (
|
|
<Center>
|
|
<TbSun size="1rem" />
|
|
<Box ml={10}>Light</Box>
|
|
</Center>
|
|
),
|
|
},
|
|
{
|
|
value: "auto",
|
|
label: (
|
|
<Center>
|
|
<TbRobot size="1rem" />
|
|
<Box ml={10}>Auto</Box>
|
|
</Center>
|
|
),
|
|
},
|
|
{
|
|
value: "dark",
|
|
label: (
|
|
<Center>
|
|
<TbMoon size="1rem" />
|
|
<Box ml={10}>Dark</Box>
|
|
</Center>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|