Skip to content

[@mantine/core] MantineProvider: Restore dark mode light-color to match v8#9055

Open
h-harsh wants to merge 1 commit into
mantinedev:masterfrom
h-harsh:fix/dark-mode-light-color
Open

[@mantine/core] MantineProvider: Restore dark mode light-color to match v8#9055
h-harsh wants to merge 1 commit into
mantinedev:masterfrom
h-harsh:fix/dark-mode-light-color

Conversation

@h-harsh

@h-harsh h-harsh commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Closes #8895

In dark mode, --mantine-color-{color}-light-color resolved to shade 0 (near-white), so the light, subtle, and transparent variants lost their color identity and rendered near-white text/icons. In v8 it resolved to shade[primaryShade - 5] (a visible tint of the color) — this is the v8→v9 regression reported in the issue (e.g. an orange subtle ActionIcon rendered white in dark mode).

Root cause

The shared text color was flattened to shade 0 as an unintended side effect of 2cdebb6, whose actual goal was to make the -light backgrounds solid instead of translucent:

- [`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-${Math.max(primaryShade - 5, 0)})`,
+ [`--mantine-color-${name}-light-color`]: `var(--mantine-color-${name}-0)`,

--mantine-color-{color}-light-color is the text/icon color shared by the light, subtle, and transparent variants, so this affected all three.

Fix

Restore the v8 value (shade[max(primaryShade - 5, 0)], i.e. shade 3 for the default dark primaryShade of 8) while keeping the solid, no-transparency backgrounds from the original commit:

  • subtle / transparent — transparent background, so text now sits on the app background with its color restored (matches v8).
  • light — background is darken(shade9, 0.5) (very dark), so shade-3 colored text still contrasts well while regaining color identity.

Changes

  • Resolve dark-mode -light-color to shade[max(primaryShade - 5, 0)] in get-css-color-variables.ts.
  • Regenerate default-css-variables.css and update the resolver snapshot — the only diff is the 14 default dark -light-color values changing 0 → 3.

Note for maintainers

This changes the appearance of light / subtle / transparent variants in dark mode for everyone, so it's worth a design check. I went with exact v8 parity since that's what the issue asks; happy to target a different shade (e.g. aligning with outline's shade[primaryShade - 4]) if you'd prefer.

Verification

  • MantineProvider tests: 69 passing (snapshot updated)
  • tsc --noEmit clean, oxlint clean, stylelint clean, formatted
  • @mantine/core builds (incl. .d.ts generation)

…ch v8

Closes mantinedev#8895

In dark mode the `--mantine-color-{color}-light-color` variable resolved
to shade `0` (near-white), so the `light`, `subtle`, and `transparent`
variants lost their color identity and rendered near-white text/icons —
a regression from v8, where it resolved to `shade[primaryShade - 5]`
(a visible tint of the color).

This was an unintended side effect of 2cdebb6, whose goal was to
make the `-light` backgrounds solid instead of translucent. That refactor
also flattened the shared text color to shade 0. This restores the v8
value for the text color while keeping the solid (no-transparency)
backgrounds. The `light` variant's background is `darken(shade9, 0.5)`
(very dark), so a shade-3 colored text still contrasts well, and the
subtle/transparent variants regain their color on the app background.

- Resolve dark `-light-color` to `shade[max(primaryShade - 5, 0)]`.
- Regenerate default-css-variables.css and update the resolver snapshot.
@h-harsh
h-harsh force-pushed the fix/dark-mode-light-color branch from 4ff22d9 to 5752eb7 Compare July 12, 2026 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Subtle and transparent colors do not match version 8

1 participant