Subtle and transparent colors do not match version 8

[michelleLegend]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

9.1.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Upgrading from version 8 to 9 breaks colors in dark mode. Subtle and transparent colors are now white instead of the primary color.

Version 8, color is orange - subtle:
select orange and sublte variant
https://v8.mantine.dev/core/action-icon/

Version 9, color is white - subtle:
select orange and sublte variant
https://mantine.dev/core/action-icon/

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[malinga9818]

Hi, I tried to reproduce this issue on v9.3.0 using the ActionIcon component with variant="subtle" and color="orange" in dark mode, but the colors appear to be working correctly now. It's possible this was silently fixed in a recent patch between 9.1.1 and 9.3.0. Could someone confirm if this can be closed?

[exception-producer]

This was probably an intended change, but I cannot find the change log for it

v8:

v9:

[agustinanievas16]

Hi! I investigated this issue and wanted to share what I found, along with some design questions before proposing a fix.

In v9, the CSS variable used for text/icon color in the subtle, light, and transparent variants (--mantine-color-{color}-light-color) was changed in dark mode to always resolve to shade-0 (near white), which makes the icon/text lose its color identity in dark mode entirely.

This is inconsistent with how the outline variant handles dark mode, which keeps the color clearly visible while still feeling appropriate for a dark background. The light and subtle variants in light mode also show the color clearly, so the dark mode behavior feels like an asymmetry rather than an intentional design decision.

I also have a couple questions:

1. Subtle variant in dark mode: is it intentional that the text/icon is near white in rest state? The reasoning could be that the accent color already appears in the hover background, so the rest state avoids competing with it. If this is unintentional, aligning light-color with outline (shade-4, or perhaps shade-2 for better contrast) would restore consistency between dark and light mode.

2. Transparent variant in dark mode: this case feels more clearly broken. With the current near white text, there is no visual signal of the color at all. In light mode, transparent does show colored text, so dark mode ends up being completely inconsistent with it. Aligning the text color with outline's shade (or something close to it) would restore the color identity that the variant has in light mode.

Happy to open a PR once there's clarity on the intended direction!