How can I display different elements in light and dark color schemes?

How Mantine color scheme works

Mantine color scheme is defined by data-mantine-color-scheme="value" attribute on the html element. It can be either light or dark. data-mantine-color-scheme attribute is set by ColorSchemeScript component before the application is initialized in server-side rendering frameworks like Next.js, React Router, etc. and by MantineProvider component during the first render in client-side frameworks like Vite.

Can I get color scheme value in JavaScript?

If your application does not have server-side rendering, you can get color scheme value with useMantineColorScheme hook:

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

function MyComponent() {
  const { colorScheme } = useMantineColorScheme();

  // ✅ Works in Vite and other client-side bundlers/frameworks
  // ❌ Hydration mismatch in Next.js, React Router, and other server-side rendering frameworks
  return <div>Color scheme is {colorScheme}</div>;
}

If you have server-side rendering in your application (Next.js, React Router, etc.), you should not rely on JavaScript to get color scheme value – conditional rendering based on color scheme value will produce hydration mismatch. In this case, the only option is to use styles to hide/show elements based on the color scheme value.

lightHidden and darkHidden props

All Mantine components support lightHidden and darkHidden props that allow you to hide components based on the color scheme value. These props are the most reliable way to render different elements based on the 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>
    </>
  );
}

Changing component styles based on color scheme

For custom components that do not have access to lightHidden and darkHidden props, you can use light and dark mixins from postcss-presets-mantine:

.lightHidden {
  @mixin light {
    display: none;
  }
}

.darkHidden {
  @mixin dark {
    display: none;
  }
}