MudBlazor如何实现全局跨页面且重启保留的明暗主题切换？

1. 创建全局主题状态服务 #

这个服务负责共享主题状态、处理持久化存储，并在状态变化时通知组件更新：

using System.ComponentModel;
using Microsoft.JSInterop;

public class ThemeStateService : INotifyPropertyChanged
{
    private bool _isDarkMode;
    private readonly IJSRuntime _jsRuntime;
    private const string StorageKey = "preferred-theme-mode";

    public bool IsDarkMode
    {
        get => _isDarkMode;
        set
        {
            if (_isDarkMode != value)
            {
                _isDarkMode = value;
                OnPropertyChanged(nameof(IsDarkMode));
                _ = SaveThemePreferenceAsync(value);
            }
        }
    }

    public ThemeStateService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
        _ = LoadThemePreferenceAsync();
    }

    private async Task SaveThemePreferenceAsync(bool isDark)
    {
        await _jsRuntime.InvokeVoidAsync("localStorage.setItem", StorageKey, isDark.ToString());
    }

    private async Task LoadThemePreferenceAsync()
    {
        var storedValue = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", StorageKey);
        if (bool.TryParse(storedValue, out var isDark))
        {
            _isDarkMode = isDark;
            OnPropertyChanged(nameof(IsDarkMode));
        }
        else
        {
            _isDarkMode = false; // 默认亮色模式
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 注册全局服务 #

在Program.cs中添加服务注册：

builder.Services.AddScoped<ThemeStateService>();

3. 全局布局中配置MudThemeProvider #

修改MainLayout.razor，将主题提供者放在全局布局中，确保所有页面共享主题状态：

@inherits LayoutComponentBase
@inject ThemeStateService ThemeState
@implements IDisposable

<MudThemeProvider @bind-IsDarkMode="@ThemeState.IsDarkMode" />

<MudLayout>
    <!-- 你的原有布局内容（侧边栏、导航栏等） -->
    @Body
</MudLayout>

@code {
    protected override void OnInitialized()
    {
        ThemeState.PropertyChanged += OnThemeChanged;
    }

    private void OnThemeChanged(object? sender, PropertyChangedEventArgs e)
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        ThemeState.PropertyChanged -= OnThemeChanged;
    }
}

4. 在Settings组件中添加切换开关 #

修改Settings.razor，直接绑定到全局服务的状态：

@inject ThemeStateService ThemeState

<MudSwitch @bind-Checked="@ThemeState.IsDarkMode" 
           Color="Color.Primary" 
           Class="ma-4" 
           Label="Toggle Light/Dark Mode" />

效果说明 #

• 全局生效：所有页面都会跟随ThemeStateService中的状态自动切换主题
• 持久化：设置会保存到浏览器本地存储，重启应用后自动加载上次选择的主题
• 组件解耦：Settings组件只负责触发状态变更，主题应用逻辑由全局布局统一处理

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