ui::Mdl2Palette¶
Header: winui/ui/themes/Mdl2Palette.hpp.
The 24 base colors of the MDL2 theme. The page_* colors are the page color and the text_* colors the text color, each named after its opacity: 20, 40, 60, 80 or 100 %. The list_* colors are the text color at 10 and 20 %. The two sets swap between light and dark. Keep them translucent. A disabled or secondary color is the text color blended over whatever is behind it, and an opaque gray mixed against the page looks wrong over a selection or an image. Most chrome colors are opaque grays that differ between the themes, which gives MDL2 chrome its weight without an accent.
Theme::mdl2() derives every control color from one of these palettes plus the accent.
Example:
// White text on a black page, with a blue accent.
const ui::Mdl2Palette palette = ui::Mdl2Palette::mdl2_dark();
window.pin_theme(ui::Theme::mdl2(palette, /*dark=*/true, ui::Color::from_argb(0xFF0078D7)));
// Secondary text in the text color at 60 %, blended over whatever is behind it.
window.set_content(ui::VerticalStack{
.content = {
ui::Text{.text = "Now playing"},
ui::Text{.text = "Track 3 of 12", .foreground = palette.text_60},
},
});
page_100¶
The page color at full opacity: white in light, black in dark.
page_20¶
The page color at 20 %.
page_60¶
The page color at 60 %, the inner focus ring.
page_80¶
The page color at 80 %.
page_40¶
The page color at 40 %.
text_100¶
The text color at full opacity: black in light, white in dark.
text_20¶
The text color at 20 %, a button's fill at rest.
text_60¶
The text color at 60 %, secondary text and borders.
text_80¶
The text color at 80 %, the border of an unchecked check box or radio button.
text_40¶
The text color at 40 %, disabled text and a pressed button's fill.
chrome_contrast¶
An opaque near-black in light (#171717) and near-white in dark (#F2F2F2).
black_100¶
Opaque black in both themes.
black_20¶
Black at 20 % in both themes.
black_40¶
Black at 40 % in both themes.
black_80¶
Black at 80 % in both themes.
chrome_disabled_faint¶
An opaque gray for disabled chrome such as a disabled slider: #CCCCCC in light, #333333 in dark.
chrome_disabled_strong¶
The other disabled-chrome gray, also a text field's border: #7A7A7A in light, #858585 in dark.
chrome_strong¶
The strongest opaque chrome gray, the window border and a pressed slider thumb: #CCCCCC in light, #767676 in dark.
chrome_faint¶
The faintest opaque chrome surface: #F2F2F2 in light, #171717 in dark.
chrome_mid¶
A mid opaque chrome surface, the title bar: #E6E6E6 in light, #1F1F1F in dark.
chrome_flyout¶
Flyout, menu and tooltip backgrounds: #F2F2F2 in light, #2B2B2B in dark.
white_100¶
Opaque white in both themes, text on an accent fill.
list_hover¶
The text color at 10 %, a list row or menu item under the pointer.
list_pressed¶
The text color at 20 %, a list row pressed.
page_background¶
The page background: #FFFFFFFF in light and #FF000000 in dark. A field of its own, although it equals page_100.
mdl2_light¶
The light palette: black text colors over a white page, and light-gray chrome.
mdl2_dark¶
The dark palette: white text colors over a black page. It is the era's default theme. The era's guidance is light for productivity apps, dark for media apps, and the system setting if neither fits.