Skip to content

Administration: Centralize admin CSS colors with CSS custom properties #12133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dervish12 wants to merge 10 commits into
base: trunk
Choose a base branch
from
Open

Administration: Centralize admin CSS colors with CSS custom properties #12133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d6832fd
Administration: Add Dark admin color scheme
Dervish12 Jun 9, 2026
fb95b8b
Administration: Introduce centralized CSS custom property color system
Dervish12 Jun 9, 2026
86492cc
Coding Standards: Replace hardcoded colors with CSS custom properties…
Dervish12 Jun 9, 2026
09ce86e
Coding Standards: Replace hardcoded colors with CSS custom properties…
Dervish12 Jun 9, 2026
080fc38
Revert "Coding Standards: Replace hardcoded colors with CSS custom pr…
Dervish12 Jun 9, 2026
8a638ee
Coding Standards: Replace hardcoded colors with CSS custom properties…
Dervish12 Jun 9, 2026
358f823
Coding Standards: Replace hardcoded colors with CSS custom properties…
Dervish12 Jun 9, 2026
daab301
Administration: Add prefers-color-scheme dark auto-detection and anti…
Dervish12 Jun 9, 2026
600572b
Remove Dark color scheme, keep centralized CSS custom property system
Dervish12 Jun 9, 2026
6be69e0
Coding Standards: Fix blank line before closing brace in general-temp…
Dervish12 Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/wp-admin/css/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
--accent-gradient: linear-gradient(90deg, #000000 4.7%, var(--accent-1) 83.84%)/*rtl:linear-gradient(-90deg, #000000 4.7%, var(--accent-1) 83.84%)*/;

/* Navigation colors. */
--nav-background: #fff;
--nav-background: var(--wp-admin-bg-card);
--nav-border: transparent;
--nav-color: var(--text);
--nav-current: var(--accent-1);
Expand All @@ -56,15 +56,15 @@
.freedoms-php,
.privacy-php,
.contribute-php {
background: #fff;
background: var(--wp-admin-bg-card);
}

.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent,
.contribute-php #wpcontent {
background: #fff;
background: var(--wp-admin-bg-card);
padding: 0 24px;
}

Expand Down Expand Up @@ -993,7 +993,7 @@
background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
background-position: center 25px;
background-size: 80px 80px;
color: #fff;
color: var(--wp-admin-text-inverse);
font-size: 14px;
text-align: center;
font-weight: 600;
Expand Down
52 changes: 26 additions & 26 deletions src/wp-admin/css/admin-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
#adminmenu,
#adminmenu .wp-submenu {
width: 160px;
background-color: #1d2327;
background-color: var(--wp-admin-text-primary);
}

#adminmenuback {
Expand Down Expand Up @@ -83,11 +83,11 @@
display: block;
line-height: 1.3;
padding: 2px 5px;
color: #f0f0f1;
color: var(--wp-admin-bg-page);
}

#adminmenu .wp-submenu a {
color: #c3c4c7;
color: var(--wp-admin-border-default);
color: rgba(240, 246, 252, 0.7);
font-size: 13px;
line-height: 1.4;
Expand All @@ -104,7 +104,7 @@
#adminmenu li.menu-top > a:focus,
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
color: #72aee6;
color: var(--wp-admin-status-info);
}

#adminmenu a:hover,
Expand All @@ -130,7 +130,7 @@
word-wrap: break-word;
padding: 6px 0;
z-index: 9999;
background-color: #2c3338;
background-color: var(--wp-admin-border-emphasis);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

Expand Down Expand Up @@ -169,8 +169,8 @@
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
position: relative;
background-color: #1d2327;
color: #72aee6;
background-color: var(--wp-admin-text-primary);
color: var(--wp-admin-status-info);
}

.folded #adminmenu li.menu-top:hover,
Expand All @@ -182,8 +182,8 @@
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background: #2271b1;
color: #fff;
background: var(--wp-admin-status-info-dark);
color: var(--wp-admin-text-inverse);
}

.folded #adminmenu .wp-submenu.sub-open,
Expand Down Expand Up @@ -217,7 +217,7 @@
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu .wp-submenu li.current a:focus {
color: #fff;
color: var(--wp-admin-text-inverse);
}

#adminmenu .wp-not-current-submenu li > a,
Expand Down Expand Up @@ -289,14 +289,14 @@
}

div.wp-menu-image:before {
color: #a7aaad;
color: var(--wp-admin-text-placeholder);
color: rgba(240, 246, 252, 0.6);
padding: 7px 0;
transition: all .1s ease-in-out;
}

#adminmenu div.wp-menu-image:before {
color: #a7aaad;
color: var(--wp-admin-text-placeholder);
color: rgba(240, 246, 252, 0.6);
}

Expand All @@ -307,13 +307,13 @@ div.wp-menu-image:before {
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
color: #fff;
color: var(--wp-admin-text-inverse);
}

#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
color: #72aee6;
color: var(--wp-admin-status-info);
}

.folded #adminmenu div.wp-menu-image {
Expand Down Expand Up @@ -345,7 +345,7 @@ ul#adminmenu > li.current > a.current:after {
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #f0f0f1;
border-right-color: var(--wp-admin-bg-page);
top: 50%;
margin-top: -8px;
}
Expand Down Expand Up @@ -384,7 +384,7 @@ ul#adminmenu > li.current > a.current:after {

#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
border-right-color: #2c3338;
border-right-color: var(--wp-admin-border-emphasis);
}

#adminmenu li.menu-top:hover .wp-menu-image img,
Expand All @@ -407,7 +407,7 @@ ul#adminmenu > li.current > a.current:after {
}

#adminmenu .wp-submenu .wp-submenu-head {
color: #fff;
color: var(--wp-admin-text-inverse);
font-weight: 400;
font-size: 14px;
padding: 5px 4px 5px 11px;
Expand All @@ -434,8 +434,8 @@ ul#adminmenu > li.current > a.current:after {
min-width: 18px;
height: 18px;
border-radius: 9px;
background-color: #d63638;
color: #fff;
background-color: var(--wp-admin-status-error);
color: var(--wp-admin-text-inverse);
font-size: 11px;
line-height: 1.6;
text-align: center;
Expand All @@ -444,8 +444,8 @@ ul#adminmenu > li.current > a.current:after {

#adminmenu li.current a .awaiting-mod,
#adminmenu li a.wp-has-current-submenu .update-plugins {
background-color: #d63638;
color: #fff;
background-color: var(--wp-admin-status-error);
color: var(--wp-admin-text-inverse);
}

#adminmenu li span.count-0 {
Expand All @@ -462,16 +462,16 @@ ul#adminmenu > li.current > a.current:after {
position: relative;
overflow: visible;
background: none;
color: #a7aaad;
color: var(--wp-admin-text-placeholder);
cursor: pointer;
}

#collapse-button:hover {
color: #72aee6;
color: var(--wp-admin-status-info);
}

#collapse-button:focus {
color: #72aee6;
color: var(--wp-admin-status-info);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline-offset: -1px;
Expand Down Expand Up @@ -803,7 +803,7 @@ li#wp-admin-bar-menu-toggle {
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #2c3338;
background: var(--wp-admin-border-emphasis);
}

li#wp-admin-bar-menu-toggle {
Expand Down Expand Up @@ -834,7 +834,7 @@ li#wp-admin-bar-menu-toggle {
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #72aee6;
color: var(--wp-admin-status-info);
}
}

Expand Down
Loading
Loading