blazor - 深色/浅色主题 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

这是一个例子：

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme"/>
<MudSwitch @bind-Checked="@_isDarkMode" Color="Color.Primary" Class="ma-4" T="bool" Label="Toggle Light/Dark Mode"/>

<MudText Class="ma-4">This is an example text!</MudText>

@code{
    private MudTheme _theme = new();
    private bool _isDarkMode;
}

资源：

https://dev.mudblazor.com/customization/overview#dark-palette

Answer 2

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

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


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