Skip to content

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)