npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

import {extendTheme} from '@chakra-ui/react'

const themes= {
    config:{
        initialColorMode: 'light',
        useSystemColorMode: true,
    },
    styles:{
        global:{
            body:{
                "margin":0,
                "font-family":"-apple-system,BlinkMacSystemFont,'Segoe UI'",
                "-webkit-font-smoothing":"antialiased",
                "-moz-osx-font-smoothing":"grayscale",
            },
            code:{
                "font-family":"source-code-pro,Menlo,Monaco,Consolas,"
            }

        }
    }
}

const theme = extendTheme({theme})

export default theme;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
            <App/>
        </ChakraProvider>
    </React.StrictMode>
);

const {colorMode, toggleColorMode} = useColorMode();

<Button notallow={toggleColorMode}>
    {colorMode==='light' ? 'Dark' : 'Light'}
</Button>