Skip to content

Resolve a theme token under dark: to its dark value - #350

Open
sadiqk2 wants to merge 1 commit into
NativePHP:mainfrom
sadiqk2:fix/dark-variant-theme-token
Open

Resolve a theme token under dark: to its dark value#350
sadiqk2 wants to merge 1 commit into
NativePHP:mainfrom
sadiqk2:fix/dark-variant-theme-token

Conversation

@sadiqk2

@sadiqk2 sadiqk2 commented Aug 17, 2026

Copy link
Copy Markdown

The bug

dark:bg-theme-surface renders the light colour in dark mode.

A theme token resolves its own dark companion, so bg-theme-surface already returns ['bg' => light, 'dark' => ['bg' => dark]]. The dark: prefix then wrapped that entire result in a second dark layer:

TailwindParser::parse('dark:bg-theme-primary');
// was  ['dark' => ['bg' => '#FF6B00', 'dark' => ['bg' => '#FFA85C']]]
// now  ['dark' => ['bg' => '#FFA85C']]

parse() merges one dark level, so the buried companion is never lifted: the light hex ends up in the dark slot, and the nested dark key travels to the renderers as a prop they know nothing about.

The fix

Asking for a theme token under dark: can only mean that token's dark-mode form, so the companion is promoted instead of nested. A token whose resolver answers light-only keeps its single colour — the only sensible reading of the request, and the same thing the unprefixed form does.

The unprefixed path is untouched.

Verification

  • Three tests added to tests/Unit/Edge/ThemeClassTokensTest.php: the dark-companion case, the light-only case, and the unprefixed shape staying exactly as it was.
  • The first fails against main and passes with this change.
  • vendor/bin/pest tests/Unit/Edge/: 276 passed. Full-suite failures match main's baseline (Android splash-screen and release-build tests, unrelated).
  • vendor/bin/pint --test clean on both touched files.

`dark:bg-theme-surface` rendered the LIGHT colour in dark mode.

A theme token resolves its own dark companion, so the value returned for
`bg-theme-surface` already looks like `['bg' => light, 'dark' => ['bg' => dark]]`.
The `dark:` prefix then wrapped that whole thing in another `dark` layer:

    dark:bg-theme-surface
      was  ['dark' => ['bg' => '#FFF', 'dark' => ['bg' => '#000']]]
      now  ['dark' => ['bg' => '#000']]

parse() merges one `dark` level, so the buried companion was never lifted and the
light hex sat in the dark slot — while the nested key travelled to the renderers
as an unknown prop.

Asking for a theme token under `dark:` can only mean that token's dark-mode form,
so the companion is promoted rather than nested. A token with no dark companion
keeps its single colour, which is the only sensible reading of the request.
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.

1 participant