full-stack-fastapi-template/new-frontend/src/components/UserSettings/Appearance.tsx

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;