Using Different Shades of the Palette in virtualColor for Dark and Light Themes

[booandrew]

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 

Originally posted by @Raalzz in #6834

[rtivital]

virtualColor light and dark properties can only be keys of theme.colors. To change primary shade depending on color scheme, see https://mantine.dev/theming/colors/#primaryshade