前端设置多个主题,使用 [data-theme] attribute 方式 还是 直接 class 好?

Question

前端设置多个主题,使用 [data-theme] attribute 方式 还是 直接 class 好?

参考资料
class 形式

• https://juejin.cn/post/705380...
  data-theme 方式
• https://twitter.com/lukencode...

Answer 1

这两者之间更推荐 [data-theme] 其代码侵入较小。

Answer 2

使用html[data-theme="xxx"]定义好css var
在实际代码中使用css var即可

html[data-theme="red"]{
  --color: red;
}
html[data-theme="green"]{
  --color: green;
}
.font{
  color: var(--color);
}