Blazor ApexCharts深色模式下Tooltip与Toolbar不可见问题求助

问题描述 #

在使用Blazor ApexCharts NuGet包时，遇到深色模式下Tooltip和Toolbar显示异常的问题：即使将图表主题强制设置为浅色模式，切换到系统/应用深色模式时，Tooltip和Toolbar的文本颜色仍会从黑色变为白色，导致内容难以辨认。目前已通过自定义CSS临时修复：

.apexcharts-tooltip {
    background: #f3f3f3;
    color: black;
}

.apexcharts-menu {
    color: black;
}

图表效果对比：

• 浅色模式：Tooltip和Toolbar文本为黑色、背景浅色，显示正常
• 深色模式：Tooltip和Toolbar文本变为白色，与浅色背景冲突，显示模糊

当前使用的Razor代码如下：

@page "/myApprovals"

<MudGrid>
    <MudItem xs="12" sm="6">
         <div Style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%);">
<ApexChart TItem="Order"
           Title="Detailed Risk view for each application"
           Options=options>

    <ApexPointSeries TItem="Order"
                     Items="Orders"
                     Name="Average Value"
                     XValue="e => e.Category"
                     SeriesType="SeriesType.Bar"
                     YValue="e => e.Average"
                     OrderByDescending="e=>e.Y"
                     Color="#003399" />

</ApexChart>
</div>
</MudItem></MudGrid>

@code {
    private ApexChartOptions<Order> options;
    private List<Order> Orders { get; set; } = new List<Order>();

    private Dictionary<string, int> averageMap = new Dictionary<string, int>
    {
        { "Mitigation Plan to complete", 2 },
        { "Request where additional information is required", 2 },
        { "Assessment summary yet to be acknowledged", 1 },
        { "Saved and Draft Assessments", 2 },
        { "Assessments pending for approvals", 3 },
    };

    protected override void OnInitialized()
    {
        Orders = averageMap.Select(kv => new Order { Category = kv.Key, Average = kv.Value }).ToList();
        base.OnInitialized();
        options = new ApexChartOptions<Order>
        {
            PlotOptions = new PlotOptions
            {
                Bar = new PlotOptionsBar
                {
                    Horizontal = true
                }
            },
            Theme = new Theme
            {
                Mode = Mode.Light,
                Palette = PaletteType.Palette1
            }
        };
    }

    public class Order
    {
        public string Category { get; set; }
        public int Average { get; set; }
    }
} 

标准解决方案 #

1. 通过ApexCharts配置项强制覆盖Tooltip和Toolbar样式 #

利用组件内置的配置API，直接在ApexChartOptions中定义Tooltip和Toolbar的样式，避免依赖全局CSS，同时确保样式不受外部主题切换影响：

修改OnInitialized中的options配置：

options = new ApexChartOptions<Order>
{
    PlotOptions = new PlotOptions
    {
        Bar = new PlotOptionsBar
        {
            Horizontal = true
        }
    },
    Theme = new Theme
    {
        Mode = Mode.Light,
        Palette = PaletteType.Palette1
    },
    // 配置Tooltip样式
    Tooltip = new Tooltip
    {
        Style = new TooltipStyle
        {
            Background = "#f3f3f3",
            Color = "#000000"
        },
        Theme = TooltipTheme.Light
    },
    // 配置Toolbar样式
    Toolbar = new Toolbar
    {
        Tools = new ToolbarTools
        {
            Download = new ToolbarButton
            {
                Style = new ToolbarButtonStyle
                {
                    Color = "#000000"
                }
            },
            Zoom = new ToolbarButton
            {
                Style = new ToolbarButtonStyle
                {
                    Color = "#000000"
                }
            }
            // 其他工具按钮可同理配置颜色
        },
        Menu = new ToolbarMenu
        {
            Style = new ToolbarMenuStyle
            {
                Background = "#f3f3f3",
                Color = "#000000"
            }
        }
    }
};

2. 隔离图表容器的样式继承 #

如果应用使用了全局深色模式样式（如color-scheme: dark），可为图表容器添加样式隔离，阻止外部主题样式渗透：

修改图表所在的div：

<div style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%); color-scheme: light;">
    <ApexChart ... />
</div>

3. 监听主题切换事件同步图表主题（可选） #

若需根据应用主题动态切换图表样式，而非强制浅色模式，可监听Blazor主题变化事件，实时更新ApexChartOptions：

[Inject] private IMudThemeService ThemeService { get; set; }

protected override async Task OnInitializedAsync()
{
    Orders = averageMap.Select(kv => new Order { Category = kv.Key, Average = kv.Value }).ToList();
    ThemeService.ThemeChanged += OnThemeChanged;
    await UpdateChartTheme(ThemeService.CurrentTheme);
}

private async Task UpdateChartTheme(MudTheme theme)
{
    var isDark = theme.Palette.IsDark;
    options.Theme.Mode = isDark ? Mode.Dark : Mode.Light;
    options.Tooltip.Theme = isDark ? TooltipTheme.Dark : TooltipTheme.Light;
    await StateHasChangedAsync();
}

private void OnThemeChanged(object sender, EventArgs e)
{
    _ = UpdateChartTheme(ThemeService.CurrentTheme);
}

public void Dispose()
{
    ThemeService.ThemeChanged -= OnThemeChanged;
}

方案优势 #

• 基于组件原生配置，避免全局CSS冲突，维护性更强
• 样式与图表配置绑定，不会因外部主题切换意外失效
• 支持动态主题切换，适配不同应用场景

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