ui::Palette¶
Header: winui/ui/themes/Palette.hpp.
The Fluent colors a Theme is derived from, one field per role: text, control fills, strokes, accent, surfaces and status colors.
Theme::fluent() derives every control's colors from a Palette. fluent_light() and fluent_dark() give the Windows 11 colors, and fluent1_light() and fluent1_dark() the Windows 10 ones. A custom palette starts from one of them and changes fields. A Palette is plain data and cheap to copy.
Example:
ui::Palette palette = ui::Palette::fluent_dark();
palette.accent_fill_default = ui::Color::from_argb(0xFF8764B8); // a purple accent
palette.accent_text_primary = ui::Color::from_argb(0xFFD4C3F0);
ui::Theme theme = ui::Theme::fluent(palette);
window.pin_theme(std::move(theme)); // accent buttons, toggles and links now use the purple
dark¶
Whether this is a dark palette. A few shapes differ between light and dark, and Theme::fluent() reads them from this flag. The main one is the neutral elevation border, whose gradient is flipped vertically in light and not in dark. Set by the factories, and false in a default-constructed Palette.
text_fill_primary¶
Body text and labels at rest.
text_fill_secondary¶
Captions, placeholders, secondary labels and glyphs.
text_fill_tertiary¶
The faintest readable text, below secondary.
text_fill_disabled¶
The label of a disabled control.
text_on_accent_primary¶
Text and glyphs on an accent fill, such as an accent button's label or a checked box's check mark. White in light, black in dark.
text_on_accent_secondary¶
An accent button's label while pressed.
text_on_accent_disabled¶
The label of a disabled accent button.
control_fill_default¶
A standard control (Button, TextBox, ComboBox) at rest.
control_fill_secondary¶
The same control under the pointer.
control_fill_tertiary¶
The same control pressed.
control_fill_quaternary¶
A fourth control fill, a stronger wash than the pressed one.
control_fill_disabled¶
A disabled standard control.
control_fill_input_active¶
A focused text field (TextBox, PasswordBox, RichEditBox, AutoSuggestBox, NumberBox). The one opaque fill of this set in light, so the field turns from a translucent wash into a solid surface on focus. Light's is plain white, which differs from solid_background_tertiary's #F9F9F9.
control_alt_fill_secondary¶
The fill of an unchecked CheckBox, RadioButton or ToggleSwitch indicator at rest, a slightly recessed surface distinct from control_fill_*. The three control_alt_fill_* fields after it are hover, pressed and disabled. Three values are easy to guess wrong:
- Dark's rest fill is translucent black (#19000000), so a dark unchecked box at rest is darker than the page.
- In light, rest is the fainter 2 % wash and hover the 6 % one.
- The disabled fill is transparent in both themes, so a disabled box shows only its stroke.
control_alt_fill_tertiary¶
The unchecked indicator under the pointer.
control_alt_fill_quaternary¶
The unchecked indicator pressed.
control_alt_fill_disabled¶
The unchecked indicator while disabled, transparent in both Windows 11 themes.
subtle_fill_transparent¶
A subtle control, such as a borderless button or a list or menu row, at rest.
subtle_fill_secondary¶
A subtle control under the pointer.
subtle_fill_tertiary¶
A subtle control pressed.
on_backdrop_hover¶
A control sitting directly on the window's Mica backdrop, such as a tab of a Tabs control, under the pointer. It replaces the subtle_fill_* colors there. The pressed fill is a lighter, mostly opaque layer (light 0xB3FFFFFF, dark 0x733A3A3A), so a tab brightens on press. At rest the control is transparent, which needs no field.
on_backdrop_pressed¶
That control pressed.
accent_fill_default¶
Accent buttons, checked toggles and selection indicators. The value is the default accent. A Theme resolved from the OS replaces it with the user's accent.
accent_fill_disabled¶
An accent-filled control while disabled, a neutral wash.
accent_text_primary¶
Link text at rest. The four accent_text_* fields cover rest, hover, pressed and disabled link text. They use other shades of the accent than the fill above: in light, rest, hover and pressed are AccentRamp::dark2, dark3 and dark1, and in dark they are light3, light3 and light2. Windows 10 has no such shades, so fluent1_light() and fluent1_dark() fill these with its own link colors.
accent_text_secondary¶
Link text under the pointer.
accent_text_tertiary¶
Link text pressed.
accent_text_disabled¶
A disabled link's text.
control_stroke_default¶
The hairline border of a standard control, one stop of its elevation-border gradient.
control_stroke_secondary¶
The other stop of a standard control's elevation-border gradient.
control_stroke_on_accent_default¶
The first stop of an accent control's elevation-border gradient. This pair differs from the neutral control_stroke_default and control_stroke_secondary. The second stop is a 40 % black hairline in light, against the neutral 16 %, and this one is translucent white in both themes, where the neutral one flips between black and white.
control_stroke_on_accent_secondary¶
The second stop of that gradient, the darker edge of an accent control.
control_strong_stroke_default¶
The border of an unchecked CheckBox, RadioButton or ToggleSwitch. It is much bolder than control_stroke_default, so an unchecked toggle still looks interactive.
control_strong_stroke_disabled¶
That border on a disabled control.
focus_stroke_outer¶
The outer 2px ring of the keyboard focus visual.
focus_stroke_inner¶
The inner 1px ring of the focus visual, the outer ring's inverse.
card_stroke_default¶
The border of card-shaped surfaces such as InfoBar: #0F000000 in light, #19000000 in dark.
divider_stroke_default¶
A flat 1px rule between grouped items, as in menu and Toolbar separators. Light 0x0F000000, dark 0x15FFFFFF.
surface_stroke_default¶
The 1px frame of a surface that floats over the page, such as TeachingTip. The same #66757575 in light and dark.
layer_fill_alt¶
The top area of a DialogControl, opaque white in light and a 5 % white wash in dark. Transparent in the Windows 10 palettes.
layer_fill_default¶
NavigationShell's content area, #80FFFFFF in light and #4C3A3A3A in dark. Transparent in the Windows 10 palettes.
control_solid_fill_default¶
An opaque control fill, such as the inner ring of a selected TileViewItem. #FFFFFF in light, #454545 in dark.
control_on_image_fill_default¶
A control drawn over a picture, such as the unchecked multi-select box of a TileViewItem. This field and the three after it are rest, hover, pressed and disabled: light #C9FFFFFF, #F3F3F3, #EBEBEB and #00FFFFFF, dark #B31C1C1C, #1A1A1A, #131313 and #1E1E1E.
control_on_image_fill_secondary¶
The on-image fill under the pointer.
control_on_image_fill_tertiary¶
The on-image fill pressed.
control_on_image_fill_disabled¶
The on-image fill while disabled.
control_stroke_on_accent_tertiary¶
A hovered TileViewItem's 1px outline, #37000000 in both themes.
solid_background_base¶
The opaque window and page background.
solid_background_secondary¶
A slightly recessed opaque surface.
solid_background_tertiary¶
A slightly raised opaque surface.
acrylic_fallback_default¶
The solid color of the in-app acrylic material: #2C2C2C in dark, #F9F9F9 in light. Popups that close on an outside click, such as menus, flyouts, the ComboBox list and ToolTip, draw in acrylic. This color replaces the acrylic whenever it is off: with transparency effects disabled, in battery saver, on a low-end GPU or in high contrast. Both values match the Windows 11 system popup menu. In dark it differs from solid_background_tertiary (#282828).
card_background_default¶
The fill of a card surface, such as an Expander's header, paired with card_stroke_default. 0xB3FFFFFF in light, 0x0DFFFFFF in dark, where control_fill_default is 0x0FFFFFFF.
card_background_secondary¶
A card's recessed inner region, such as an expanded Expander's content panel.
semantic_fill_success¶
The success icon of an InfoBar and a success InfoBadge. The semantic_fill_* colors are strong marks for icons and badges. The semantic_background_* colors are the much fainter washes that fill an InfoBar's body. The informational severity has no fill color because its icon uses the accent, so InfoBar reads accent_fill_default for it.
semantic_fill_caution¶
The warning icon of an InfoBar and a caution InfoBadge.
semantic_fill_critical¶
The error icon of an InfoBar and a critical InfoBadge.
semantic_fill_solid_neutral¶
The opaque gray of an informational InfoBadge, #8A8A8A in light, #9D9D9D in dark.
semantic_background_informational¶
An informational InfoBar's body.
semantic_background_success¶
A success InfoBar's body.
semantic_background_caution¶
A warning InfoBar's body.
semantic_background_critical¶
An error InfoBar's body.
tabular_header_background¶
The header band of tabular controls such as TableView. A translucent wash of about 15 % alpha, above control_stroke_default's 6 to 7 %, so it stands out over row banding.
tabular_grid_line¶
The gridlines between rows and cells of tabular controls, stronger than divider_stroke_default so they stay visible at 1px over alternating rows.
tabular_row_alternating¶
Every second row of a tabular control with banding on. It has the same values as subtle_fill_secondary.
acrylic_in_app_default¶
The in-app acrylic material as an AcrylicBrush. Light has tint #FCFCFC at opacity 0 and luminosity opacity 0.85, dark has #2C2C2C at 0.15 and 0.96, and both fall back to acrylic_fallback_default. Drawn with Renderer::draw_geometry(), it blurs what is behind it.
fluent_light¶
The Windows 11 light colors. The accent fields hold shades of the default accent (#005A9E for the fill). A theme resolved from the OS replaces them with the user's accent.
fluent_dark¶
The Windows 11 dark colors, with the default accent's light shades (#76B9ED for the fill) in the accent fields.
fluent1_light¶
The Windows 10 light colors in the same roles: a pure white page, 20 % black button fills that lighten on hover, unfilled toggles, and the accent #0078D4.
fluent1_dark¶
The Windows 10 dark colors. Its translucent text and fill colors are the exact inverse of fluent1_light()'s. Its opaque grays are not: they have their own order per theme, so a gray that is darker than another in light can be lighter in dark.