英文:
How can I set some colors that take the dark/ light mode toggle into account?
问题
我使用模板创建了一个WinUI 3项目。它提供了使用 ElementTheme.Dark
/ElementTheme.Light
切换暗模式和亮模式的能力。例如,我如何设置一个与包围它的 StackPanel
不同背景颜色的 StackPanel
,而不需要始终考虑切换并添加额外的代码?例如,我尝试过:
<StackPanel Background="{ThemeResource SystemAccentColorLight2}">
但在暗模式下它并不会改变颜色。
英文:
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.
答案1
得分: 2
你可以创建一个ThemeResource
,比如CustomStackPanelBackground。
例如,在整个应用程序的App.xaml
中:
<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>
或者如果你只想在一个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>
并且像这样使用它:
<Grid Background="{ThemeResource CustomBackground}">
...
</Grid>
英文:
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>
答案2
得分: 0
你需要定义主题相关的画笔。通过在"Light"和"Dark"资源字典中定义相同的名称,
当将此画笔应用于XAML元素时,其颜色在运行时由当前主题确定,如下表所示。
例如,microsoft-ui-xaml/dev/NavigationView
/NavigationView_rs1_themeresources_v1.xaml。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论