| 1 |
--- |
| 2 |
title: "Contextual theming" |
| 3 |
authors: ["@viridia"] |
| 4 |
pull_requests: [24969] |
| 5 |
--- |
| 6 |
|
| 7 |
Feathers now supports "contextual theming", meaning that the theme variables can change depending |
| 8 |
on the parent entity. So widgets that are inside of a dialog box or subpanel can have different |
| 9 |
colors than widgets that are on a regular panel or window background. |
| 10 |
|
| 11 |
The design follows that of popular web toolkits like MUI, Radix, or Chakra. There's a new component, |
| 12 |
`ThemeContext`, which lets you select which color scheme the widget's descendants should use; |
| 13 |
currently the available schemes are `Base`, `Higher`, `Highest`, and `Floating`, which correspond |
| 14 |
to the design plans for the Bevy scene editor. |
| 15 |
|
| 16 |
The theme context is used in conjunction with a new kind of design token, named `SemanticToken`. |
| 17 |
The lookup process for a color now requires two stages: the `ThemeToken` is converted into a |
| 18 |
`SemanticToken`, and then the combination of `SemanticToken` and `ThemeContext` is used to look up |
| 19 |
a color. |
| 20 |
|
| 21 |
In addition to allowing context-specific color choices, this also makes it easier to design new |
| 22 |
themes! Instead of having to tediously choose colors for a hundred different theme tokens, |
| 23 |
the set of semantic tokens is much smaller, and the relationship between token and color is much |
| 24 |
more intuitive. |