-
以tdesign为例
-
我们看下源码
- 可以看到,tdesign是借助于
:root选择器,并结合属性选择器来设置的,当html标签存在一个名叫theme-mode属性的时候,如果值为dark就使用白天的主题,否则就使用黑天的主题
- 可以看到,tdesign是借助于
文章来源：https://www.toymoban.com/news/detail-471789.html
- 我们切换下颜色,更改html当中的属性,可以看到下图的区别
<!DOCTYPE html>
<!-- 黑夜模式,设置 theme-mode="dark" -->
<html lang="en" theme-mode="dark">
...
</html>
<!-- 白天模式 设置 theme-mode="light"-->
<html lang="en" theme-mode="light">
...
</html>
文章来源地址https://www.toymoban.com/news/detail-471789.html
到了这里，关于tdesign的白天黑夜模式实现原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
