Toolbar color schemes on front end without global variable by sabernhardt · Pull Request #11354 · WordPress/wordpress-develop

sabernhardt · 2026-03-25T22:03:18Z

Alternative option to #11267 that uses the same Sass and built stylesheets but avoids using the $_wp_admin_css_colors global variable.

Reverts the unit test to its original code.
Does not enqueue a stylesheet for the Fresh color scheme.
Enqueues an external stylesheet for the other 8 core schemes on the front end.
Does not attempt to support plugins' color schemes on the front.

Trac 64762

Use of AI Tools

@johnbillion shared these details:

Claude Code was used to initialise the separate admin bar color Sass files for each colour scheme. Worked ok-ish, I subsequently manually adjusted a lot of it.

This 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.

…chemes that uses the extracted admin toolbar styles.

Note to self: Do not attempt this at 3AM.

github-actions · 2026-03-25T22:03:31Z

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 props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props johnbillion, sabernhardt, westonruter, wildworks, softglaze, fushar.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-03-25T22:07:51Z

Test using WordPress Playground

The 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

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

westonruter · 2026-04-30T21:44:12Z

+	if ( ! $admin_bar_url ) {
+		return;
 	}


Is this here in case someone filters admin_url to return an empty string for some reason?

westonruter · 2026-04-30T21:47:07Z

-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
-	color: variables.$adminbar-recovery-exit-text;
-	background-color: variables.$adminbar-recovery-exit-background-alt;
-}


The recovery mode CSS is removed here but isn't added to src/wp-admin/css/colors/_admin-bar.scss. Is that intentional?

(Props Claude.)

westonruter · 2026-04-30T21:53:26Z


-	global $_wp_admin_css_colors;
+	$color_scheme = get_user_option( 'admin_color' );
+	$core_list    = array( 'modern', 'light', 'blue', 'coffee', 'ectoplasm', 'midnight', 'ocean', 'sunrise' );


Suggested change

$core_list = array( 'modern', 'light', 'blue', 'coffee', 'ectoplasm', 'midnight', 'ocean', 'sunrise' );

/** Refer to {@see register_admin_color_schemes()} for this list, omitting 'fresh'. */

$core_list = array( 'modern', 'light', 'blue', 'coffee', 'ectoplasm', 'midnight', 'ocean', 'sunrise' );

westonruter · 2026-04-30T21:55:18Z

@@ -0,0 +1,140 @@
+@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;


According to Claude, this list is overly broad. It can be reduced to be more truthful about what is being used.

Suggested change

@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;

@forward 'variables' show $base-color, $icon-color, $highlight-color, $text-color, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background;

(Props Claude.)

westonruter · 2026-04-30T21:57:52Z

-		if ( is_admin() ) {
-			$this->assertFalse( wp_style_loader_src( '', 'colors' ) );
-		} else {
-			$this->assertStringContainsString( '/colors.css', wp_style_loader_src( '', 'colors' ) );
-		}
+		$this->assertFalse( wp_style_loader_src( '', 'colors' ) );


Ideally there'd be two tests, one which sets the global state so that is_admin() returns true and another test where is_admin() is false. This would ensure the code in wp_admin_bar_add_color_scheme_to_front_end() is actually tested.

t-hamano · 2026-05-07T07:04:32Z

+#wpadminbar.mobile .quicklinks .ab-icon:before,
+#wpadminbar.mobile .quicklinks .ab-item:before {
+	color: variables.$menu-submenu-focus-text;
+}
+
+#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
+#wpadminbar.mobile .quicklinks .hover .ab-item:before {
+	color: variables.$menu-icon;
+}


Suggested change

#wpadminbar.mobile .quicklinks .ab-icon:before,

#wpadminbar.mobile .quicklinks .ab-item:before {

color: variables.$menu-submenu-focus-text;

}

#wpadminbar.mobile .quicklinks .hover .ab-icon:before,

#wpadminbar.mobile .quicklinks .hover .ab-item:before {

color: variables.$menu-icon;

}

#wpadminbar.mobile .quicklinks .hover .ab-icon:before,

#wpadminbar.mobile .quicklinks .hover .ab-item:before {

color: variables.$menu-submenu-focus-text;

}

#wpadminbar.mobile .quicklinks .ab-icon:before,

#wpadminbar.mobile .quicklinks .ab-item:before {

color: variables.$menu-icon;

}

See #11665

softglazee · 2026-08-03T15:37:57Z

I have tested this branch locally at commit 794875760a. Here is the detailed breakdown of the behavior:

Core Schemes: Modern, Light, Blue, Coffee, Ectoplasm, Midnight, Ocean, and Sunrise all correctly enqueue their respective colors/{scheme}/admin-bar.css on the front end. Fresh enqueues no stylesheet, as expected.
Production Path (SCRIPT_DEBUG off): The Grunt task successfully builds both variants. When SCRIPT_DEBUG is false, the source correctly requests admin-bar.min.css, which returns a 200 OK (4.2 kB transferred).
Plugin Schemes (Fallback Behavior): I tested this against the "Grey Admin Color Schemes" plugin. For plugin-registered schemes, no stylesheet is enqueued on the front end, and the toolbar safely falls back to the default dark style without any breakage. Core schemes remain unaffected and continue to work while the plugin is active.
Site Editor: The function correctly returns early on is_admin(), so the stylesheet is not loaded in site-editor.php.

Full test report and screenshots have been posted on Trac #64762.

fushar · 2026-09-24T14:20:29Z

Let's get this to the finish line for 7.2! @sabernhardt, would you like to continue working on this? I have spare bandwidth to help if not.

t-hamano · 2026-09-25T12:05:38Z

@fushar, if you have the bandwidth, please feel free to go ahead with this. We only have a month left until 7.2 Beta 1, which might seem like a long time, but it really isn't much time at all 😄

fushar · 2026-09-29T07:51:46Z

Since I can't push to the fork, I opened a new PR instead. Rebased and continued the improvements here: #13806

t-hamano · 2026-09-29T11:45:44Z

Closing this in favor of #13806

johnbillion and others added 11 commits March 16, 2026 16:52

Extract the admin bar styles into a mixin.

3700f88

Introduce a separate admin_bar_url property for registered colour s…

8a7542d

…chemes that uses the extracted admin toolbar styles.

Merge branch 'WordPress:trunk' into toolbar-sass-front-end

ab9a3f1

revert unit test

4eeb0b7

Simplify admin-bar.php function

ba355f0

Revert changes to wp_admin_css_color()

f225767

Check array properly

b0682e7

Note to self: Do not attempt this at 3AM.

more consistent

b97f202

Remove default false argument for version

a005035

Assign list of core color schemes to a variable for readability

fa065da

Merge branch 'WordPress:trunk' into toolbar-sass-front-end

10eda66

Merge branch 'WordPress:trunk' into toolbar-sass-front-end

7948757

westonruter reviewed Apr 30, 2026

View reviewed changes

t-hamano reviewed May 7, 2026

View reviewed changes

pento force-pushed the trunk branch from 3af2d27 to 64ede28 Compare July 6, 2026 03:10

johnbillion mentioned this pull request Aug 3, 2026

#64762 Use sass to generate admin toolbar colours #11267

Open

fushar mentioned this pull request Sep 29, 2026

Admin bar: apply the color scheme in the frontend #13806

Open

t-hamano closed this Sep 29, 2026

		@@ -0,0 +1,140 @@
		@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;

Conversation

sabernhardt commented Mar 25, 2026

Use of AI Tools

Uh oh!

github-actions Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

westonruter Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano May 7, 2026

Choose a reason for hiding this comment

Uh oh!

softglazee commented Aug 3, 2026

Uh oh!

fushar commented Sep 24, 2026

Uh oh!

t-hamano commented Sep 25, 2026

Uh oh!

fushar commented Sep 29, 2026

Uh oh!

t-hamano commented Sep 29, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

github-actions Bot commented Mar 25, 2026 •

edited

Loading

westonruter Apr 30, 2026 •

edited

Loading

westonruter Apr 30, 2026 •

edited

Loading