Hello Blazor：(8)启用深色模式

前言

上次，在“集成Tailwind CSS”时，我发现tailwind.config.js配置文件有这样一个选项：

darkMode: false, // or 'media' or 'class'

查看官方文档，原来这是用来启用深色模式的配置。

既然深色模式几乎成了所有网站和软件的标配，那么我们Blazor也不能落后了。

media方式

修改tailwind.config.js:

module.exports = {darkMode: 'media',// ...
}

修改Index.razor代码：

@page "/"<div class="bg-white dark:bg-gray-800"><h1 class="text-gray-900 dark:text-white">My IO</h1>
</div>

运行后，修改Windows的“设置”->“颜色”，改成“深色”，可以看到“My IO”从灰色变成了白色：

class方式

但是，如果能让用户控制，是否手工启用深色模式才更有意义。

修改tailwind.config.js:

module.exports = {darkMode: 'class',// ...
}

修改NavMenu.razor:

<div class="ml-10"><span class="ml-1 text-blue-200">WebApplication1</span><button  @onclick="ToggleDarkMode"><img src=@(darkMode?"light.svg":"dark.svg") alt="颜色切换" /></button>
</div><ul class="hidden md:flex overflow-x-hidden mr-10"><li class="mr-6 p-1"><NavLink class="text-white hover:text-blue-300" href="" Match="NavLinkMatch.All">Home</NavLink></li><li class="mr-6 p-1"><NavLink class="text-white hover:text-blue-300" href="counter">Counter</NavLink></li>
</ul>@code {private bool darkMode = false;[Parameter]public EventCallback OnDarkModeToggled { get; set; }private void ToggleDarkMode(){darkMode = !darkMode;OnDarkModeToggled.InvokeAsync();}
}

该组件提供了一个颜色切换按钮，并通过EventCallback向外传达是否切换深色模式。

修改MainLayout.razor:

@inherits LayoutComponentBase<div class="flex flex-col h-screen @dark"><div class="flex justify-between items-center py-4 bg-blue-900 dark:bg-gray-900"><NavMenu OnDarkModeToggled="@ToggleDarkMode" /></div><div class="flex flex-grow bg-white dark:bg-gray-700">@Body</div>
</div>@code
{private string dark = "";private void ToggleDarkMode(){dark = dark==""?"dark":"";}
}

使用NavMenu.razor，并为OnDarkModeToggled参数分配了一个处理程序，切换顶部div加入darkclass，对应DOM树下所有元素都将应用深色模式。

现在，如果我们单击按钮，则可以在浅色/深色模式之间无缝切换：