mantinedev / ui.mantine.dev

Mantine UI website and components
https://ui.mantine.dev
MIT License
2.84k stars 314 forks source link

`autoContrast` does not work with dark/light `primaryShade` #100

Closed gillesdandrea closed 1 month ago

gillesdandrea commented 1 month ago

Hello, I'm trying to build a theme with a different shade for light and dark and autoContrast does not work properly to adjust the color of text on buttons.

export const theme = createTheme({
  white: '#ffffff',
  black: '#242424',
  primaryColor: 'blue',
  primaryShade: {
    dark: 9,
    light: 1,
  },
  autoContrast: true,
  luminanceThreshold: 0.3,
});

In dark and light mode, text is always black. I would expect a white text in dark mode. Because if I change primaryShade: 9 the text is white and with primaryShade: 1, text is black as expected.

For the record, the theme I would like to use is something like that:

export const theme = createTheme({
  white: '#ffffff',
  black: '#242424',
  primaryColor: 'primary',
  primaryShade: {
    dark: 4,
    light: 7,
  },
  autoContrast: true,
  luminanceThreshold: 0.3,
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'yellow',
      light: 'blue',
    }),
  },
});
gillesdandrea commented 1 month ago

Moved to the right place: https://github.com/mantinedev/mantine/issues/6589