What's the recommend way to use Lightweight Styling in WinUI?

Question

XAML (UWP & WinUI) offers lightweight styling, which lets developers override specific, named, brushes/resources for common controls. You can get a list of those resources by looking at the control's default template (accessible in Visual Studio).

For example, offered on XAML's documentation:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

However, this example doesn't answer a few of my questions:

• What should I do for non-light theme styles, like Dark mode & High Contrast?
• Do I have to define my own SolidColorBrushs? Can I use existing brushes, like the ones documented in WinUI gallery?
• How do I override non-theme-specific resources? Like Thicknesses.

In short, what's an end-to-end example of lightweight styling that includes what I need to satisfy accessibility & use standard resources?

Answer 1

You can also define "Dark", "HighContrast" if you need to. And you can also override (or make overrideable) other properties.

For example:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush
                    x:Key="ButtonBackground"
                    Color="Transparent" />
                <SolidColorBrush
                    x:Key="ButtonForeground"
                    Color="GreenYellow" />
                <SolidColorBrush
                    x:Key="ButtonBorderBrush"
                    Color="GreenYellow" />
                <Thickness x:Key="ButtonBorderThemeThickness">10</Thickness>
                <x:String x:Key="MyButtonContent">DARK!</x:String>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush
                    x:Key="ButtonBackground"
                    Color="Transparent" />
                <SolidColorBrush
                    x:Key="ButtonForeground"
                    Color="MediumSlateBlue" />
                <SolidColorBrush
                    x:Key="ButtonBorderBrush"
                    Color="MediumSlateBlue" />
                <Thickness x:Key="ButtonBorderThemeThickness">1</Thickness>
                <x:String x:Key="MyButtonContent">LIGHT!</x:String>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>

        <Style TargetType="Button">
            <Setter Property="Content" Value="{ThemeResource MyButtonContent}" />
        </Style>
    </ResourceDictionary>
</Page.Resources>