Dark Mode

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>
);

Get Started

Theme Tokens

Tools & Modules

Kit Components by Category

Usage

​Usage

Usage