MAUI Popup如何适配深色/浅色模式切换？

全局样式配置 #

在App.xaml中定义全局资源与样式，实现弹窗的深浅主题适配，同时固定按钮的Primary颜色：

<ResourceDictionary>
    <!-- 固定的Primary颜色，不随主题变化 -->
    <Color x:Key="Primary">#2196F3</Color>
    
    <!-- 深浅主题对应的弹窗背景/文本色 -->
    <Color x:Key="LightPopupBg">#FFFFFF</Color>
    <Color x:Key="DarkPopupBg">#121212</Color>
    <Color x:Key="LightPopupText">#000000</Color>
    <Color x:Key="DarkPopupText">#FFFFFF</Color>

    <!-- Popup全局样式 -->
    <Style TargetType="toolkit:Popup">
        <Setter Property="BackgroundColor" 
                Value="{AppThemeBinding Light={StaticResource LightPopupBg}, Dark={StaticResource DarkPopupBg}}" />
    </Style>

    <!-- Popup专用Primary按钮样式 -->
    <Style TargetType="Button" x:Key="PopupPrimaryBtnStyle">
        <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="CornerRadius" Value="4" />
    </Style>
</ResourceDictionary>

在Popup中应用样式 #

创建弹窗时直接引用预定义样式：

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="YourApp.Views.YourPopup">
    <StackLayout Padding="20" Spacing="15">
        <Label Text="弹窗内容示例" 
               TextColor="{AppThemeBinding Light={StaticResource LightPopupText}, Dark={StaticResource DarkPopupText}}" />
        <Button Text="确认操作" Style="{StaticResource PopupPrimaryBtnStyle}" />
    </StackLayout>
</toolkit:Popup>

代码动态适配（可选） #

如果需要通过代码控制样式，可在Popup构造函数中根据当前主题设置：

public YourPopup()
{
    InitializeComponent();
    var currentTheme = Application.Current.RequestedTheme;
    BackgroundColor = currentTheme switch
    {
        AppTheme.Light => (Color)Application.Current.Resources["LightPopupBg"],
        AppTheme.Dark => (Color)Application.Current.Resources["DarkPopupBg"],
        _ => Colors.White
    };
    // 按钮颜色绑定固定Primary资源，无需额外修改
}

核心注意点 #

• Primary颜色资源需设置为全局固定值，不加入AppThemeBinding逻辑
• 弹窗的背景、文本等元素通过AppThemeBinding关联对应主题资源
• 按钮直接绑定固定的Primary资源，确保任何主题下颜色不变

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