Admin Color Scheme Not Applied in Media Modal Inside Elementor Editor

[huzaifaalmesbah]

When opening the WordPress Media Library from the Elementor editor (e.g., using the Image widget), the 'Select Files', 'Select' and other button and link do not use the admin color scheme.

The admin color scheme CSS variables are not loaded in the Elementor editor context, so the button colors not display the correct admin color scheme. This results in inconsistent UI compared to the standard WordPress Media Library in the admin dashboard.

Steps to Reproduce:

1. Go to Pages → Add New
2. Click Edit with Elementor
3. Add an Image widget
4. Click Choose Image
5. The Media Library modal opens
6. Check the “Select Files” or “Select” button

Expected Result:

Media Library should use the admin color scheme.

Environment

• WordPress: 7.0-beta4-61919-src
• PHP: 8.3.30
• Server: nginx/1.29.6
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.3.30)
• Browser: Chrome 145.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Elementor 3.35.6
  • Test Reports 1.2.1

[audrasjb]

This looks like an issue on Elementor side, not Core. Probably better to raise the issue on their support forums.
I tested inserting a media from the Legacy/Classic Editor and it does have the new design.

[wildworks]

The reason is that the CSS variables are not being output in the Elementor editor, but I think this ticket appears to point to a more underlying core issue.

The new Admin color is based on CSS variables, which are enqueued by wp-base-styles. Therefore, the new Admin color shouldn't work on screens where wp-base-styles isn't enqueued.

I'm not sure why these CSS variables aren't being output in the Elementor editor, but it might be dequeuing core CSS in some way.

It might be worth reviewing ​the wp_default_styles() function to see if there are any other places where wp-base-styles should be added as a dependency.

[sabernhardt]

Enqueuing wp-base-styles is not enough because that still relies on a body class. Stylesheets in the wp-includes directory should have default values for each CSS custom property. [61652] added default values for colors and width in focus outlines, but at least buttons.css and a few rules in media-views.css still need fallbacks (such as what they were before [61645]).

[wildworks]

I noticed that we have a mix of CSS custom properties that have fallback values ​​and those that don't.

var(--wp-admin-theme-color, #3858e9);
var(--wp-admin-theme-color);

Perhaps all we need to do is add fallback values ​​to all CSS custom properties?

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

## Use of AI Tools

All code changes were made by Copilot, and I have verified that all changes are correct.

## Testing instructions

One way to test this PR is to use ​Elementor. Elementor uses media modals on screens that are not enqueuing CSS custom properties.

1. Install Elementor
2. Open ​http://localhost:8889/wp-admin/post-new.php
3. Click the " Edit with Elementor" button (If it's not enabled)
4. Click the Image button inside the left sidebar
5. Click the "Choose Image" button
6. Confirm the button colors

## Screenshot

Before	After

The fallback value is currently being applied to the Media View button. ✅

Before	After

[mukesh27]

Replying to wildworks:

I noticed that we have a mix of CSS custom properties that have fallback values ​​and those that don't.

var(--wp-admin-theme-color, #3858e9);
var(--wp-admin-theme-color);

Perhaps all we need to do is add fallback values ​​to all CSS custom properties?

In which cases we don;t have var(--wp-admin-theme-color) defined?

[wildworks]

Replying to mukesh27:

Replying to wildworks:

I noticed that we have a mix of CSS custom properties that have fallback values ​​and those that don't.

var(--wp-admin-theme-color, #3858e9);
var(--wp-admin-theme-color);

Perhaps all we need to do is add fallback values ​​to all CSS custom properties?

In which cases we don;t have var(--wp-admin-theme-color) defined?

This is the case when wp-base-styles is not enqueued.

[noruzzaman]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/11301

Environment

• WordPress: 7.0-beta6-20260322.085519
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 146.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Elementor 3.35.9
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Before	After

[joedolson]

Marking for commit; needs 2nd committer sign off before commit.

[audrasjb]

@joedolson the proposed PR looks good on my side 👍

[joedolson]

In 62154:

Admin: Add CSS fallback values in button and media views.

Since button and media view CSS can sometimes be enqueued by extenders in contexts where either wp-base-styles are not present or the body wrapper class is omitted, these variables should use fallback values.

Reviewed by audrasjb.
Props huzaifaalmesbah, wildworks, mukesh27, noruzzaman, joedolson, sabernhardt, audrasjb, shailu25.
Fixes #64840.