Skip to contentSkip to content

InitColorSchemeScript API

API reference docs for the React InitColorSchemeScript component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
// or
import { InitColorSchemeScript } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
attributestring'data-mui-color-scheme'

DOM attribute for applying a color scheme.

colorSchemeNodestring'document.documentElement'

The node (provided as string) used to attach the color-scheme attribute.

colorSchemeStorageKeystring'mui-color-scheme'

localStorage key used to store colorScheme.

defaultDarkColorSchemestring'dark'

The default color scheme to be used in dark mode.

defaultLightColorSchemestring'light'

The default color scheme to be used in light mode.

defaultMode'dark'
| 'light'
| 'system'
'system'

The default mode when the storage is empty (user's first visit).

modeStorageKeystring'mui-mode'

localStorage key used to store mode.

noncestring-

Nonce string to pass to the inline script for CSP headers.

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.