Make WordPress Core

Opened 5 weeks ago

Closed 13 days ago

Last modified 11 days ago

#50547 closed enhancement (fixed)

Adapt the Customizer UI colors to the selected admin theme colors

Reported by: youknowriad Owned by: youknowriad
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: ui, css Cc:


Several UI elements in the customizer don't adapt properly to the selected admin scheme.
We should make use to use the $highlight-color for these UI elements.

Attachments (3)

Capture d’écran 2020-07-03 à 11.02.07 AM.png (96.9 KB) - added by youknowriad 5 weeks ago.
Sidebar with colors adapted to the selected theme.
50547-customizer-media.png (21.2 KB) - added by kebbet 2 weeks ago.
Customizer media popup
fix-danger-colors-media-modal.diff (768 bytes) - added by youknowriad 13 days ago.

Download all attachments as: .zip

Change History (21)

5 weeks ago

Sidebar with colors adapted to the selected theme.

This ticket was mentioned in PR #384 on WordPress/wordpress-develop by youknowriad.

5 weeks ago

  • Keywords has-patch added

#2 @youknowriad
5 weeks ago

  • Component changed from General to Customize
  • Focuses ui css added

#3 @dlh
5 weeks ago

  • Milestone changed from Awaiting Review to 5.6

This does seem like an inconsistency worth addressing. Perhaps some of the Customizer veterans out there can comment to clarify whether it was in some way intentional? Otherwise, this looks like it would be a great enhancement-slash-bugfix to try for in 5.6.

#4 @youknowriad
5 weeks ago

What about 5.5? We still have two days and I can take care of the commit. IMO, it was just an oversight.

#5 @dlh
5 weeks ago

I went with 5.6 only because the needs-design-feedback keyword had been added. If that feedback can be obtained in time, then I certainly wouldn't stand in the way of trying for 5.5 and then soliciting testing in beta.

This ticket was mentioned in Slack in #design by estelaris. View the logs.

5 weeks ago

#7 @Joen
5 weeks ago

This looks good to me, the patch looks very safe and straight-forward, and the code quality this brings benefits the ongoing convert-to-CSS-variable efforts. Definitely LGTM.

#8 @youknowriad
5 weeks ago

  • Milestone changed from 5.6 to 5.5

#9 @youknowriad
5 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 48371:

Customizer: Adapt the colors to the selected admin scheme colors.

Uses the $highlight-color variable to override the hardcoded colors used in the customizer UI.

Props dlh, joen.
Fixes #50547.

2 weeks ago

Customizer media popup

#10 @kebbet
2 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Just noted that colors are not adapted in the Media popup in the Customizer. The focus styles (both inputs and search field) and two links in the right sidebar has the ”old” color when using the new admin theme.

Find the popup when you set a site logo, site icon or an background image.

#11 @kebbet
2 weeks ago

  • Keywords needs-patch added; has-patch removed

#12 @dlh
2 weeks ago

@kebbet The focus styles for those inputs don't seem to honor the color scheme outside of the Customizer, either, or am I missing something?

#13 @kebbet
2 weeks ago

@dlh Oh, it's a rabbit hole... It differs. Some more findings:

  • In the normal media popup focus styles have the new darker color applied. (Going from main media library).
  • When going to a media popup via the gallery block or the image block, the same applies as my first report.
  • Search in (all) table listing views applies the color, but not the Media grid-view.
  • Focus not applied to filter dropdown menues in table listing views.
  • Focus not applied to any dropdown filter/menu.
  • Button looking like links (like filter All | Admin | Editor etc in users-view) has old focus color.
Last edited 2 weeks ago by kebbet (previous) (diff)

#14 @youknowriad
13 days ago

I uploaded a patch that fixes the color of the "Delete permanently" link on the screenshot above (and all error/danger links on the Media modal properly).

That said, it seems like suggested above that there's a lot of places across WP-Admin where the default blue color bleeds. it seems unrelated to the initial patch for this issue. I'd propose to keep it as is for now and fix this with the move to CSS variables on Core styles like it's being explored separately.

#15 @youknowriad
13 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 48643:

Administration: Fix the red links on the Media Modal.

The custom link colors for admin scheme colors were overriding the danger color.

Props kebbet, dlh.
Fixes #50547.

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.

13 days ago

#17 @davidbaumwald
13 days ago

  • Keywords needs-design-feedback needs-patch removed

This ticket was mentioned in Slack in #core by dlh. View the logs.

11 days ago

Note: See TracTickets for help on using tickets.