Force Mantine in React app to use only dark theme

Question

I'm working on a simple web app in React and use Mantine (v6.0.19) as my component lib. My goal is to use dark theme of MantinePrivder regardless of the theme settings in browser.

Even if I explicitly set

<MantineProvider theme={{ colorScheme: 'dark' }}>

the appearance changes when I change the browser's theme.

Does anyone know how to force Mantine to stay in dark mode, please?

Answer 1

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

function Demo() {
  return (
    <>
      <ColorSchemeScript forceColorScheme="dark" />
      <MantineProvider forceColorScheme="dark">
        <App />
      </MantineProvider>
    </>
  );
}

Documented here.
Make sure you read the limitations (main one being you lose ability to change theme dynamically).