前言

上次，在“集成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“，記住我！

總結

以上是生活随笔為你收集整理的Hello Blazor：(8)启用深色模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。