mcpField
M
maui-theming

maui-theming

github.com/davidortinau设计与 UI17667 次安装17 周前更新
代码仓库

关于 maui-theming

为 .NET MAUI 应用提供主题设置指导,说明如何支持系统浅色和深色模式及运行时切换自定义主题。面向应用开发者,重点包括方案选择和平台相关注意事项。

主要功能

  1. 01用 AppThemeBinding 适配系统明暗模式
  2. 02通过 ResourceDictionary 设置自定义主题
  3. 03组合系统主题与自定义主题
  4. 04用 DynamicResource 实现运行时切换
  5. 05说明 Android UiMode 配置要求

适用场景

  1. 01添加自动浅色和深色主题
  2. 02在运行时切换品牌主题
  3. 03避免 Android 切换主题时重启活动

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/davidortinau/maui-skills --skill maui-theming

安装后在 Claude Code 中输入/maui-theming确认已加载。

附带文件references/theming-api.md

详细介绍

.NET MAUI 主题设置

选择适合你的方案

方案最适合局限性
AppThemeBinding根据操作系统自动切换浅色/深色主题——代码最少仅支持两种主题(浅色 + 深色)
ResourceDictionary swap自定义品牌主题、超过两种主题、用户偏好需要更多设置,必须在所有地方使用 DynamicResource
两者结合自动响应操作系统 + 自定义主题颜色灵活性最高,但也最复杂

关键注意事项

Android:必须设置 ConfigChanges.UiMode

MainActivity 必须包含 ConfigChanges.UiMode,否则主题变更事件不会触发,Activity 会重启,而不是处理主题变更:

[Activity(Theme = "@style/Maui.SplashTheme",
          MainLauncher = true,
          ConfigurationChanges = ConfigChanges.ScreenSize
                               | ConfigChanges.Orientation
                               | ConfigChanges.UiMode  // ← Required for theme detection
                               | ConfigChanges.ScreenLayout
                               | ConfigChanges.SmallestScreenSize
                               | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity { }

如果没有 UiMode,在 Android 设置中切换深色模式会导致整个 Activity 重启——导航状态会丢失,用户也会以为应用崩溃了。

运行时无法切换 CSS 主题

MAUI 支持 CSS 样式,但无法动态切换基于 CSS 的主题。运行时切换请使用 ResourceDictionary 主题设置。

DynamicResource 与 StaticResource

使用 ResourceDictionary 切换主题时,必须使用 DynamicResource:


<Label TextColor="{DynamicResource PrimaryTextColor}" />


<Label TextColor="{StaticResource PrimaryTextColor}" />

快速参考

  • 操作系统浅色/深色主题 → AppThemeBinding 标记扩展
  • C# 中的主题颜色 → SetAppThemeColor()、SetAppTheme<T>()
  • 读取操作系统主题 → Application.Current.RequestedTheme
  • 强制设置主题 → Application.Current.UserAppTheme = AppTheme.Dark
  • 主题变更 → RequestedThemeChanged 事件
  • 自定义切换 → 在 MergedDictionaries 中替换 ResourceDictionary
  • 运行时绑定 → DynamicResource(而不是 StaticResource)

评论

支持 Markdown