如何在UWP应用中新增主题配色？保留原有模板主题

1. 定义自定义主题资源 #

你可以直接在App.xaml中新增主题资源，也可以单独创建资源字典文件（更便于维护）。

方式1：直接在App.xaml中添加 #

保留原有Light/Dark/Default主题的前提下，新增自定义主题的资源字典：

<ResourceDictionary.ThemeDictionaries>
    <!-- 保留原有主题 -->
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="SystemControlPageBackgroundChromeLowBrush" Color="White" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="SystemControlPageBackgroundChromeLowBrush" Color="Black" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="SystemControlPageBackgroundChromeLowBrush" Color="White" />
    </ResourceDictionary>
    <!-- 新增阅读障碍友好主题 -->
    <ResourceDictionary x:Key="DyslexiaFriendly">
        <!-- 柔和背景色 -->
        <SolidColorBrush x:Key="SystemControlPageBackgroundChromeLowBrush" Color="#FFF5F5DC" />
        <!-- 高对比度文字色 -->
        <SolidColorBrush x:Key="SystemControlForegroundBaseHighBrush" Color="#FF5C4033" />
        <!-- 按需覆盖其他控件样式的系统资源键 -->
        <SolidColorBrush x:Key="SystemControlBackgroundBaseLowBrush" Color="#FFF5F5DC" />
        <SolidColorBrush x:Key="SystemControlForegroundBaseMediumBrush" Color="#FF5C4033" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

方式2：单独创建资源字典文件 #

创建DyslexiaTheme.xaml文件，写入自定义资源：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="SystemControlPageBackgroundChromeLowBrush" Color="#FFF5F5DC"/>
    <SolidColorBrush x:Key="SystemControlForegroundBaseHighBrush" Color="#FF5C4033"/>
    <!-- 其他需要覆盖的系统资源 -->
</ResourceDictionary>

2. 添加主题切换UI #

在页面（比如MainPage.xaml）中添加选择控件，让用户切换主题：

<ComboBox x:Name="ThemeSelector" 
          SelectionChanged="ThemeSelector_SelectionChanged"
          Margin="20">
    <x:String>默认</x:String>
    <x:String>浅色</x:String>
    <x:String>深色</x:String>
    <x:String>阅读友好</x:String>
</ComboBox>

3. 实现主题切换逻辑 #

在页面后台代码（MainPage.xaml.cs）中处理选择事件，实现主题切换和用户偏好保存：

private void ThemeSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ThemeSelector.SelectedItem is not string selectedTheme) return;
    var app = Application.Current as App;

    // 移除已加载的自定义主题资源，避免重复加载
    var customDict = Application.Current.Resources.MergedDictionaries
        .FirstOrDefault(d => d.Source?.OriginalString.Contains("DyslexiaTheme") ?? false);
    if (customDict != null)
    {
        Application.Current.Resources.MergedDictionaries.Remove(customDict);
    }

    // 切换主题
    switch (selectedTheme)
    {
        case "默认":
            app.RequestedTheme = ApplicationTheme.Default;
            break;
        case "浅色":
            app.RequestedTheme = ApplicationTheme.Light;
            break;
        case "深色":
            app.RequestedTheme = ApplicationTheme.Dark;
            break;
        case "阅读友好":
            // 先恢复默认主题，再加载自定义资源覆盖
            app.RequestedTheme = ApplicationTheme.Default;
            var dyslexiaDict = new ResourceDictionary
            {
                Source = new Uri("ms-appx:///DyslexiaTheme.xaml")
            };
            Application.Current.Resources.MergedDictionaries.Add(dyslexiaDict);
            break;
    }

    // 保存用户选择，下次启动自动应用
    ApplicationData.Current.LocalSettings.Values["SelectedTheme"] = selectedTheme;
}

4. 启动时恢复用户偏好 #

在App.xaml.cs的OnLaunched方法中，读取保存的主题设置并应用：

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    // ... 原有启动代码 ...

    // 恢复用户之前选择的主题
    if (ApplicationData.Current.LocalSettings.Values.TryGetValue("SelectedTheme", out var savedThemeObj) &&
        savedThemeObj is string savedTheme)
    {
        var app = this;
        switch (savedTheme)
        {
            case "默认":
                app.RequestedTheme = ApplicationTheme.Default;
                break;
            case "浅色":
                app.RequestedTheme = ApplicationTheme.Light;
                break;
            case "深色":
                app.RequestedTheme = ApplicationTheme.Dark;
                break;
            case "阅读友好":
                app.RequestedTheme = ApplicationTheme.Default;
                var dyslexiaDict = new ResourceDictionary
                {
                    Source = new Uri("ms-appx:///DyslexiaTheme.xaml")
                };
                Resources.MergedDictionaries.Add(dyslexiaDict);
                break;
        }
    }
}

注意事项 #

• 要覆盖的系统资源键需要和UWP内置资源的键名一致，比如文本前景色常用SystemControlForegroundBaseHighBrush，页面背景用SystemControlPageBackgroundChromeLowBrush，可根据控件样式需求查找对应键名。
• 自定义主题的颜色选择建议遵循阅读障碍友好标准：高对比度、柔和背景（避免刺眼的纯白/纯黑）、清晰的文字颜色。

内容的提问来源于stack exchange，提问作者Nathan Cosbie-Ross