Back to all questions

How can I change component color prop value depending on the color scheme?

Last updated

color prop in all components uses Mantine CSS variables to resolve color value depending on the color scheme. You can define these variables with virtualColor function:

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

const theme = createTheme({
  colors: {
    primary: virtualColor({ name: 'primary', light: 'blue', dark: 'red' }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <YourApp />
    </MantineProvider>
  );
}