MAUI自定义多主题实现：页面背景与文本颜色动态切换方法

针对你的需求，我们可以搭建一个灵活的自定义主题管理机制，支持任意数量的主题扩展，且完全适配你现有XAML中的DynamicResource绑定。以下是具体实现步骤：

1. 创建主题管理类 #

首先定义一个全局的主题管理类，负责存储所有主题的颜色配置，并提供切换主题的方法：

using Microsoft.Maui.Graphics;
using System.Collections.Generic;

public static class ThemeManager
{
    // 定义主题类型枚举，后续扩展只需添加新枚举值
    public enum ThemeType
    {
        Light,
        Dark,
        Warm
    }

    // 存储所有主题的颜色键值对
    private static readonly Dictionary<ThemeType, Dictionary<string, Color>> _themeConfigs = new()
    {
        {
            ThemeType.Light,
            new Dictionary<string, Color>
            {
                { "Background", Colors.White },
                { "DarkerTextColor", Colors.Black }
            }
        },
        {
            ThemeType.Dark,
            new Dictionary<string, Color>
            {
                { "Background", Colors.Gray900 },
                { "DarkerTextColor", Colors.White }
            }
        },
        {
            ThemeType.Warm,
            new Dictionary<string, Color>
            {
                { "Background", Colors.Orange100 },
                { "DarkerTextColor", Colors.Brown800 }
            }
        }
    };

    // 切换主题的核心方法
    public static void ApplyTheme(ThemeType targetTheme)
    {
        var themeColors = _themeConfigs[targetTheme];
        var appResources = Application.Current.Resources;

        foreach (var (resourceKey, colorValue) in themeColors)
        {
            if (appResources.ContainsKey(resourceKey))
            {
                appResources[resourceKey] = colorValue;
            }
            else
            {
                appResources.Add(resourceKey, colorValue);
            }
        }
    }
}

2. 初始化默认主题 #

在App.xaml.cs的构造函数或OnStart方法中，设置应用启动时的默认主题：

public App()
{
    InitializeComponent();
    // 启动时默认应用浅色主题
    ThemeManager.ApplyTheme(ThemeManager.ThemeType.Light);
    MainPage = new MainPage();
}

3. 添加主题切换UI控件 #

在你的内容页中添加主题选择控件（比如Picker），触发主题切换：

<Picker x:Name="ThemeSelector"
        Title="选择主题"
        SelectedIndexChanged="OnThemeSelected">
    <Picker.ItemsSource>
        <x:Array Type="{x:Type local:ThemeManager+ThemeType}">
            <local:ThemeManager+ThemeType>Light</local:ThemeManager+ThemeType>
            <local:ThemeManager+ThemeType>Dark</local:ThemeManager+ThemeType>
            <local:ThemeManager+ThemeType>Warm</local:ThemeManager+ThemeType>
        </x:Array>
    </Picker.ItemsSource>
</Picker>

然后在页面后台代码中处理切换事件：

private void OnThemeSelected(object sender, EventArgs e)
{
    if (sender is Picker picker && picker.SelectedItem is ThemeManager.ThemeType selectedTheme)
    {
        ThemeManager.ApplyTheme(selectedTheme);
    }
}

4. 保留原有XAML绑定 #

你的现有布局代码无需修改，因为已经使用了DynamicResource绑定，主题切换时资源字典会自动更新，UI会实时响应颜色变化：

<Grid
    x:Name="TopOverlay"
    AbsoluteLayout.LayoutBounds="0,0,1,0.08"
    AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"
    BackgroundColor="{DynamicResource Background}" />

<Label
    Padding="7,0"
    FontAutoScalingEnabled="False"
    FontSize="{Binding Source={RelativeSource AncestorType={x:Type local:ModalReaderViewModel}}, Path=FontSize}"
    LineBreakMode="WordWrap"
    Text="{Binding .}"
    TextColor="{DynamicResource DarkerTextColor}" />

5. 扩展主题（可选） #

后续需要新增主题时，只需两步：

1. 在ThemeType枚举中添加新的主题名称，比如Cool
2. 在_themeConfigs字典中添加对应主题的颜色键值对：

{
    ThemeType.Cool,
    new Dictionary<string, Color>
    {
        { "Background", Colors.SkyBlue100 },
        { "DarkerTextColor", Colors.DarkBlue }
    }
}

6. 持久化用户主题选择（可选） #

如果需要记住用户的主题偏好，可以使用MAUI的Preferences存储：

// 切换主题时保存
Preferences.Set("ActiveTheme", selectedTheme.ToString());

// App启动时读取
if (Preferences.ContainsKey("ActiveTheme"))
{
    if (Enum.TryParse<ThemeManager.ThemeType>(Preferences.Get("ActiveTheme", ""), out var savedTheme))
    {
        ThemeManager.ApplyTheme(savedTheme);
    }
}

内容的提问来源于stack exchange，提问作者red_panda