Hello Blazor：启用深色模式 #yyds干货盘点#

Posted 2022-03-12 My空格IO

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Hello Blazor：启用深色模式 #yyds干货盘点#相关的知识，希望对你有一定的参考价值。

前言

上次，在“集成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”从灰色变成了白色：

Hello

class方式

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

Hello

修改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")  /></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树下所有元素都将应用深色模式。

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

Hello