MAUI怎么实现暗黑模式切换 MAUI主题切换教程

来源:这里教程网 时间:2026-02-21 17:36:49 作者:

MAUI 实现暗黑模式切换,核心是利用 AppTheme 和系统级主题监听机制,配合资源字典动态更新 UI 颜色与样式。不依赖第三方库,官方已原生支持。

设置应用支持多主题

MauiProgram.cs 中启用主题能力:

确保调用
UseMauiApp<app>()</app>
前已配置主题支持(MAUI 7+ 默认开启)
可显式设置默认主题:`builder.Services.Configure(options => options.Theme = AppTheme.Unspecified);` AppTheme.Unspecified 表示跟随系统;LightDark 则强制指定

定义亮/暗双套颜色资源

Resources/Styles/Colors.xaml 中按主题分组声明:

x:Key
统一命名(如 `PrimaryColor`, `BackgroundColor`),不同
ResourceDictionary
下对应不同值
为 Light 和 Dark 主题分别建立
ResourceDictionary
,并用
Source
引入或直接内联
示例片段:
<ResourceDictionary x:Key="LightTheme">
  <Color x:Key="BackgroundColor">#FFFFFF</Color>
  <Color x:Key="TextColor">#000000</Color>
</ResourceDictionary>
<ResourceDictionary x:Key="DarkTheme">
  <Color x:Key="BackgroundColor">#121212</Color>
  <Color x:Key="TextColor">#FFFFFF</Color>
</ResourceDictionary>

动态响应系统主题变化

App.xaml.cs 中监听主题变更:

重写
OnAppThemeChanged
方法(继承自 Application)
手动触发资源刷新(尤其 Android/iOS 需主动通知):
Resources.MergedDictionaries.Clear(); Resources.MergedDictionaries.Add(new YourThemeDictionary());
也可绑定到
Application.Current.RequestedTheme
属性变化事件(需自行实现 INotifyPropertyChanged 监听)
注意:Windows 平台可能需额外处理高对比度模式,建议加条件判断

提供手动切换开关(可选)

在页面中添加切换按钮,控制 AppTheme:

设置
Application.Current.UserAppTheme = AppTheme.Dark;
AppTheme.Light;
该设置会覆盖系统偏好,且自动触发
OnAppThemeChanged
建议保存用户选择到
Preferences
,下次启动时读取并设置
UserAppTheme
示例保存逻辑:
Preferences.Set("app_theme", "Dark");

基本上就这些。MAUI 的暗黑模式切换不复杂但容易忽略资源字典的动态替换时机,重点是让颜色资源 Key 一致、监听到位、切换后及时刷新资源树。

相关推荐