CSS 变量/自定义属性

CSS 变量的缺点:
  • 不能被探测
  • 总是继承 // houdini 解决
  • 不能动画 // houdini 解决

只要名字合法,@supports 总是 ture

--theme-color: 73, 188, 133; // 表示有三个数字的 css 值
color: rgba(var(--theme-color),.5); // 和其他数字连接成

--theme-color: #ffffff;
color: var(--theme-color)66; // 字符串链接成字符串而不是

应用未设置的自定义属性视为无效值 // 不会验证,所以也能覆盖属性

配置一个基础主题,是否可以使用算法来计算出不同情况下的主题?
  • 主色变化/系统色
  • 深色/浅色主题
  • 环境光/亮度