使用FluentAvaloniaTheme时Avalonia中LiveChartsCore图表主题无法切换

核心原因 #

LiveChartsCore的默认渲染系统不会自动感知Avalonia的ThemeVariant变化，它的轴文本、刻度线等颜色逻辑独立于Avalonia主题资源，因此切换主题时无法同步更新。

方案一：绑定Avalonia主题资源到LiveCharts（推荐） #

直接复用FluentAvalonia内置的主题资源，将LiveCharts的颜色属性绑定到这些资源上，主题切换时资源自动更新，图表颜色也会同步变化。

步骤1：实现Brush转SKColor转换器 #

因为LiveCharts使用SKColor定义颜色，而Avalonia主题资源是Brush类型，需要一个转换器做类型转换：

using Avalonia.Data.Converters;
using Avalonia.Media;
using SkiaSharp;
using System;

namespace MyApp.Converters;
public class BrushToSKColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is SolidColorBrush brush)
        {
            return brush.Color.ToSKColor();
        }
        return SKColors.Black; //  fallback值
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

步骤2：在用户控件中绑定主题资源 #

修改MyUC.axaml，引入转换器并将轴的文本、刻度线颜色绑定到FluentAvalonia的主题资源：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vm="using:MyApp.ViewModels"
             xmlns:conv="using:MyApp.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="MyApp.Views.MyUC"
             x:DataType="vm:TheVM">
  <UserControl.Resources>
    <conv:BrushToSKColorConverter x:Key="BrushToSKColor"/>
  </UserControl.Resources>

  <lvc:CartesianChart TooltipPosition="Hidden" Series="{Binding BarSeries}">
    <lvc:CartesianChart.XAxes>
      <lvc:Axis MinLimit="40" MaxLimit="97" ForceStepToMin="True" MinStep="2"
                ShowSeparatorLines="True" TextSize="18"
                TextPaint="{Binding Source={StaticResource SystemControlForegroundBaseHighBrush}, Converter={StaticResource BrushToSKColor}}"
                SeparatorsPaint="{Binding Source={StaticResource SystemControlForegroundBaseMediumBrush}, Converter={StaticResource BrushToSKColor}}"/>
    </lvc:CartesianChart.XAxes>
    <lvc:CartesianChart.YAxes>
      <lvc:Axis Labels="Bar 1,Bar 2,Bar 3,Bar 4,Bar 5,Bar 6" IsInverted="True" TextSize="18"
                TextPaint="{Binding Source={StaticResource SystemControlForegroundBaseHighBrush}, Converter={StaticResource BrushToSKColor}}"
                SeparatorsPaint="{Binding Source={StaticResource SystemControlForegroundBaseMediumBrush}, Converter={StaticResource BrushToSKColor}}"/>
    </lvc:CartesianChart.YAxes>
  </lvc:CartesianChart>
</UserControl>

这里用到的SystemControlForegroundBaseHighBrush和SystemControlForegroundBaseMediumBrush是FluentAvalonia内置的主题资源，会自动跟随明暗主题切换颜色。

方案二：监听ThemeVariant变化，切换LiveCharts全局主题 #

通过监听窗口的主题变化事件，调用LiveCharts的全局配置方法切换主题，再通知图表刷新。

步骤1：在MainWindow中监听主题变化 #

修改MainWindow后台代码，添加主题监听与配置逻辑：

using Avalonia.Controls;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView.Avalonia;

namespace MyApp.Views;
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        // 初始配置主题
        ConfigureLiveChartsTheme(ActualThemeVariant);
        // 监听主题变化
        ActualThemeVariantChanged += MainWindow_ActualThemeVariantChanged;
    }

    private void MainWindow_ActualThemeVariantChanged(object? sender, EventArgs e)
    {
        ConfigureLiveChartsTheme(ActualThemeVariant);
        // 通知图表刷新（需根据你的VM结构调整）
        if (DataContext is MainViewModel mainVm)
        {
            mainVm.RefreshCharts();
        }
    }

    private void ConfigureLiveChartsTheme(ThemeVariant variant)
    {
        LiveCharts.Configure(config =>
        {
            config.ClearThemes();
            if (variant == ThemeVariant.Dark)
            {
                config.AddDarkTheme();
            }
            else
            {
                config.AddLightTheme();
            }
            // 保留原有配置
            config.AddAvalonia().AddSkiaSharp().AddDefaultMappers();
        });
    }
}

步骤2：让ViewModel触发图表刷新 #

在TheVM中添加刷新方法，触发属性变更通知以让图表重新渲染：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;

namespace MyApp.ViewModels;
public partial class TheVM : ObservableObject
{
    // ... 现有代码 ...

    [RelayCommand]
    public void RefreshCharts()
    {
        OnPropertyChanged(nameof(BarSeries));
        OnPropertyChanged(nameof(TheXAxes));
        OnPropertyChanged(nameof(TheYAxes));
    }
}

为什么之前的方法无效 #

你尝试的ThemeVariantScope方案无效，是因为LiveChartsCore的控件并未读取Avalonia的ThemeVariant来切换自身颜色方案，它的主题系统是独立实现的，因此即使在Scope内切换主题，LiveCharts也无法感知到变化。

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