Hello Blazor：启用深色模式

Posted 2021-09-04 dotNET跨平台

前言

上次，在“集成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树下所有元素都将应用深色模式。

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

结论

在本文中，我们介绍了如何使用Tailwind CSS在Blazor应用程序中启用深色模式，并可以基于操作系统设置或用户手工切换。

如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“，记住我！