Issue with Help Center article "Can I have different primary color for light and dark color schemes?"

[grossiello]

Link to the page where something is not right

https://help.mantine.dev/q/primary-virtual-color

What is wrong?

I am using Mantine's latest (v8.0.2) version.
I tried replicating the instructions contained in the article, but it seems the theme is not being applied.

import { createTheme, virtualColor } from '@mantine/core';

export const theme = createTheme({
  primaryColor: 'primary',
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'pink',
      light: 'cyan',
    }),
  },
});

Using this theme (and injecting it in the theme property of the MantineProvider component) the UI appears like so:

When I switch to light:

Has anyone got a similar issue so far?

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Have you imported styles for the core package like described in the getting started guide?

[mwskwong]

Just to supplement on this, it appears that virtualColor() needs to be used in a client component/file, or else the --mantine-color-primary-* vars will not be created for some reasons.

And Turbopack (the default bundler starting from Next.js 16) will not throw an error on this. Properly worth mentioning that in the doc.