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

The color prop in all components uses Mantine CSS variables to resolve the color value depending on the color scheme. You can define these variables with the 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>
  );
}