MAUI 实现暗黑模式切换,核心是利用 AppTheme 和系统级主题监听机制,配合资源字典动态更新 UI 颜色与样式。不依赖第三方库,官方已原生支持。
设置应用支持多主题
在 MauiProgram.cs 中启用主题能力:
确保调用UseMauiApp<app>()</app>前已配置主题支持(MAUI 7+ 默认开启) 可显式设置默认主题:`builder.Services.Configure(options => options.Theme = AppTheme.Unspecified);` AppTheme.Unspecified 表示跟随系统;Light 或 Dark 则强制指定
定义亮/暗双套颜色资源
在 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 一致、监听到位、切换后及时刷新资源树。
