# ColorSchemes # Color schemes [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md) manages the color scheme context in your application. You can configure the default color scheme value with the `defaultColorScheme` prop; possible values are `light`, `dark`, and `auto` (system color scheme is used). The default value is `light`. ```tsx import { MantineProvider } from '@mantine/core'; function Demo() { return ( {/* Your app here */} ); } ``` ## data-mantine-color-scheme attribute When [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md) is mounted, it sets a `data-mantine-color-scheme` attribute on the `` element to the value that the user has previously selected or to the value of the `defaultColorScheme` prop. The `data-mantine-color-scheme` attribute is used in all component styles to determine which colors each component should use. ## use-mantine-color-scheme hook The `useMantineColorScheme` hook can be used to get and set the current color scheme value: ```tsx function useMantineColorScheme(): { /** Current color scheme value */ colorScheme: 'dark' | 'light' | 'auto'; /** Sets colors scheme to given value */ setColorScheme: (colorScheme: 'dark' | 'light' | 'auto') => void; /** Toggles color scheme to the opposite value; if value is 'auto', color scheme is inferred from the OS settings */ toggleColorScheme: () => void; /** Clears the color scheme value from storage and sets it to `defaultColorScheme` */ clearColorScheme: () => void; }; ``` ```tsx import { useMantineColorScheme, Button, Group } from '@mantine/core'; function Demo() { const { setColorScheme, clearColorScheme } = useMantineColorScheme(); return ( ); } ``` ## use-computed-color-scheme hook `useComputedColorScheme` returns a computed color scheme value—it returns either `light` or `dark`. It can be used to implement color scheme toggle logic: ```tsx import { useComputedColorScheme, useMantineColorScheme, } from '@mantine/core'; function Demo() { // -> colorScheme is 'auto' | 'light' | 'dark' const { colorScheme, setColorScheme } = useMantineColorScheme(); // -> computedColorScheme is 'light' | 'dark', argument is the default value const computedColorScheme = useComputedColorScheme('light'); // Incorrect color scheme toggle implementation // If colorScheme is 'auto', then it is not possible to // change color scheme correctly in all cases: // 'auto' can mean both light and dark const toggleColorScheme = () => { setColorScheme(colorScheme === 'dark' ? 'light' : 'dark'); }; // Correct color scheme toggle implementation // computedColorScheme is always either 'light' or 'dark' const toggleColorScheme = () => { setColorScheme(computedColorScheme === 'dark' ? 'light' : 'dark'); }; } ``` ## Transitions during color scheme change By default, transitions on all elements are disabled when the color scheme changes to avoid inconsistent animations. To enable transitions during color scheme changes, set the `keepTransitions: true` option on the `useMantineColorScheme` hook: ```tsx import { useMantineColorScheme } from '@mantine/core'; function Demo() { const { colorScheme, setColorScheme } = useMantineColorScheme({ keepTransitions: true, }); } ``` ## Color scheme value caveats By default, the color scheme value is stored in local storage, and its value is saved in state before the component is mounted to avoid a flash of inaccurate color scheme. This means that the color scheme value can be different on the client and server, as the server does not have access to local storage and always uses the default value. If you have server-side rendering in your application (for example, if you use [Next.js](https://mantine.dev/llms/guides-next.md) or [React Router](https://mantine.dev/llms/guides-react-router.md)), then you cannot use the `colorScheme` value in your application to avoid hydration issues. Instead, you can use the `dark` and `light` mixins from [postcss-preset-mantine](https://mantine.dev/llms/styles-postcss-preset.md) to generate styles that will hide elements based on the color scheme value: ```tsx import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core'; import { SunIcon, MoonIcon } from '@phosphor-icons/react'; import cx from 'clsx'; import classes from './Demo.module.css'; function Demo() { const { setColorScheme } = useMantineColorScheme(); const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true }); return ( setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')} variant="default" size="xl" aria-label="Toggle color scheme" > ); } ``` > **colorScheme for client-only applications** > > You can safely use the `colorScheme` value in client-only applications (for example, Vite or create-react-app applications). > In this case, there is no hydration, and thus no hydration error can occur. ## ColorSchemeScript The `ColorSchemeScript` component renders a script tag that sets the `data-mantine-color-scheme` attribute on the `` element to the user's selected value or to the `defaultColorScheme` prop value before hydration. It is used to avoid a flash of inaccurate color scheme in server-side rendered applications, for example [Next.js](https://mantine.dev/llms/guides-next.md) or [React Router](https://mantine.dev/llms/guides-react-router.md). Follow the framework-specific guides to learn where to render the `ColorSchemeScript` component. You can add any additional props to the `