40 lines
887 B
TypeScript
40 lines
887 B
TypeScript
import React from 'react'
|
|
import {
|
|
Badge,
|
|
Container,
|
|
Heading,
|
|
Radio,
|
|
RadioGroup,
|
|
Stack,
|
|
useColorMode,
|
|
} from '@chakra-ui/react'
|
|
|
|
const Appearance: React.FC = () => {
|
|
const { colorMode, toggleColorMode } = useColorMode()
|
|
|
|
return (
|
|
<>
|
|
<Container maxW="full">
|
|
<Heading size="sm" py={4}>
|
|
Appearance
|
|
</Heading>
|
|
<RadioGroup onChange={toggleColorMode} value={colorMode}>
|
|
<Stack>
|
|
{/* TODO: Add system default option */}
|
|
<Radio value="light" colorScheme="teal">
|
|
Light mode
|
|
<Badge ml="1" colorScheme="teal">
|
|
Default
|
|
</Badge>
|
|
</Radio>
|
|
<Radio value="dark" colorScheme="teal">
|
|
Dark mode
|
|
</Radio>
|
|
</Stack>
|
|
</RadioGroup>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
export default Appearance
|