Why I see color scheme flickering on page load?

How Mantine applies color scheme

Mantine color scheme is defined by data-mantine-color-scheme="{value}" attribute on the :root element (usually html). This attribute is used by all components to assign color scheme specific styles.

Usually, you do not need to set data-mantine-color-scheme attribute manually, it is added by ColorSchemeScript (before hydration) and MantineProvider (after the app has been mounted) components automatically.

Flash of inaccurate color scheme

Flash of inaccurate color scheme (FART) happens when the color scheme selected by the user is different from the color scheme value with which the application has been initialized. FART can occur only in applications with server-side rendering (SSR) or static site generation (SSG).

In most case, FART is caused by incorrect usage of ColorSchemeScript component. For example, a common issue is a mismatch of defaultColorScheme values defined on ColorSchemeScript and MantineProvider:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';

// ❌ Incorrect usage – defaultColorScheme values do not match,
// this will cause color scheme flickering
function IncorrectDemo() {
  return (
    <>
      <ColorSchemeScript defaultColorScheme="light" />
      <MantineProvider defaultColorScheme="auto">
        {/* Your app here */}
      </MantineProvider>
    </>
  );
}

// ✅ Correct usage – defaultColorScheme values match, no FART
function CorrectDemo() {
  return (
    <>
      <ColorSchemeScript defaultColorScheme="light" />
      <MantineProvider defaultColorScheme="light">
        {/* Your app here */}
      </MantineProvider>
    </>
  );
}