MAUI应用中能否基于AppTheme为SVG图标设置条件<style>样式？

可以实现单个SVG文件根据MAUI应用的主题状态动态调整样式，无需创建两份独立文件，以下是两种可行方案：

方案1：结合MAUI主题绑定与SVG CSS变量 #

1. 在SVG文件内部定义CSS变量作为颜色占位符：

   <svg xmlns="http://www.w3.org/2000/svg">
       <style>
           :root { --icon-fill: #000; }
           path { fill: var(--icon-fill); }
       </style>
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
   </svg>
   

2. 在MAUI的资源字典中，通过AppThemeBinding定义不同主题下的颜色值，并绑定到SVG控件的颜色属性：

   <ResourceDictionary>
       <Color x:Key="IconFillLight">#000000</Color>
       <Color x:Key="IconFillDark">#FFFFFF</Color>
       <Style TargetType="toolkit:SvgImage">
           <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource IconFillLight}, Dark={StaticResource IconFillDark}}" />
       </Style>
   </ResourceDictionary>
   

3. 使用支持CSS变量绑定的SVG控件（如MAUI Community Toolkit的SvgImage）加载该SVG文件，控件会自动将绑定的颜色注入到SVG的CSS变量中。

方案2：动态修改SVG的类名切换样式 #

1. 在SVG内部编写主题对应的类选择器样式：

   <svg xmlns="http://www.w3.org/2000/svg" class="icon">
       <style>
           .icon.light path { fill: #000; }
           .icon.dark path { fill: #fff; }
       </style>
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
   </svg>
   

2. 在MAUI代码中监听主题切换事件，动态修改SVG控件的类名：

   // 在页面构造或初始化方法中添加监听
   App.Current.RequestedThemeChanged += OnThemeChanged;
   
   private void OnThemeChanged(object sender, AppThemeChangedEventArgs e)
   {
       if (MySvgImage is ISvgStylable svgControl)
       {
           svgControl.ClassName = e.RequestedTheme == AppTheme.Dark ? "icon dark" : "icon light";
       }
   }
   

3. 确保使用的SVG控件支持修改类名（部分基于SkiaSharp的第三方SVG控件提供此能力）。

关键注意点 #

• 原生MAUI的Image控件不支持动态修改SVG样式，必须使用支持样式操作的第三方控件
• 测试时需覆盖手动切换主题、系统主题自动同步两种场景，确保样式响应正常

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