Tools & Modules
Dark Mode
Built-in dark/light mode, without any flicker (FOUC) for all components
UI Foundations Kit includes a built-in dark mode that can be toggled on and off with a single click. This feature is designed to work seamlessly with all components, and builds on top of the new native support from MUI to prevent flicker (FOUC) when switching between light and dark modes.
Usage
To change between modes, or access the current mode, you can use the useColorScheme()
hook:
const { mode, setMode } = useColorScheme();
return (
<Button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
</Button>
);