深色/浅色主题 Blazor

Question

我在 Blazor 中绑定了很多在深色模式和浅色模式之间切换的方法。使用不同的包，甚至使用 css 手动进行。但他们从来没有为我解决过。有人可以给我完整的指导，告诉我如何做到这一点吗？谢谢

这是我使用 MudBlazor 尝试过的最新操作：

<MudThemeProvider Theme="new MudTheme()" @bind-IsDarkMode="@_isDarkMode"/>
<MudIconButton @onclick="ToggleDark" Icon="@modeIcon"/>

@code {
bool _isDarkMode = false;
private string modeIcon => _isDarkMode? Icons.Filled.DarkMode : Icons.Filled.LightMode;
private void ToggleDark() => _isDarkMode = !_isDarkMode;
}

Answer 1

所以基本上，这可能会迟到，但如果有人正在寻找它，我会发布它，mudblazor 文档已更新

链接可以在这里找到

<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>

@code {
    private bool _isDarkMode;
    private MudThemeProvider _mudThemeProvider;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
            StateHasChanged();
        }
    }
}

基本上这适用于自动主题，目前对我来说没问题

Answer 2

你应该在课堂上给出一个条件。所以在你的claas中：

<div class="light ? class : class2"></div>


export defaut{
data(){
return {
light : true;
}
}