Hello Blazor（启用深色模式 #yyds干货盘点#） _干货

知识就是力量，时间就是生命。这篇文章主要讲述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”从灰色变成了白色：

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=https://www.songbingjia.com/android/@(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="https://www.songbingjia.com/android/counter">
Counter
< /NavLink>
< /li>
< /ul>

@code
private bool darkMode = false;

[Parameter]
public EventCallback OnDarkModeToggledget; 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加入??dark??class，对应DOM树下所有元素都将应用深色模式。
现在，如果我们单击按钮，则可以在浅色/深色模式之间无缝切换：

结论在本文中，我们介绍了如何使用Tailwind CSS在Blazor应用程序中启用深色模式，??并可以基于操作系统设置或用户手工切换??。
?如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“，记住我！?
【Hello Blazor（启用深色模式 #yyds干货盘点#）】