MAUI怎么实现应用的深色和浅色模式 MAUI Dark Mode教程

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

MAUI 应用默认会跟随系统主题自动切换深色/浅色模式，但需要正确配置资源、设置启动行为，并处理手动切换逻辑。关键在于理解

AppTheme

的作用机制和资源字典的加载时机。

启用系统级自动适配

MAUI 从 .NET 6 起内置支持系统主题监听。只要不强制覆盖

App.Current.RequestedTheme

，应用启动时就会读取系统设置并自动匹配。

确保
MauiProgram.cs
中未调用
App.Current.RequestedTheme = AppTheme.Dark
或类似硬编码在 Android 上，需确认
AndroidManifest.xml
中未禁用夜间模式（如移除
android:forceDarkAllowed="false"
） iOS 和 Windows 无需额外配置，系统 API 会自动上报主题变化

定义深色/浅色专用资源

把颜色、字体等主题敏感资源写在

Resources/Styles/Colors.xaml

和

Resources/Styles/Colors.Dark.xaml

两个文件中，MAUI 会按需加载。

Colors.xaml
放浅色模式值，例如：
<color x:key="PrimaryColor">#2E5DFF</color>

Colors.Dark.xaml
放深色模式值，例如：
<color x:key="PrimaryColor">#4A7BFF</color>
两个文件都需在
MauiProgram.cs
中通过
ConfigureFonts
或
ConfigureEssentials
注册，但 MAUI 会自动识别后缀并按主题加载

手动切换主题（可选）

如果需要加“切换按钮”，用代码控制主题即可，MAUI 会立即刷新 UI。

切换到深色：
App.Current.UserAppTheme = AppTheme.Dark;
切换到浅色：
App.Current.UserAppTheme = AppTheme.Light;
设为跟随系统：
App.Current.UserAppTheme = AppTheme.Unspecified;
建议把按钮逻辑封装成命令，在 ViewModel 中触发，并监听
App.Current.OnAppThemeChanged
做状态同步

适配自定义控件和 WebView

系统控件（Button、Label 等）会自动响应主题变化，但自定义渲染器或 WebView 需单独处理。

WebView 加载 HTML 时，可通过 JS 检测
prefers-color-scheme
媒体查询动态切样式自定义
Handler
渲染时，在
ConnectHandler
中监听
App.Current.OnAppThemeChanged
并重绘使用
VisualStateManager
为控件定义 Dark/Light 状态，比硬编码更灵活

基本上就这些。不需要第三方库，MAUI 自带能力已足够稳定。重点是资源命名规范 + 不干扰默认主题流，就能让深色模式平滑运行。