如何在MAUI应用中正确配置Microsoft Fluent Design色彩？

一、MAUI通用色彩定义基础 #

直接在App.xaml的资源字典中定义Fluent风格的色彩资源，后续在XAML控件中通过StaticResource或DynamicResource引用：

<Application.Resources>
    <ResourceDictionary>
        <!-- 基础Fluent色彩定义 -->
        <Color x:Key="FluentPrimary">#0078D4</Color>
        <Color x:Key="FluentPrimaryLight">#409CFE</Color>
        <Color x:Key="FluentPrimaryDark">#005A9E</Color>
        <Color x:Key="FluentNeutralForeground1">#111111</Color>
        <Color x:Key="FluentNeutralBackground1">#FFFFFF</Color>
    </ResourceDictionary>
</Application.Resources>

如果需要适配明暗主题，可通过合并主题专属资源字典实现：

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources/Styles/LightThemeColors.xaml" />
        <ResourceDictionary Source="Resources/Styles/DarkThemeColors.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

在主题字典中分别定义对应主题下的色彩值，MAUI会自动根据系统主题切换。

二、WinUI 3平台的Fluent规范适配 #

1. 复用WinUI内置Fluent语义槽 #

WinUI 3内置了符合Fluent Design的系统色彩资源，可直接在MAUI的WinUI项目中引用，这些资源会自动跟随系统主题变化：

<!-- 直接引用WinUI系统色彩 -->
<Button Background="{StaticResource SystemAccentColor}"
        Foreground="{StaticResource SystemAccentForegroundColor}" />

常用的内置语义槽包括：SystemAccentColor、SystemChromeMediumColor、SystemNeutralForeground1、SystemNeutralBackground1等，对应Fluent设计中的交互、文本、背景层级。

2. 自定义Fluent语义槽（对齐Theme Designer） #

如果需要基于Fluent UI Theme Designer生成的自定义色彩体系，可将生成的语义槽映射为MAUI资源：

1. 在Theme Designer中配置品牌色、中性色，导出色彩值；
2. 在MAUI的资源字典中按Fluent的语义命名定义色彩，同时区分明暗主题：

<!-- 亮色主题下的自定义语义槽 -->
<Color x:Key="FluentBrandPrimaryLight">#0078D4</Color>
<Color x:Key="FluentBrandSecondaryLight">#005A9E</Color>
<!-- 暗色主题下的自定义语义槽 -->
<Color x:Key="FluentBrandPrimaryDark">#409CFE</Color>
<Color x:Key="FluentBrandSecondaryDark">#6CB4FF</Color>

使用AppThemeBinding实现主题自动切换：

<Button Background="{AppThemeBinding Light={StaticResource FluentBrandPrimaryLight}, Dark={StaticResource FluentBrandPrimaryDark}}" />

3. 复刻WinUI系统色彩清单 #

参考WinUI的系统色彩结构，可在MAUI中构建自己的Fluent色彩资源层级，确保色彩使用符合Fluent的视觉层级规则：

• 文本色彩：按优先级定义ForegroundPrimary、ForegroundSecondary、ForegroundTertiary；
• 背景色彩：定义BackgroundPrimary、BackgroundSecondary、BackgroundTertiary；
• 交互色彩：定义AccentPrimary、AccentHover、AccentPressed。

三、跨平台区分处理 #

针对Android平台，可单独使用Material 3库的色彩体系，通过MAUI的平台特定资源实现隔离：

• 在Android平台的资源文件中定义Material 3色彩；
• 在WinUI平台的App.xaml中定义专属的Fluent色彩；
• 在共用XAML中通过OnPlatform绑定不同平台的资源：

<Button Background="{OnPlatform WinUI={StaticResource FluentPrimary}, Android={StaticResource MaterialPrimary}}" />

四、注意事项 #

• 自定义色彩时需遵循Fluent的对比度要求，确保文本与背景的可读性，Fluent UI Theme Designer生成的色彩已满足WCAG标准；
• 搭配Mica效果时，背景色需使用半透明值，避免遮挡毛玻璃效果，比如#CCFFFFFF（亮色主题）或#CC000000（暗色主题）；
• 若不想手动定义，可寻找社区维护的MAUI Fluent主题库，直接复用预定义的色彩与样式。

内容的提问来源于stack exchange，提问作者Veksi