tdesign的白天黑夜模式实现原理

  • 以tdesign为例

  • 我们看下源码

    • 可以看到,tdesign是借助于:root选择器,并结合属性选择器来设置的,当html标签存在一个名叫theme-mode属性的时候,如果值为dark就使用白天的主题,否则就使用黑天的主题

tdesign的白天黑夜模式实现原理_第1张图片

  • 我们切换下颜色,更改html当中的属性,可以看到下图的区别
DOCTYPE html>


<html lang="en" theme-mode="dark">
  ...
html>


<html lang="en" theme-mode="light">
  ...
html>


tdesign的白天黑夜模式实现原理_第2张图片

你可能感兴趣的:(javascript,HTML,面试,前端,css,html)