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加入dark
class,对应DOM树下所有元素都将应用深色模式。
现在,如果我们单击按钮,则可以在浅色/深色模式之间无缝切换:
结论
在本文中,我们介绍了如何使用Tailwind CSS在Blazor应用程序中启用深色模式,并可以基于操作系统设置或用户手工切换。
如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“,记住我!
Hello Blazor:(8)启用深色模式相关推荐
- 如何在Safari Mac中启用暗黑模式?
长时间在Safari浏览器上的在线时间会使您感到疲倦或使您的眼睛更加疲劳.而且,如果您在黑暗中或夜晚浏览互联网,则可能会伤害您的眼睛并可能导致黑眼圈.但是,如果您降低亮度并在Safari浏览器中启用暗 ...
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- pe如何自动加载外置工具_如何自动加载网站的深色模式?
深色模式时代已经来临 现在有一种新的趋势 - 把东西变黑.过去,你必须决定你的网站的风格(亮或暗)或者必须保存用户自己定义的主题风格. Safari 12.1 ( macOS 10.14.4自带) 增 ...
- labview在2048中添加时间滚动条_Chrome优化深色模式:滚动条颜色也能跟随变化 使上网更具沉浸感...
为了让谷歌浏览器的深色模式(Dark Mode)变得更加一致,谷歌在 Chrome 的滚动条中添加了对深色模式的支持.虽然我们很多人在上网过程中可能不太关注滚动条,但这毕竟是个可喜的变化,从而让 Ch ...
- 如何为谷歌浏览器启用暗模式
Google Chrome doesn't have a built-in dark theme like Mozilla Firefox and Microsoft Edge do, but you ...
- 如何为YouTube启用暗模式
YouTube's dark mode provides an easier-on-the-eyes viewing experience. It's particularly nice when w ...
- 启用nat模式 路由模式_如何在HTML电子邮件中启用暗模式:您需要了解的一切。...
启用nat模式 路由模式 With the new iOS 13 update, Apple Mail is getting a dark theme. That means it's the fir ...
- 鸿蒙系统下的搜狗输入法,搜狗输入法率先适配iPhone 11深色模式,用搜狗就对了!...
11 日凌晨,苹果秋季新品发布会在乔布斯大剧院举行,除iPhone 11 等新硬件产品外,其中最受瞩目的莫过于IOS13 的深色模式了.在本次第三方APP的适配竞速赛中,拥有庞大用户量的搜狗输入法率先 ...
- 火狐启用falsh_如何在Firefox中启用暗模式
火狐启用falsh Firefox will soon begin respecting Windows 10's dark app mode setting. But you can enable ...
最新文章
- Invocation of destroy method 'close' failed on bean with name 'sqlSession'
- mysql在linux下的安装
- homework-04
- pytorch比较Tensor
- JAVA设计模式详解(六)----------状态模式
- 微信小程序背景图虚化
- 计算机的发展史及多道技术
- HTML5 Geolocation(地理定位)
- 20190810货币基金
- mysqldump简单解析
- 图像处理程序,在状态栏显示图像尺寸
- 复杂参数的基本使用方式
- android 在非UI线程更新UI仍然成功原因深入剖析
- m1 MacBook 进入自检模式
- 22年全国数学建模比赛ABC题思路模型
- 二叉树相关题(Java实现)
- 小程序怎么实现授权登录,如何保存头像和上传头像?
- flex布局小案例——制作骰子
- Nvidia Tesla P100 性能评测
- 为什么年轻人别去外包公司