The Chakra UI docs, https://chakra-ui.com/docs/styling/dark-mode, state the following:
To force dark mode, set the dark className on any parent element, or the root element of your application.
<Box bg="black" className="dark">
<Box bg="bg.subtle">
<Text>Hello</Text>
</Box>
</Box>
As far as I can tell, this isn't working at all however. Here's what I've got, using Next JS:
Imported the color mode snippet
npm i @chakra-ui/cli snippet add color-mode --save
Wrapped my layout in a ChakraProvider which includes the ColorModeProvider:
Provider:
'use client'
import { ChakraProvider } from '@chakra-ui/react';
import System from '../global/System';
import { ColorModeProvider } from './color-mode';
export function Provider( props ) {
return (
<ChakraProvider value={ System }>
<ColorModeProvider { ...props }/>
</ChakraProvider>
);
}
System looks like:
import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';
const config = defineConfig({
globalCss: {
body: {
color: { base: 'gray.800', _dark: 'gray.200' },
},
},
});
export default createSystem( defaultConfig, config );
And finally, my layout has the following:
import { ColorModeButton } from '@/client/components/ui/color-mode';
import { Provider } from '@/client/components/ui/provider';
import { Box, Text } from '@chakra-ui/react';
export default function() {
return (
<html lang='en' suppressHydrationWarning>
<body>
<Provider>
<Box>
<Text>Default</Text>
<Text className='light'>Light</Text>
<Text className='dark'>Dark</Text>
<ColorModeButton />
</Box>
</Provider>
</body>
</html>
);
};
All three Text components render the same color text. The ColorModeButton, when clicked, changes the text of all three Text fields as well, where I would expect it to only change the "Default" text.
If I set forcedTheme on the Provider to either light or dark, the expected theme is applied for all three Text components. The ColorModeButton no longer does anything in this case, which I believe is expected.
Despite what the docs say, I'm not convinced this works, or it requires some obscure, undocumented, configuration.
