ui::Surfaces¶

Header: winui/ui/themes/Theme.hpp.

The era-specific surface colors the built-in controls draw with: field borders, menus, tooltips, link states, separators and scroll bars. A custom control reads the role colors in Theme::colors() first and uses these only to match a built-in control's exact look.

Example:

// A custom menu row drawn the way the theme's own menus draw theirs:
class MenuRowControl : public ui::Element
{
protected:
    void render_override(ui::Renderer& r, const ui::RenderContext& context) const override
    {
        const ui::Surfaces& s = context.theme.surfaces;
        r.fill_rounded_rect(bounds(), 0.0f, hot_ ? s.menu_highlight : s.menu);
        r.draw_text(label_, bounds(), hot_ ? s.menu_highlight_text : s.menu_text, context.theme.text_style);
    }

private:
    std::string label_;
    bool        hot_ = false;
};

Field	Type
`field_border`	`Color`	A text field's border or bevel color, a sunken well or a 1px stroke.
`menu`	`Color`	The menu, menu bar, toolbar and tab strip background.
`menu_text`	`Color`	Menu item text.
`menu_highlight`	`Color`	The fill of a menu item under the pointer or selected.
`menu_highlight_text`	`Color`	The text of a menu item under the pointer or selected.
`menu_border`	`std::optional<Color>`	The popup's own border, when it differs from the field border. `nullopt` uses `field_border`. Metro needs it: its popup border is black while its text field border is white, and the field border would draw a white popup with a white frame.
`menu_pressed`	`std::optional<Color>`	A menu item's fill while pressed, and its secondary text: the shortcut, the submenu chevron and the check mark at rest. `nullopt` uses `menu_highlight` and `menu_text`, for an era whose menus have no separate pressed look and draw shortcuts in the item's color.
`menu_secondary_text`	`std::optional<Color>`
`tooltip`	`Color`	The tooltip background.
`tooltip_text`	`Color`	Tooltip text.
`tooltip_border`	`std::optional<Color>`	The tooltip's own 1 px frame, when it differs from the field border. `nullopt` uses `field_border`, as `menu_border` does. Luna needs it: its tooltip keeps the classic look, so the frame is black instead of the text field's `#7F9DB9`.
`teaching_tip`	`std::optional<Color>`	TeachingTip's body and tail while it does not close on an outside click. A tip that does fills with `menu`, the same in-app acrylic a Flyout uses. `nullopt` is `menu`, for eras that predate the control.
`surface_stroke`	`std::optional<Color>`	The 1px frame of the two surfaces that float over the page without being a popup list: Dialog and TeachingTip. `nullopt` keeps each one's era frame, the field border for a dialog and the popup border for a tip.
`dialog_top_overlay`	`std::optional<Color>`	DialogControl's title-and-content area, laid over the dialog's own background, and the rule under it that sets the button area apart. `nullopt` draws neither, which gives the one flat face of every earlier era's dialog.
`dialog_separator`	`std::optional<Color>`
`split_view_pane`	`std::optional<Color>`	SidePane's default pane background: `#F2F2F2` in light, `#171717` in dark, and the window color in high contrast. `nullopt` is `menu`, the era's chrome face, for eras that predate the control.
`nav_content`	`std::optional<Color>`	NavigationShell's content area fill and the border around it. `nullopt` draws neither, and the page shows through, as in every earlier era.
`nav_content_stroke`	`std::optional<Color>`
`hyperlink_hover`	`std::optional<Color>`	A link's text under the pointer, pressed and disabled, where the era has its own. `nullopt` uses `ThemeColors::link` for hover and press and the subtle button's disabled text, the right look for every era without a hyperlink button of its own.
`hyperlink_pressed`	`std::optional<Color>`
`hyperlink_disabled`	`std::optional<Color>`
`separator_light`	`Color`	The etched groove's light line.
`separator_dark`	`Color`	The etched groove's dark line.
`scrollbar_track`	`Color`	The scroll bar's track.
`scrollbar_thumb`	`Color`	The scroll bar's thumb.
`scrollbar_arrow`	`Color`	The scroll bar's arrow glyphs.