To get color scheme value in component use
If you want to get computed color scheme, use
useComputedColorScheme hook instead.
It will resolve
auto value to
light based on user preferences:
Note that both hooks are using
localStorage to store color scheme value.
It is not possible to get color scheme value on the server side – the value
will always fallback to
light during SSR.
To get color scheme value outside of component, create an utility function
that will parse color scheme value from
Then use it in any place of your application:
Note that this approach will not work on the server side.
Using the approaches described above to get color scheme value is not compatible with SSR. For example, if you want to conditionally render some elements based on color scheme value, you will get hydration mismatch or other error:
render both elements and hide them with styles based on color scheme value
data-mantine-color-scheme attribute. All Mantine components have
darkHidden props that hide element based on color scheme value.
You can also use light/dark mixins
light-dark function from postcss-preset-mantine
to hide elements based on color scheme value.