Include base styles for additional admin screens by peterwilsoncc · Pull Request #10948 · WordPress/wordpress-develop

peterwilsoncc · 2026-02-16T23:21:56Z

Alternative approach to #10934

This adds the base styles as dependencies to the login and install stylesheets.

For non-admin admin screens:

the default theme's body class is added for screens that do not require a login
the user's selected theme's body class is added for screens that do require a login

When determining additional locations that required the theme's body class, I did a search for the string wp-core-ui.

Trac ticket: https://core.trac.wordpress.org/ticket/64640
Trac ticket: https://core.trac.wordpress.org/ticket/64548

Review requests:

Ensure that I've used get_user_option() for all logged in screens
Ensure that I've not used get_user_option() where it is unavailable (if that's a thing)
Double check my work by searching the code base for wp-core-ui for instances I've missed, added unnecessarily.
Let me know if this will leak styles to the front end.

Test the DB repair screen

In your wp-config file, add the line define( 'WP_ALLOW_REPAIR', true );
Visit /wp-admin/maint/repair.php
Ensure buttons display as expected

Test the DB upgrade screen

In version.php bump the DB version to a higher number
Visit /wp-admin
Ensure the buttons display on the upgrade screen
Unbump the DB version
Reload the upgrade screen
Ensure the secondary button is displayed correctly

Test the login screen

Log out
Ensure the login button displays
Check and uncheck the remember me checkbox
Ensure the state is visible
Go through the password reset flow
Ensure the buttons display as expected on each step

I think that's it.

Benefits of this approach

This is a very subjective view, reviewers please let me know if you disagree!

I think this is less of a maintenance burden than using css variable fallbacks. While the fallbacks will work, every time a CSS variable in the base styles is tweaked in the default theme, the developer will lead to remember to modify the occurrences in the CSS variable fallbacks.

By applying the base styles to the non-logged in screens, devs can be sure tweaking the default styles will update in all the locations.

Use of AI Tools

Nill for coding, initial code review.

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.

github-actions · 2026-02-16T23:35:26Z

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.

Copilot

Pull request overview

This PR aims to ensure core “base styles” are present on additional non-admin admin screens (notably login and install/upgrade/repair flows) so UI components like buttons render consistently outside the main admin.

Changes:

Adds wp-base-styles as a dependency for the login and install stylesheets.
Adds an admin-color-* body class to several non-admin admin screens that output wp-core-ui.
Removes a now-redundant login input background rule, relying on the base styles instead.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`src/wp-login.php`	Adds `admin-color-modern` to login body classes.
`src/wp-includes/script-loader.php`	Makes `login`/`install` styles depend on `wp-base-styles`.
`src/wp-admin/upgrade.php`	Adds `admin-color-modern` to the upgrade screen body class.
`src/wp-admin/setup-config.php`	Adds `admin-color-modern` to setup-config body classes.
`src/wp-admin/maint/repair.php`	Adds `admin-color-modern` to the DB repair screen body class.
`src/wp-admin/install.php`	Adds `admin-color-modern` to installer body classes.
`src/wp-admin/includes/template.php`	Adds user-derived `admin-color-*` class to Thickbox iframe body class construction.
`src/wp-admin/includes/media.php`	Adds user-derived `admin-color-*` class to legacy media upload iframe body class.
`src/wp-admin/css/login.css`	Removes explicit white background styling for certain login inputs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/wp-login.php

github-actions · 2026-02-16T23:52:37Z

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 peterwilsoncc, westonruter, fabiankaegy, audrasjb, huzaifaalmesbah.

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

fabiankaegy · 2026-02-17T03:42:50Z

Thank you for this! :)

I originally started with loading the base styles but then failed at the step of adding the default themes admin scheme class to the screens and was concerned that there might be additional screens I wasn't aware of. Which is why I then went with the other approach. But I agree it isn't ideal. So this here feels better to me 👍

audrasjb · 2026-02-17T06:25:27Z

By applying the base styles to the non-logged in screens, devs can be sure tweaking the default styles will update in all the locations.

I wasn't fond of loading all these resources on such a screen, but this is the main reason why I do think this would be the best approach to fix this issue.

src/wp-admin/includes/media.php

westonruter · 2026-02-17T21:57:58Z

The notices shown on wp-login.php seems like they aren't styled with the right color yet:

Login screen	Password Reset

The upgrade screen looks right, but as with the login screen, the WP logo seems it will need to have its hue shifted to match.

peterwilsoncc · 2026-02-17T22:25:40Z

@westonruter Noices were updated in another ticket, I've reopened to investigate in a separate PR, see Core-64548 (comment)

peterwilsoncc · 2026-02-17T23:57:57Z

ada4dae fixes the notices on the login screen @westonruter highlights above, cc @joedolson @fabiankaegy

I was going to try and fix the login notices in another PR but realised I needed the base styles.

Rego screen	Rego success	lost pw	lost pw success	lpw error

peterwilsoncc · 2026-02-18T00:00:39Z

src/wp-admin/css/login.css

@@ -15,7 +15,7 @@ body {
 }

 a {


These will need validation that there aren't any side-effects. The color of the back to site and lost password links in the footer of the screen are coded with a higher specificity so I think they will be fine.

westonruter · 2026-02-18T01:47:44Z

ada4dae fixes the notices on the login screen

That still doesn't look quite right, as there is no background color for the notice? Maybe that's how it is supposed to be, but it feels off given how I'm used to seeing the notices.

Although there is a background color for the error notice. Shouldn't there be something for the info notice?

peterwilsoncc · 2026-02-18T01:50:01Z

There was no background with the test notices I threw in the dashboard so I think it's intended.

westonruter · 2026-02-18T02:05:41Z

I selected the Sunrise color scheme and I see these screens:

Repair	DB Upgrade	Login	`wp_iframe()`

Only in the wp_iframe() is the color scheme shown, which I believe is as expected. It shows the expected scheme when I switch back to the default:

Plugin Code to test wp_iframe()

Navigating to /wp-admin/admin-ajax.php?action=my_iframe_content:

<?php

add_action( 'wp_ajax_my_iframe_content', function () {
	wp_iframe('my_iframe_content');
	exit;
} );


function my_iframe_content() {
	echo '<div style="margin:20px;">';
	echo '<h1>Hello from inside the iframe!</h1>';
	echo '<button class="button button-primary">test</button>';
	echo '</div>';
}

westonruter

LGTM, bit I defer to others who are more familiar with styling the admin.

westonruter · 2026-02-18T02:11:09Z

Here's a diff of the HTML for the login page before and after this change:

--- before.html	2026-02-17 18:09:58
+++ after.html	2026-02-17 18:10:24
@@ -12,11 +12,12 @@
 <link rel='stylesheet' id='buttons-css' href='http://localhost:8000/wp-includes/css/buttons.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='forms-css' href='http://localhost:8000/wp-admin/css/forms.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='l10n-css' href='http://localhost:8000/wp-admin/css/l10n.css?ver=7.0-alpha-61215-src' media='all' />
+<link rel='stylesheet' id='wp-base-styles-css' href='http://localhost:8000/wp-includes/css/dist/base-styles/admin-schemes.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='login-css' href='http://localhost:8000/wp-admin/css/login.css?ver=7.0-alpha-61215-src' media='all' />
 	<meta name='referrer' content='strict-origin-when-cross-origin' />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		</head>
-	<body class="login no-js login-action-login wp-core-ui  locale-en-us">
+	<body class="login no-js login-action-login wp-core-ui admin-color-modern  locale-en-us">
 	<script>
 document.body.className = document.body.className.replace('no-js','js');
 </script>

huzaifaalmesbah · 2026-02-18T05:51:12Z

Visually looks good and working as expected 👍

DB Repair	DB Upgrade	Login with Checked Remember Me	Reset Password	Register

peterwilsoncc requested a review from Copilot February 16, 2026 23:42

Copilot started reviewing on behalf of peterwilsoncc February 16, 2026 23:42 View session

Copilot AI reviewed Feb 16, 2026

View reviewed changes

src/wp-login.php Show resolved Hide resolved

peterwilsoncc requested review from fabiankaegy, joedolson and t-hamano February 16, 2026 23:52

peterwilsoncc marked this pull request as ready for review February 16, 2026 23:52

peterwilsoncc mentioned this pull request Feb 17, 2026

Admin: Add CSS variable fallbacks to stylesheets. #10934

Closed

westonruter reviewed Feb 17, 2026

View reviewed changes

src/wp-admin/includes/media.php Show resolved Hide resolved

peterwilsoncc added 3 commits February 18, 2026 07:56

Remove form styles in favour of base styles.

66ed665

Add colour scheme to various admin body classes.

7fff3aa

Require base styles for install and login stylesheets.

9aac6d6

peterwilsoncc force-pushed the fix/64640-alt-use-base-styles branch from 4419839 to 9aac6d6 Compare February 17, 2026 20:56

Update notice styles.

ada4dae

peterwilsoncc commented Feb 18, 2026

View reviewed changes

westonruter approved these changes Feb 18, 2026

View reviewed changes

Conversation

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

Uh oh!

Review requests:

Benefits of this approach

Use of AI Tools

Uh oh!

github-actions bot commented Feb 16, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

fabiankaegy commented Feb 17, 2026

Uh oh!

audrasjb commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

peterwilsoncc commented Feb 17, 2026

Uh oh!

peterwilsoncc commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peterwilsoncc Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

peterwilsoncc commented Feb 18, 2026

Uh oh!

westonruter commented Feb 18, 2026

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

westonruter commented Feb 18, 2026

Uh oh!

huzaifaalmesbah commented Feb 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

peterwilsoncc commented Feb 16, 2026 •

edited

Loading

github-actions bot commented Feb 16, 2026 •

edited

Loading

audrasjb commented Feb 17, 2026 •

edited

Loading

westonruter commented Feb 17, 2026 •

edited

Loading

peterwilsoncc commented Feb 17, 2026 •

edited

Loading

westonruter commented Feb 18, 2026 •

edited

Loading