Site Editor: Apply the user's admin color scheme#78397
Open
fushar wants to merge 2 commits into
Open
Conversation
github-actions
Bot
added
[Package] Edit Site
fushar
force-pushed
the
admin-bar-in-editor-color-4
branch
from
0fc11f7 to
231eebb
Compare
|
Size Change: +1.09 kB (+0.01%) Total Size: 7.97 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 231eebb. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26037324025
|
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
fushar
added
[Type] Feature
ciampo
reviewed
May 18, 2026
Contributor
There was a problem hiding this comment.
I'm not sure that "WordPress app" concerns (such as named theme presets) should live in the @wordpress/theme package, which is supposed to be focused on app-agnostic features and tokens.
Contributor
Author
There was a problem hiding this comment.
Interesting, I thought because admin color scheme is a core WP feature, it could belong in that package.
OK, I moved the logic to @wordpress/admin-ui instead via f733f13. I think that's a better place. What do you think?
Contributor
There was a problem hiding this comment.
admin-ui feels like a better fit given current constraints (dependency graph), although I don't know if it is the correct choice in general terms.
@wordpress/theme is app-agnostic, and focuses on tokens + theming primitives
Member
There was a problem hiding this comment.
I would say admin-ui is also not the best fit, since admin color schemes will be used in wider contexts (like post/page editors as well).
If we consider the future of the @wordpress/components package as a more higher-level package of things with explicit WordPress coupling, maybe @wordpress/components is actually a better place 😄
fushar
force-pushed
the
admin-bar-in-editor-color-4
branch
3 times, most recently
from
deb7ee6 to
ccce419
Compare
fushar
force-pushed
the
admin-bar-in-editor-color-4
branch
from
ccce419 to
f733f13
Compare
jameskoster
reviewed
May 18, 2026
| height: 100%; | ||
| background: $gray-900; | ||
| color: $gray-400; | ||
| background: var(--wpds-color-bg-surface-neutral); |
Contributor
There was a problem hiding this comment.
I think these backgrounds should use --wpds-color-bg-surface-neutral-weak.
Contributor
There was a problem hiding this comment.
We should use interactive tokens for interactive elements like buttons.
Contributor
There was a problem hiding this comment.
We should use interactive tokens instead of content tokens here too.
Contributor
There was a problem hiding this comment.
More instances of replacing content tokens with interactive tokens :)
Contributor
There was a problem hiding this comment.
More interactive tokens :)
| width: 100%; | ||
| .components-input-control__container { | ||
| background: $gray-800; | ||
| background: var(--wpds-color-bg-interactive-neutral-weak-active); |
Contributor
There was a problem hiding this comment.
-active is reserved for states like hover, focus, active, etc.
Contributor
There was a problem hiding this comment.
If we use InputControl from the ui package we should inherit theming automatically.
|
|
||
| .components-button { | ||
| color: $gray-200 !important; | ||
| color: var(--wpds-color-fg-content-neutral) !important; |
Contributor
There was a problem hiding this comment.
Use interactive token.
Comment on lines
28
to
+47
| @@ -44,7 +44,7 @@ | |||
| &:hover, | |||
| &:focus, | |||
| &:active { | |||
| color: $gray-200; | |||
| color: var(--wpds-color-fg-content-neutral); | |||
Contributor
There was a problem hiding this comment.
More instances where we should use interactive tokens.
Comment on lines
+85
to
91
| color: var(--wpds-color-fg-content-neutral); | ||
|
|
||
| &:hover, | ||
| &:active { | ||
| svg { | ||
| fill: $gray-100; | ||
| fill: var(--wpds-color-fg-content-neutral); | ||
| } |
Contributor
There was a problem hiding this comment.
More interactive tokens :)
Contributor
|
Was also about to share similar feedback to @jameskoster re. using the correct tokens. The |
ciampo
reviewed
May 18, 2026
| }; | ||
| } | ||
|
|
||
| export function UserThemeProvider( { |
Contributor
There was a problem hiding this comment.
Maybe we should rename the provider to AdminColorThemeProvider ?
Member
There was a problem hiding this comment.
I feel like exposing getAdminThemeColors() may be sufficient, rather than exporting a wrapper with ThemeProvider included. This kind of wrapper adds a lot of indirection overhead for discovery/documentation.
| [ 'light', '#e5e5e5' ], | ||
| ] ); | ||
|
|
||
| export function getAdminThemeColors() { |
Contributor
There was a problem hiding this comment.
Should we also expose this function in case non-react consumers need to get the same theme colors info?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Makes the Site Editor's sidebar and page shell (chrome) to follow the user's WordPress admin color scheme instead of always rendering a fixed dark barkground.
Why?
This is a continuation of #78331, as per the suggestion I made the changes directly via WPDS tokens +
ThemeProviderrather than overriding in the experiment SCSS file.How?
UserThemeProviderfrom@wordpress/bootinto@wordpress/theme@wordpress-admin-ui, so both the Site Editor (@wordpress/edit-site) andbootcan share one implementation.UserThemeProvideris aThemeProviderpre-seeded from the user's admin color scheme. It now also pass thebgcolor toThemeProviderin addition toprimary. Previously,boothardcoded the sidebar background to#1d2327; it's now based on the admin color scheme.@wordpress/edit-sitenow wraps the layout in the sharedUserThemeProvider.edit-site's component SCSS files to WPDS tokens. I used trial-and-error with my AI agent until the token set looks good (check screenshot).Limitations
/wp-admin/admin.php?page=site-editor-v2) is EXCLUDED for now. The page does not add the color scheme to the<body>'sclass. I'm not sure if that's intended? It does work correctly on otherbootpages like Appearance -> Fonts.colors.bg) toThemeProvider, will generate slightly different background and text color than the corresponding pair in Core. For example, in Sunrise, the sidebar has black text but the admin bar has white text:I believe this is because this is what the theme package thinks the best combination a11y-wise based on the passed
primaryandbgcolor seed. Is this acceptable? I don't know what to do otherwise, since this whole thing is generated.Testing Instructions
Test the Site Editor (v1) with various admin color schemes (set via Users -> Profile). Also test on various screen widths to test mobile behavior.
Test also
bootpages such as Appearance -> Fonts.Screenshots
Appearance -> Fonts
(Check the right and bottom sides; they now follow the background color instead of black.)
Site Editor
Use of AI Tools
I used Claude Code with Opus 4.7 to help replace the hardcoded colors with appropriate WPDS token variables.
cc: @lucasmendes-design