How to Implement Design Tokens for Light/Dark Mode Using virtualColor with Theme Colors?

[Raalzz]

I have set of colors defined in theme Object, I want to add design tokens which will reference these colors for light and dark mode. I am trying to use virtualColor function to define different values for light and dark color schemes.

As of now virtualColor defaults to whatever the primarySade value is set for any theme.color key. Is there a way to reference different shade values for light and dark color schemes?

If this is not possible, What is the best way to implement this workflow?

// theme.ts

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

const colorPalette = {
  red: ["#FD817A", "#FDB0AC", "#FEC3C1", "#FED3D1", "#FEDAD9", "#FEE2E1", "#FEE9E8", "#FFEDEC", "#FFF6F6", "#FFFBFB"],
  grey: ["#CCCCCC", "#D4D4D4", "#E3E3E3", "#EBEBEB", "#F1F1F1", "#F3F3F3", "#F7F7F7", "#FAFAFA", "#FDFDFD", "#FFFFFF"],
  ...
  //all other colors
}

export const theme = createTheme({
  colors: {
    ...colorPalette,
    bg-brand: virtualColor({
      name: 'bg-brand',
      dark: 'red.5',
      light: 'grey.9'
    })
  },
  },
});

// page.tsx

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

export default function Home() {
  return (
    <div>
      <Button color="bg-brand">Brand Color</Button>
    </div>
  );
}

// color='bg-brand' is not showing 

[Kenzo-Wada]

I dont think you can use values like red.5 for virtualColor. value should be a key of the color like "red".

if you want to attach color like that to your component, you should use useColorScheme inside your custom component: https://mantine.dev/hooks/use-color-scheme/#usage

[Raalzz]

I understand virtualColor value should always be a key of the color object, But how to attach a particular shade so that i can just use a custom token name (Which derives its color from any of the shade from the pool of colors) and it switches accordingly with light and dark mode.

By using use-color-scheme I can just point to color object and Not my token directly.

[booandrew]

Hi! Did you solve the problem? I am stuck on this issue

[Raalzz]

No, I had posted the same query in their discord too but no reply there as well

[booandrew]

@Raalzz
I invented a small workaround:

Instead of creating a palette for a single value, for example, gray: [...], you need to create a color for an individual token using colorsTuple().

And your palette will look like this:

'orange-50': colorsTuple('#FFFEFD'),
'orange-100': colorsTuple('#FFFEFD'),
'orange-200': colorsTuple('#FFFEFD'),

'text-primary': virtualColor({
  name: 'text-primary',
  dark: 'orange-50',
  light: 'orange-100',
}),

[Raalzz]

I have a similar kind of a workflow, I think its the only way we can achieve this as of now.!

[rtivital]

See https://mantine.dev/theming/colors/#primaryshade

[booandrew]

But the necessary values for primaryShade may vary from place to place.

In other words, the problem remains that it’s impossible to set a shade for virtualColor.

[rtivital]

Virtual color cannot be used with shade. If you want to use different values for primary shade per color, either change the colors array or use Styles API to customize individual component styles.