> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Frame>
  <img src="https://mintcdn.com/uifoundationskit/Wk6Bxr5jJVKk6EEL/images/homepage-darkmode.png?fit=max&auto=format&n=Wk6Bxr5jJVKk6EEL&q=85&s=12fed316fbe95fe779aea2b2dacea9b5" width="2800" height="1540" data-path="images/homepage-darkmode.png" />
</Frame>

## Usage

To change between modes, or access the current mode, you can use the `useColorScheme()` hook:

```tsx theme={null}
const { mode, setMode } = useColorScheme();

return (
  <Button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
    Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
  </Button>
);
```