#64762 Use sass to generate admin toolbar colours by johnbillion · Pull Request #11267 · WordPress/wordpress-develop

johnbillion · 2026-03-16T16:56:38Z

This extracts the admin toolbar styles into a mixin so a standalone admin-bar.css file can be generated for each colour scheme. Facilitates custom colour schemes registering their own admin toolbar CSS file too.

Trac ticket: https://core.trac.wordpress.org/ticket/64762

Use of AI Tools

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.

Screenshots

…chemes that uses the extracted admin toolbar styles.

github-actions · 2026-03-16T16:56:49Z

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, mukesh27, huzaifaalmesbah, sabernhardt, westonruter, audrasjb.

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

github-actions · 2026-03-16T17:04:13Z

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.

src/wp-includes/general-template.php

huzaifaalmesbah

Looks good to me

trac-64762-pr-11267.mp4

sabernhardt

✅ The Fresh scheme does not have a separate stylesheet.
✅ The other 8 Core schemes properly fetch their small, external stylesheet on the front end.
✅ Plugins such as Contextual Adminbar Color and Dark Mode Toggle continue to show their colors because they set colors without wp_admin_css_color(). The admin-bar-color-scheme-css stylesheet can be enqueued unnecessarily, but the plugins' CSS would override that.
The new Sass partial removes #wp-admin-bar-recovery-mode styles. Is that intentional?
😢 I have trouble trying to add a new stylesheet with wp_admin_css_color() in plugins such as bbPress. The front end continues to enqueue the Modern stylesheet instead of the plugin's stylesheet.

// Mint
wp_admin_css_color(
	'bbp-mint',
	esc_html_x( 'Mint', 'admin color scheme', 'bbpress' ),
	$this->styles_url . 'mint/colors' . $suffix . '.css',
	array( '#4f6d59', '#33834e', '#5FB37C', '#81c498' ),
	array( 'base' => '#f1f3f2', 'focus' => '#fff', 'current' => '#fff' ),
	$this->styles_url . 'mint/admin-bar.css' // trimmed copy of colors.css in the same directory
);

Unless I just made a silly mistake editing the plugin, the toolbar function might check the $_wp_admin_css_colors global variable too early, before the plugin modifies it. I started another PR draft—using this Sass—to investigate a way to support the core schemes without reading or changing the global variable (though I have not tested it with plugins yet). That PR also restores the unit test to its original code.

westonruter · 2026-03-23T10:40:53Z

src/wp-includes/admin-bar.php

+		array( 'admin-bar' ),
+		false


Nit: false is the default value for the $ver param.

Suggested change

array( 'admin-bar' ),

false

array( 'admin-bar' )

This is a habit due to WPSC enforcing an explicit value for $in_footer 😄

westonruter · 2026-03-23T10:45:56Z

src/wp-includes/general-template.php

+ * @param string|false $admin_bar_url Optional. The URL of the CSS file containing admin bar color
+ *                                    overrides for use on the front end. Default false.


With this introduced, the params are no longer aligned. If that is intended to be maintained, like so:

* @param string $key The unique key for this theme. * @param string $name The name of the theme. * @param string $url The URL of the CSS file containing the color scheme. * @param array $colors Optional. An array of CSS color definition strings which are used * to give the user a feel for the theme. * @param array $icons { * Optional. CSS color definitions used to color any SVG icons. * * @type string $base SVG icon base color. * @type string $focus SVG icon color on focus. * @type string $current SVG icon color of current admin menu link. * } * @param string|false $admin_bar_url Optional. The URL of the CSS file containing admin bar color * overrides for use on the front end. Default false.

Then:

diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index b16caf989d..70e186144c 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -4854,12 +4854,12 @@ function paginate_links( $args = '' ) { * * @global array $_wp_admin_css_colors * - * @param string $key The unique key for this theme. - * @param string $name The name of the theme. - * @param string $url The URL of the CSS file containing the color scheme. - * @param array $colors Optional. An array of CSS color definition strings which are used - * to give the user a feel for the theme. - * @param array $icons { + * @param string $key The unique key for this theme. + * @param string $name The name of the theme. + * @param string $url The URL of the CSS file containing the color scheme. + * @param array $colors Optional. An array of CSS color definition strings which are used + * to give the user a feel for the theme. + * @param array $icons { * Optional. CSS color definitions used to color any SVG icons. * * @type string $base SVG icon base color.

audrasjb · 2026-03-25T06:36:38Z

Thanks for putting together this PR @johnbillion! It looks fairly better than the current implementation.
I tested the PR on my side, and admin bar styles are correctly implemented on front end when we switch admin color schemes.

sabernhardt · 2026-03-25T08:17:22Z

I was having trouble with the registered schemes for bbPress and Grey Admin Color Schemes mainly because both plugins use wp_admin_css_color() within the admin_init hook.

Switching the hook to init works for me on the front and back with Grey Admin Color Schemes and adding the fifth and sixth arguments.
wp_admin_css_color( 'postmodern', __('Post Modern Grey', 'grey-admin-color-schemes'), plugins_url("postmodern/colors$rtl.css", __FILE__ ), array( '#464646', '#6D6D6D', '#D6D6D6', '#F1F1F1' ), array(), plugins_url("postmodern/admin-bar.css", __FILE__ ) );
bbPress would need more editing, and I have not solved that on the front.

johnbillion added 2 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.

mukeshpanchal27 reviewed Mar 17, 2026

View reviewed changes

src/wp-includes/general-template.php Show resolved Hide resolved

johnbillion requested review from audrasjb, joedolson and westonruter March 17, 2026 12:32

huzaifaalmesbah reviewed Mar 19, 2026

View reviewed changes

sabernhardt mentioned this pull request Mar 20, 2026

Toolbar color schemes on front end without global sabernhardt/wordpress-develop#64

Closed

sabernhardt reviewed Mar 21, 2026

View reviewed changes

westonruter requested a review from karmatosed March 23, 2026 10:36

westonruter reviewed Mar 23, 2026

View reviewed changes

sabernhardt mentioned this pull request Mar 25, 2026

Toolbar color schemes on front end without global variable #11354

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#64762 Use sass to generate admin toolbar colours#11267

#64762 Use sass to generate admin toolbar colours#11267
johnbillion wants to merge 2 commits intoWordPress:trunkfrom
johnbillion:64762-sass-colours

johnbillion commented Mar 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 16, 2026

Uh oh!

Uh oh!

huzaifaalmesbah left a comment

Uh oh!

sabernhardt left a comment •

edited by westonruter

Loading

Uh oh!

westonruter Mar 23, 2026

Uh oh!

johnbillion Mar 23, 2026

Uh oh!

westonruter Mar 23, 2026

Uh oh!

audrasjb commented Mar 25, 2026

Uh oh!

sabernhardt commented Mar 25, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

		* @param string\|false $admin_bar_url Optional. The URL of the CSS file containing admin bar color
		* overrides for use on the front end. Default false.

Conversation

johnbillion commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Use of AI Tools

Screenshots

Uh oh!

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

Uh oh!

Uh oh!

github-actions bot commented Mar 16, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Uh oh!

huzaifaalmesbah left a comment

Choose a reason for hiding this comment

Uh oh!

sabernhardt left a comment • edited by westonruter 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 Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

johnbillion Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

audrasjb commented Mar 25, 2026

Uh oh!

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

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

johnbillion commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

sabernhardt left a comment •

edited by westonruter

Loading

sabernhardt commented Mar 25, 2026 •

edited

Loading