Skip to content

Full contextual theming#24969

Open
viridia wants to merge 4 commits into
bevyengine:mainfrom
viridia:theme_override
Open

Full contextual theming#24969
viridia wants to merge 4 commits into
bevyengine:mainfrom
viridia:theme_override

Conversation

@viridia

@viridia viridia commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Third time's the charm, maybe? This now implements full-on contextual theming.

Token lookup now happens in two stages:

A theme token is converted into a semantic token, and then the combination of semantic token + theme context is used to look up a color. The set of semantic tokens is much smaller than the set of theme tokens.

The theme context is an enum which indicates the surface layer of the container holding the widget.

@alice-i-cecile @gagnus

@viridia viridia changed the title Contextual theme overrides Full contextual theming Jul 13, 2026
@alice-i-cecile alice-i-cecile added A-UI Graphical user interfaces, styles, layouts, and widgets X-Needs-SME This type of work requires an SME to approve it. M-Release-Note Work that should be called out in the blog due to impact S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Jul 13, 2026
@github-project-automation github-project-automation Bot moved this to Needs SME Triage in UI Jul 13, 2026
@alice-i-cecile alice-i-cecile added the D-Complex Quite challenging from either a design or technical perspective. Ask for help! label Jul 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note.

Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes.

@viridia viridia requested a review from kfc35 July 14, 2026 07:41
@viridia

viridia commented Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

I ended up completely re-writing the previous version ("limited contextual theming") but re-used the same PR instead of creating a new one (partially by accident). In any case, I think this is ready for review.

@gagnus I'd be interested in your comments; as this moves somewhat nearer to your "slots" idea. I have not attempted to implement an algorithmic theme generator (I'll leave that to you or someone else), I'm just trying to put in the infrastructure for contextual theming and semantic tokens.

I have continued to use alpha colors in a few places - this is primarily for ease of migration on my part. There's no longer an "alpha hack" for sliders and text input backgrounds. Alpha is mainly used for disabled controls, because this is the specification given on the figma doc. However, with some effort, the number of alpha colors could be reduced even further if desired (although there are a few things, like focus rects, which depend on alpha).

@viridia

viridia commented Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

Here's a screenshot of what it looks like. There are some subtle differences in color assignments - it was hard to get checkboxes to have the exact same shades while fitting all the colors into a consistent framework. Other changes are intentional: You can see that the text input fields now have context-sensitive colors: the fill color for the input fields in the group container are lighter than the fill color for the input field on the default background:

feathers-theme-override

Overall, this is actually closer to the current figma mock than what's in mainline right now. (Although looking at it right now I see some bugs in the toggle switches. Note that the figma design for the toggles is quite pedestrian IMHO.)

Note that the feathers gallery color widgets are getting cut off because people have been stuffing more widgets into the first column and pushing the other items down. This needs to be fixed, but not in this PR.

We also need a new demo which demonstrates all of the context-sensitive widgets shown against the various background choices. I'm thinking of something that has 4 columns: window, pane, subpane, and group.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-UI Graphical user interfaces, styles, layouts, and widgets D-Complex Quite challenging from either a design or technical perspective. Ask for help! M-Release-Note Work that should be called out in the blog due to impact S-Needs-Review Needs reviewer attention (from anyone!) to move forward X-Needs-SME This type of work requires an SME to approve it.

Projects

Status: Needs SME Triage

Development

Successfully merging this pull request may close these issues.

2 participants