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

MAui应用默认跟随系统主题自动切换深色/浅色模式，需正确配置资源字典、避免硬编码RequestedTheme、注册Colors.xaml与Colors.Dark.xaml，并可通过UserappTheme手动切换或设为Unspecified以恢复系统跟随。

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 放浅色模式值，例如：#2E5DFF
• Colors.Dark.xaml 放深色模式值，例如：#4A7BFF
• 两个文件都需在 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 自带能力已足够稳定。重点是资源命名规范 + 不干扰默认主题流，就能让深色模式平滑运行。