Skip to main content

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.

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