如何在自定义组件中获取MudBlazor的当前活动调色板颜色？

核心思路 #

通过注入MudBlazor内置的IMudThemeProvider服务，获取当前生效的主题调色板（自动区分明暗模式），并监听主题变化事件，实现组件颜色的实时同步。

具体实现步骤 #

1. 注入主题服务 #

在自定义组件顶部注入服务，并实现IDisposable接口用于后续清理：

@inject IMudThemeProvider ThemeProvider
@implements IDisposable

2. 定义变量存储当前调色板 #

在组件代码块中声明变量，保存当前生效的调色板及业务逻辑变量：

private Palette _currentPalette = new();
// 示例：组件业务逻辑用的数值变量
private int _targetValue = -15;

3. 初始化与主题更新逻辑 #

添加初始化方法获取初始调色板，并订阅主题变化事件：

protected override async Task OnInitializedAsync()
{
    await UpdateActivePalette();
    // 订阅明暗模式切换事件
    ThemeProvider.ThemeChanged += OnThemeChanged;
}

private async Task UpdateActivePalette()
{
    // 获取当前应用的自定义主题（即你配置的_myTheme）
    var currentTheme = await ThemeProvider.GetCurrentThemeAsync();
    // 根据当前模式选择对应调色板
    _currentPalette = ThemeProvider.IsDarkMode ? currentTheme.PaletteDark : currentTheme.Palette;
    // 触发组件UI更新
    StateHasChanged();
}

// 主题变化时的回调方法
private async void OnThemeChanged(object? sender, EventArgs e)
{
    await UpdateActivePalette();
}

4. 清理事件订阅 #

实现IDisposable接口，避免内存泄漏：

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

5. 在组件中使用动态调色板 #

结合业务逻辑（比如数值正负），直接调用_currentPalette中的颜色值：

<div style="padding: 1rem; color:@(_targetValue > 0 ? _currentPalette.Success : _currentPalette.Error)">
    当前数值：@_targetValue
</div>

关键说明 #

• GetCurrentThemeAsync()会返回你在MudThemeProvider中配置的_myTheme，包含所有自定义调色板设置。
• ThemeProvider.IsDarkMode会实时同步MainLayout中绑定的_preferences.IsDarkMode状态。
• 明暗模式切换时，ThemeChanged事件自动触发，调用UpdateActivePalette刷新调色板与组件UI。

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