Add 'auto' color scheme support

[USER-5]

Usage example, including component/hook API

I've noticed some of the limitations of the dark theme and SSR (including those on the docs page).

Currently, I'm using the useColorScheme provider, but that causes a mismatch between server and client, and means that the first page the user load into isn't themed correctly.

const preferredColorScheme = useColorScheme();
return
  <MantineProvider theme={{ colorScheme: preferredColorScheme }}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </MantineProvider>

I'm using tailwind for other styling, which has a convenient mode= 'media' setting, which I think would fit well with mantine.

Possible implementation – describe how the feature can be implemented

Inspecting the elements shows that there's a change in classes between dark and light themes (e.g. on my inputs, mantine-1uxyx4n versus mantine-us7vc8), which get swapped out programmatically.

I'm thinking an option to have the dark class always attached, but with a media qeury.

As a user, having

<MantineProvider theme={{
  colorScheme: "media"
}}>

would be neat.

Do you want to contribute this feature and create a pull request

No response

[rtivital]

How this mode is supposed to work during ssr?

[USER-5]

Ideally, sending both styles, and leaving CSS to do the media query:

.mantine-1uxyx4n {
  // light-mode style
}
@media (prefers-color-scheme: dark) {
  .mantine-u1xyx4n {
    //overriding dark-mode styles
  }
}

Effectively, the server would no longer have to worry about the user's preference.

[rtivital]

That, may work, I'll give it a try. It's a huge feature though, so do not expect it any time soon.

[USER-5]

I found a way to hack the first page's colour scheme, for anyone visiting this:

import { MantineProvider } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { useColorScheme, useMediaQuery } from "@mantine/hooks";
import Layout from "components/layout";
import { AppProps } from "next/app";
import Head from "next/head";
import { useEffect, useState } from "react";
import "styles/globals.css";

export default function MyApp({ Component, pageProps }: AppProps) {
  // Big hack to make it work for now
  let [dark, setDark] = useState(false);

  const preferredColorScheme = useMediaQuery("(prefers-color-scheme: dark)");

  useEffect(() => {
    setDark(preferredColorScheme);
  }, [preferredColorScheme]);
  // Causes FART, but better than nothing :/

  return (
    <MantineProvider
      theme={{ colorScheme: dark ? "dark" : "light" }}
    >
      <NotificationsProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </NotificationsProvider>
    </MantineProvider>
  );
}

As indicated in the comments, it causes FART, but since I'm using tailwind (with media queries) to do the background & text colour, it's not too harsh on users.

[filecc]

Hey, you just saved my life, but I think I've reached a new point:

I've an app that's wrapped around a by Auth0, so:

import { UserProvider } from '@auth0/nextjs-auth0';
import { useEffect, useState } from 'react';
import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
import Head from 'next/head';
import { useColorScheme, useMediaQuery } from '@mantine/hooks';


type AppProps = {
  Component: any;
  pageProps: any;
};


export default function App({ Component, pageProps } : AppProps) {
	const { user } = pageProps;

	const [dark, setDark] = useState(false);
	const preferredColorScheme = useMediaQuery('(prefers-color-scheme: dark)');
	const [colorScheme, setColorScheme] = useState<ColorScheme>('dark' || 'light');

	useEffect(() => {
		setDark(preferredColorScheme);
		if (preferredColorScheme) {
			setColorScheme('dark');
		} else {
			setColorScheme('light');
		}
	}, [preferredColorScheme]);

	const toggleColorScheme = (value?: ColorScheme) =>
		setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
	return (
		<>
			<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
				<Head> /* head */ </Head>
				<MantineProvider  theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
					<UserProvider user={user}>
						<Component {...pageProps} />
					</UserProvider>
				</MantineProvider>
			</ColorSchemeProvider>
		</>);
}

No FART, for me.
Did I code right?

Bye and thank you.

[actualcactuar]

[rtivital]

It will not work with server side rendering

[actualcactuar]

It's true that color preference cannot be resolved on server-side, but this code works also atleast when using the mantine-next.js template even if the colorScheme is resolved on client-side. But I understand that even that makes this a no-go solution

[actualcactuar]

Deleted the comment, It was useless as mantine already has the useColorScheme hook that does most of suggested stuff anyway. Apologies for being lazy reader 🙈

[sovetski]

any update please?

[rtivital]

https://mantine.dev/theming/color-schemes/#auto-color-scheme

[sovetski]

it does not support SSR..