CODEWITHSUNDEEP
xamlwinui-3winuiwindows-app-sdk
brainer33
brainer33

Reputation: 29

How can I set some colors that take the dark/ light mode toggle into account?

I created a WinUI 3 project with a template. It offers the ability to switch between dark and light modes with the use of ElementTheme.Dark/ElementTheme.Light. How can I, for example, set a slightly different background color to a StackPanel than the StackPanel that surrounds it, without always taking the toggle into account with extra code? For instance, I tried

<StackPanel Background="{ThemeResource SystemAccentColorLight2}">

but that does not change its color in dark mode.

Upvotes: 1

Views: 1621

Answers (2)

YangXiaoPo-MSFT
YangXiaoPo-MSFT

Reputation: 2130

You need to define Theme-dependent brushes. By defining the same name in both "Light" and "Dark" resource dictionaries,

when this brush is applied to a XAML element, its color is determined at run-time by the current theme, as shown in this table.

For example, microsoft-ui-xaml/dev/NavigationView /NavigationView_rs1_themeresources_v1.xaml.

Upvotes: 0

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

You can create a ThemeResource, let's say CustomStackPanelBackground.

For example, in App.xaml for the entire app:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary Source="/Styles/FontSizes.xaml" />
            <ResourceDictionary Source="/Styles/Thickness.xaml" />
            <ResourceDictionary Source="/Styles/Styles.xaml" />
            <ResourceDictionary Source="/Styles/TextBlocks.xaml" />
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush
                            x:Key="CustomBackground"
                            Color="HotPink" />
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush
                            x:Key="CustomBackground"
                            Color="SkyBlue" />
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

or if you just want to use it within a Page:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush
                    x:Key="CustomBackground"
                    Color="LightGreen" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush
                    x:Key="CustomBackground"
                    Color="SkyBlue" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

and actually use it like this:

<Grid Background="{ThemeResource CustomBackground}">
...
</Grid>

Upvotes: 3

Related Questions