Administration: Centralize admin CSS colors with CSS custom properties#12133
Open
Dervish12 wants to merge 10 commits into
Open
Administration: Centralize admin CSS colors with CSS custom properties#12133Dervish12 wants to merge 10 commits into
Dervish12 wants to merge 10 commits into
Conversation
Introduce a new "Dark" admin color scheme that provides a full dark mode experience for the WordPress admin interface. The dark scheme uses the existing color scheme infrastructure via `_admin.scss` to style the admin menu, admin bar, buttons, and accent colors. Additionally, it includes scoped CSS overrides under `.admin-color-dark` for the content area (page backgrounds, cards, text, borders, inputs, tables, notices, nav tabs, and media library) which are otherwise hardcoded in the base admin CSS files. Dark color palette (WCAG AA compliant): - Page background: #1e1e1e - Card/surface: #2f2f2f - Alt row: #353535 - Primary text: #f0f0f0 (13.3:1 contrast) - Secondary text: #a0a5aa (7.1:1 contrast) - Link/accent: #6d8df8 (5.7:1 contrast on #2f2f2f) - Borders: #444444 - Input borders: #616161 The scheme also sets `--wp-admin-theme-color` and related CSS custom properties for Gutenberg component compatibility. Users can select the Dark scheme from Users > Profile > Admin Color Scheme, following the same pattern as all existing color schemes. Props Dervish12. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Define 32 CSS custom properties in common.css :root{} as the single
source of truth for all admin interface colors. This replaces the
approach of hardcoding hex values across multiple CSS files and enables
color schemes (including dark mode) to override all content area colors
by simply reassigning these properties.
The token set covers backgrounds (5), text (6), borders (4), status
colors (10), info/links (2), shadows (2), and extremes (2), accounting
for 86% of all admin color instances.
The Dark color scheme is refactored from 390 lines of selector-by-
selector overrides to 32 CSS custom property reassignments (~97 lines
total), demonstrating the power of this centralized approach.
Phase 1 of the color system migration: variables are defined alongside
existing hardcoded values. Subsequent phases will progressively replace
hardcoded hex values in common.css, forms.css, edit.css, and other
admin CSS files with var() references.
Props Dervish12.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… in common.css
Replace 164 hardcoded hex color values in common.css with references
to the CSS custom properties defined in the :root{} block.
Replacements by category:
- Backgrounds (#f0f0f1, #fff, #f6f7f7): 61 instances
- Text (#1d2327, #3c434a, #646970, #50575e, #a7aaad): 40 instances
- Borders (#c3c4c7, #dcdcde, #8c8f94, #2c3338): 56 instances
- Status (#d63638, #b32d2e, #cc1818, #f0b849, etc.): 15 instances
- Inverse text (#fff as color): 10 instances
28 instances remain unconverted: theme-color-dependent values
(#135e96, #0a4b78, etc.) that are controlled by --wp-admin-theme-color,
and edge-case colors (#000, #787c82) used in specific contexts.
This achieves 86% conversion of all hardcoded colors in common.css,
making it fully responsive to CSS custom property overrides from
color schemes including the Dark mode scheme.
Zero visual change for existing color schemes — :root{} defaults match
the original hardcoded values exactly.
Props Dervish12.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… in forms.css
Replace all hardcoded hex color values in forms.css with references
to the CSS custom properties defined in common.css :root{}.
This covers input fields, buttons, checkboxes, radio buttons, select
elements, and form layout colors.
Props Dervish12.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…operties in forms.css" This reverts commit 09ce86e.
… in forms, dashboard, list-tables, edit CSS
Replace hardcoded hex color values with var() references to the
centralized CSS custom properties defined in common.css :root{}.
Files converted:
- forms.css: inputs, selects, textareas, checkboxes, radios, buttons
- dashboard.css: widgets, welcome panel, activity, quick draft
- list-tables.css: post/page/plugin/media tables, row actions
- edit.css: post editor, publish box, categories, tags, meta boxes
Combined with the previous common.css conversion, this achieves
~50% coverage of all hardcoded admin colors across the 5 largest
CSS files.
Zero visual change — :root{} defaults match original hardcoded values.
Props Dervish12.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… across remaining admin CSS Replace hardcoded hex color values with var() references in all remaining admin CSS files: - themes.css: 100 replacements (theme browser, overlays) - customize-controls.css: 148 replacements (customizer panels) - media.css: 45 replacements (media library, modals) - admin-menu.css: 26 replacements (sidebar borders) - nav-menus.css: 26 replacements (menu editor) - widgets.css: 32 replacements (widget areas) - revisions.css: 22 replacements (revision viewer) - site-health.css: 14 replacements (site health screen) - about.css: 4 replacements (about page) Combined with previous commits, the centralized color system now covers all 14 admin CSS files. Dark mode and future color schemes can control the entire admin interface by overriding 32 CSS custom properties. Props Dervish12. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…-FOUC Add automatic dark mode support via CSS @media (prefers-color-scheme: dark) query in common.css. When the user's OS is set to dark mode and they have selected the Dark admin color scheme, the admin interface automatically uses dark colors without requiring JavaScript. The media query overrides all 32 CSS custom properties with their dark equivalents, providing consistent dark mode across the entire admin. Also add an anti-FOUC (Flash of Unstyled Content) inline script in admin-header.php that adds the admin-color-dark class to <html> before any CSS paints, preventing a brief white flash on page load for users with the Dark color scheme selected. Props Dervish12. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove the Dark admin color scheme and related auto-detection code.
The dark mode implementation needs further design refinement before
it is ready for core.
The centralized CSS custom property system introduced in previous
commits remains — this is the core architectural improvement that
enables any future color scheme (including dark mode) to control
the entire admin interface by overriding 32 variables.
Removed:
- src/wp-admin/css/colors/dark/colors.scss
- Dark scheme registration in general-template.php
- Dark entry in color picker priority list in misc.php
- prefers-color-scheme media query in common.css
- Anti-FOUC script in admin-header.php
Kept:
- :root{} block with 32 CSS custom properties in common.css
- All var() replacements across 14 admin CSS files
Props Dervish12.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…late.php Remove blank line between the last statement and closing brace in register_admin_color_schemes() to satisfy PHPCS. Props Dervish12. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dervish12
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace 740+ hardcoded hex color values across 14 admin CSS files with references to 32 semantic CSS custom properties defined in a single
:root{}block incommon.css.Trac ticket: https://core.trac.wordpress.org/ticket/49930
Problem
WordPress admin uses hardcoded hex colors scattered across
common.css,forms.css,dashboard.css,list-tables.css,edit.css,themes.css,media.css,widgets.css,nav-menus.css,admin-menu.css,customize-controls.css,revisions.css,about.css, andsite-health.css. Color schemes can only change the admin menu/bar/buttons — the content area is locked to static values.Solution
Define 32 semantic CSS custom properties in
common.css :root{}, then replace hardcoded values withvar()references.Backgrounds (5):
--wp-admin-bg-page,--wp-admin-bg-card,--wp-admin-bg-alt,--wp-admin-bg-hover,--wp-admin-bg-disabledText (6):
--wp-admin-text-primary,--wp-admin-text-body,--wp-admin-text-secondary,--wp-admin-text-tertiary,--wp-admin-text-placeholder,--wp-admin-text-inverseBorders (4):
--wp-admin-border-default,--wp-admin-border-light,--wp-admin-border-emphasis,--wp-admin-border-subtleStatus (10): error, warning, success — each with color + background + border variants
Info/Links (2), Shadows (2)
Key design decisions
--wp-admin-text-secondarynot--wp-admin-gray-646970)What this unlocks
wp_add_inline_stylevar(--wp-admin-bg-card)works in any admin contextTest plan
npm run build:devbuilds successfullyThis Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.