如何扩展MudBlazor调色板类？.NET7 Blazor WASM技术问询

1. 创建自定义调色板类 #

派生MudPalette类，新增适配明暗模式的自定义颜色组，比如专门给图表用的颜色：

public class CustomPalette : MudPalette
{
    // 新增图表专用调色板，区分明暗模式
    public ChartPalette ChartColors { get; set; } = new ChartPalette();

    public class ChartPalette
    {
        // 亮色模式颜色
        public MudColor Blue { get; set; } = new MudColor("#2196F3");
        public MudColor Green { get; set; } = new MudColor("#4CAF50");
        // 暗色模式对应颜色
        public MudColor BlueDark { get; set; } = new MudColor("#1976D2");
        public MudColor GreenDark { get; set; } = new MudColor("#388E3C");
        // 可按需添加更多颜色
    }
}

2. 注册自定义调色板 #

在Program.cs中配置MudBlazor服务时，替换默认调色板为自定义实例：

builder.Services.AddMudServices(config =>
{
    config.CustomPalette = new CustomPalette();
});

3. 在C#代码中访问自定义颜色 #

通过注入IMudTheme获取自定义调色板实例，直接使用新增颜色：

@inject IMudTheme MudTheme

<!-- 在组件中直接使用 -->
<MudButton Color="@((MudTheme.Palette as CustomPalette).ChartColors.Blue)">
    图表蓝色按钮
</MudButton>

@code {
    private void ApplyChartColors()
    {
        var customPalette = MudTheme.Palette as CustomPalette;
        if (customPalette == null) return;
        
        // 获取颜色用于图表渲染
        var chartBlue = customPalette.ChartColors.Blue;
        var chartGreenDark = customPalette.ChartColors.GreenDark;
    }
}

4. 在CSS类中访问自定义颜色 #

MudBlazor不会自动将自定义颜色注入CSS变量，需要手动注册：

步骤4.1 注册CSS变量 #

在MainLayout.razor中注入IMudTheme，为明暗模式分别注册CSS变量：

@inject IMudTheme MudTheme

@code {
    protected override void OnInitialized()
    {
        var customPalette = MudTheme.Palette as CustomPalette;
        if (customPalette == null) return;

        // 亮色模式变量
        MudTheme.Styles.Add(":root", new Dictionary<string, string>
        {
            {"--mud-chart-blue", customPalette.ChartColors.Blue.Value},
            {"--mud-chart-green", customPalette.ChartColors.Green.Value}
        });

        // 暗色模式变量
        MudTheme.Styles.Add("[data-mud-theme=dark]", new Dictionary<string, string>
        {
            {"--mud-chart-blue", customPalette.ChartColors.BlueDark.Value},
            {"--mud-chart-green", customPalette.ChartColors.GreenDark.Value}
        });

        base.OnInitialized();
    }
}

步骤4.2 在CSS中使用变量 #

在全局样式文件（如wwwroot/css/app.css）中定义类，使用注册好的CSS变量：

/* 图表蓝色柱状图样式 */
.chart-bar-blue {
    background-color: var(--mud-chart-blue);
    border-color: var(--mud-chart-blue);
}

/* 图表绿色折线样式 */
.chart-line-green {
    stroke: var(--mud-chart-green);
    fill: transparent;
    stroke-width: 2;
}

5. 明暗模式自动适配 #

MudBlazor切换主题时，会自动切换[data-mud-theme]属性，之前注册的CSS变量会自动生效，无需额外处理。

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