如何实现一个黑暗的主题CSS和角吗?
黑暗的主题获得了很多流行在过去的几年里,这些天每个主要网站都有一个黑暗的主题选项。
虽然有很多不同的选项用CSS来实现一个黑暗的主题,这篇文章将集中在其中一个最简单的实现,使用现代Javascript和CSS特性。
即使我们写这篇文章记住角,可以实现一个黑暗主题其他框架/库使用相同的概念。
1。使用CSS变量
黑暗与光明的主题可以使用CSS来实现变量定义的颜色主题。这样的变量几乎上都是可用的所有的浏览器,但现在弃用Internet Explorer。
下面是一些示例CSS来定义颜色的光主题相同的变量定义的主题类:
2。使用这些变量的全局样式表(styles) css
一旦你已经定义了每一个主题的特异性与变量,您可以创建你的常见的样式将应用不管主题,离开的选择颜色前面定义的变量:
3所示。决定应用哪个主题
上面提供的代码,最简单的方法我们的黑暗模式开关的开/关是使用以下Javascript:
document.body.classList.toggle(“的主题”);
这段代码将添加或删除页面的主题类的身体,这将导致改变我们的主题使用的CSS变量值,有效地在光明与黑暗模式之间进行切换。
你可以看到代码和例子在行动这Stackblitz,您可以点击“切换黑暗的主题”按钮来实现主题切换(https://stackblitz.com/edit/angular-ivy-kums6p?file=src%2Fstyles.css):
在我的角码,所有我在AppComponent使用上面提到的Javascript代码切换CSS类:
@ component ({
选择器:“我的程序”,
templateUrl:“/ app.component.html。”
})
出口类AppComponent {toggleDarkTheme ():空白{
document.body.classList.toggle('的主题');
}
}
然后,单击一个按钮调用上述方法:
<标题>一个示例页面< / h1 >
< p >开始编辑看到一些魔法发生:)< / p >
<按钮(点击)= " toggleDarkTheme ()< /按钮> >切换黑暗主题
4所示。如何阅读用户的偏好的主题,黑暗或光明?
CSS提供媒体查询@media(prefers-color-scheme:黑暗)读操作系统和用户设置的首选。
这个媒体查询可以从Javascript阅读如下:
const prefersDarkScheme =窗口。matchMedia (“(prefers-color-scheme:深色)”);
这可能是用于设置默认主题根据用户的偏好使用下面的代码:
常量prefersDark=窗口。matchMedia (“(prefers-color-scheme:深色)”);
document.body.classList.toggle(“的主题”,prefersDark.matches);
我的名字是betway必威滚球。我是谷歌开发者角度,专家顾问和教练角训练我帮助web开发团队学习和熟悉角。
如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。
