Skip to content

[6.x] Make more colors themeable#14013

Merged
jasonvarga merged 3 commits into6.xfrom
make-more-colors-themeable
Feb 23, 2026
Merged

[6.x] Make more colors themeable#14013
jasonvarga merged 3 commits into6.xfrom
make-more-colors-themeable

Conversation

@jaygeorge
Copy link
Contributor

Description of the Problem

  • There were some "dark" colors in ui.css that were marked as temporary.
    • These color vars were initially added in March 2025 when we upgraded to Tailwind 4.
  • Since then we've added a color system that scales different gray values, which are in turn mapped to a theme system.
  • These legacy -dark- colors were scattered throughout the CP markup and are technically un-themeable, as per Some colors cannot be themed yet #13994

What this PR Does

  • Replaces white with a themeable color for dark mode text
    • dark:text-white becomes dark:text-gray-50; which is almost identical but it's now a theme color
  • Re-maps the temporary dark vars to the new gray, making them themeable. The values are not exactly the same but they are very very close (see the table below)
    • Gray values use the default theme (Zinc). If the CP uses a different gray palette (e.g. Stone), then shades should sync up.
  • Fixes Some colors cannot be themed yet #13994

Here is how the old vars are mapped to the new gray vars

dark-* → gray-* replacement swatches

Left: original --color-dark-* hex. Right: replacement --color-gray-* (theme Zinc).

Old (dark-*) New (gray-*)
dark-100 #dfe1e5gray-200 #d4d4d8
dark-150 #bbbdc0gray-300 #a1a1aa
dark-175 #93979agray-400 #71717a
dark-200 #5f6163gray-500 #52525b
dark-250 #555759gray-500 #52525b
dark-275 #515356gray-600 #3f3f46
dark-300 #4e5157gray-600 #3f3f46
dark-350 #43454agray-600 #3f3f46
dark-400 #414245gray-600 #3f3f46
dark-500 #404143gray-600 #3f3f46
dark-550 #3b3f41gray-700 #27272a
dark-575 #393b40gray-700 #27272a
dark-600 #2b2d30gray-700 #27272a
dark-650 #242628gray-800 #18181b
dark-700 #212223gray-800 #18181b
dark-750 #22242agray-800 #18181b
dark-800 #1e1f22gray-850 #161618
dark-900 #171717gray-900 #0f0f10
dark-950 #161616gray-925 #121214
dark-975 #131314gray-950 #0a0a0b

How to Reproduce

  1. Browse various components that used to use the -dark- color system. Check the "files changed" in this commit to find those.

@jasonvarga jasonvarga merged commit 38d0317 into 6.x Feb 23, 2026
12 checks passed
@jasonvarga jasonvarga deleted the make-more-colors-themeable branch February 23, 2026 20:21
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.

Some colors cannot be themed yet

2 participants