light/dark button based on theme value

[glossy pebble]

I'm trying to achieve a button color value that shows the button with black background and white text in light theme mode and as white background and black text in dark theme mode. Have been trying to use virtual colors and the VariantColorResolver. The latter doesn't provide access to the current theme value and when using virtual colors and "white" as a palette with all values #FFFFFF it kinda works, but the text in dark theme (where the background of the button will then be white) is also white and therefore invisible. Any ideas how to achive this effect?

[surreal knoll]

https://mantine.dev/styles/postcss-preset/#light-dark-function

[glossy pebble]

Thanks @surreal knoll . So getting it to work by only specifying the color prop on the button won't do it? Because I don't see a way to check if the particular color value is specified on the button and would therefore need a custom className ?

[surreal knoll]

No, use className to apply styles

[glossy pebble]

Thanks !