How can I get current color scheme value in JavaScript?

Get color scheme value in component

To get color scheme value in component use useMantineColorScheme hook:

import { useMantineColorScheme } from '@mantine/core';

function Demo() {
  // colorScheme is `'dark' | 'light' | 'auto'`
  const { colorScheme } = useMantineColorScheme();
}

If you want to get computed color scheme, use useComputedColorScheme hook instead. It will resolve auto value to dark or light based on user preferences:

import { useComputedColorScheme } from '@mantine/core';

function Demo() {
  // colorScheme is `'dark' | 'light'`
  const colorScheme = useComputedColorScheme();
}

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.

Get color scheme value outside of component

To get color scheme value outside of component, create an utility function that will parse color scheme value from data-mantine-color-scheme attribute:

import { MantineColorScheme } from '@mantine/core';

export function getColorScheme() {
  return document.documentElement.getAttribute(
    'data-mantine-color-scheme'
  ) as MantineColorScheme;
}

Then use it in any place of your application:

import { getColorScheme } from './getColorScheme';

const colorScheme = getColorScheme();

Note that this approach will not work on the server side.

I want to hide/show some elements based on color scheme value

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:

import { useComputedColorScheme } from '@mantine/core';
import { getColorScheme } from './getColorScheme';

// ❌ Not compatible with SSR
function Demo() {
  const colorScheme = useComputedColorScheme();

  return (
    <div>
      {colorScheme === 'dark' && <div>Dark mode</div>}
      {getColorScheme() === 'light' && <div>Light mode</div>}
    </div>
  );
}

Instead of relying on JavaScript code to hide/show elements, render both elements and hide them with styles based on color scheme value using data-mantine-color-scheme attribute. All Mantine components have lightHidden and darkHidden props that hide element based on color scheme value. You can also use light/dark mixins or light-dark function from postcss-preset-mantine to hide elements based on color scheme value.

import { Button } from '@mantine/core';

function Demo() {
  return (
    <>
      <Button color="cyan" lightHidden>
        Visible in dark color scheme only
      </Button>

      <Button color="pink" darkHidden>
        Visible in light color scheme only
      </Button>
    </>
  );
}