ui::ThemeColors¶
Header: winui/ui/themes/Theme.hpp.
The theme's colors by role, resolved for the era and mode the theme draws. Every theme fills every field, high contrast included, so a custom control can read these without checking Theme::variant first. Theme::palette (Fluent only), surfaces and the button visuals hold the era-specific detail behind them.
A theme's colors are read-only (Theme::colors()), since they are what the theme resolved to. To change them, pass a ThemeColors to Theme::fluent(colors) or Theme::classic(colors, ...), which derive a whole theme from it, or set a ThemeRequest (accent_override, mode, variant) on the window. The defaults are the Fluent light theme's colors, so ThemeColors{.accent = ...} describes a light theme with that accent.
New roles are added at the end. A role is never removed or renamed.
Example:
class SwatchControl : public ui::Element
{
protected:
void render_override(ui::Renderer& r, const ui::RenderContext& context) const override
{
const ui::ThemeColors& c = context.theme.colors();
const float radius = context.theme.corner_radius;
r.fill_rounded_rect(bounds(), radius, is_enabled() ? c.accent : c.control_fill_disabled);
r.stroke_rounded_rect(bounds(), radius, c.control_stroke, 1.0f);
r.draw_text(label_, bounds(), c.text_on_accent, context.theme.text_style);
}
private:
std::string label_;
};
| Field | Type | Default | |
|---|---|---|---|
text |
Color |
Color::from_argb(0xE4000000) |
Body text on background, card and overlay. TextControl's default color. |
text_secondary |
Color |
Color::from_argb(0x9E000000) |
Less prominent text: captions, descriptions, a placeholder. The same as text in an era without a secondary text color. |
text_disabled |
Color |
Color::from_argb(0x5C000000) |
The text of a disabled control. |
text_on_accent |
Color |
colors::White |
Text and glyphs drawn on an accent fill. |
link |
Color |
Color::from_argb(0xFF004275) |
A link's text. Surfaces holds its hover, pressed and disabled states. |
background |
Color |
Color::from_argb(0xFFF3F3F3) |
The window's own background, which the host clears the window to: the page color in the Fluent eras, the dialog face in the classic ones. |
card |
Color |
Color::from_argb(0xB3FFFFFF) |
A raised panel or card on background. The same as background in an era without cards. |
overlay |
Color |
Color::from_argb(0xFFF9F9F9) |
A popup's surface: menus, flyouts, drop-down lists. Under in-app acrylic this is the solid color the material stands in for. |
field |
Color |
Color::from_argb(0xB3FFFFFF) |
An editable or scrollable surface, such as a TextBox or a list's rows. |
field_text |
Color |
Color::from_argb(0xE4000000) |
Text on field. |
scrim |
Color |
Color::from_argb(0x4D000000) |
The scrim drawn over the window behind an open dialog. 30 % black in every Fluent theme. |
accent |
Color |
Color::from_argb(0xFF005A9E) |
The accent fill at rest, on hover and pressed: what an accent Button fills with. |
accent_hover |
Color |
Color::from_argb(0xFF005A9E).with_alpha(0.9f) |
|
accent_pressed |
Color |
Color::from_argb(0xFF005A9E).with_alpha(0.8f) |
|
control_fill |
Color |
Color::from_argb(0xB3FFFFFF) |
A control's fill at rest, on hover, pressed and disabled: what a neutral Button fills with. |
control_fill_hover |
Color |
Color::from_argb(0x80F9F9F9) |
|
control_fill_pressed |
Color |
Color::from_argb(0x4DF9F9F9) |
|
control_fill_disabled |
Color |
Color::from_argb(0x4DF9F9F9) |
|
control_stroke |
Color |
Color::from_argb(0x0F000000) |
A control's outline: a neutral Button's border. |
control_stroke_strong |
Color |
Color::from_argb(0x72000000) |
The stronger outline of an unchecked box, a slider track or a field's border. |
divider |
Color |
Color::from_argb(0x0F000000) |
A divider line between groups of content. The Fluent eras draw it as one flat stroke. The classic eras draw an etched groove from Surfaces::separator_light and separator_dark instead, as Theme::divider_visual says. |
selection |
Color |
Color::from_argb(0xFF005A9E) |
A selected item's fill and its text. |
selection_text |
Color |
colors::White |
|
focus |
Color |
Color::from_argb(0xE4000000) |
The keyboard focus visual: the outer ring (also the classic eras' dotted rectangle) and the inner ring inside it. |
focus_inner |
Color |
Color::from_argb(0xB3FFFFFF) |
|
critical |
Color |
Color::from_argb(0xFFC42B1C) |
The strong severity fills: InfoBar's icon disc, an error message, a warning mark. |
caution |
Color |
Color::from_argb(0xFF9D5D00) |
|
success |
Color |
Color::from_argb(0xFF0F7B0F) |
|
informational |
Color |
Color::from_argb(0xFF005A9E) |