如何较好的实现界面主题切换？

Question

通过前端界面的选项切换界面的主题比如说dark，light这样的切换，
主要思路是什么？
目前想到的是，写好几种theme主题的css样式，然后js文件里引用一个大的theme变量，加在classname的前缀上，与css文件对应，然后切换变量切换主题，也就是切换了css样式，但是感觉很笨拙，请问有什么更好的方法吗？

Answer 1

有两种方式

1. 更换Css文件

2. 更换body的class名

---

第一种：
整体布局如base.css; 主题类的文件如theme-dark.css或theme-light.css

第二种：
将所有样式可以写到一起
然后body默认是class="base";如dark就class="base dark"；light就class="base light";
然后所有跟主题挂钩的样式都用如.dark .logo或.light .logo等方式去修改。

以上两种方式建议第一种，相对好管理！

Answer 2

谢邀回答.

以下是我的不成熟的想法。
解决办法我个人认为有两种.
第一种：在皮肤最顶层 做一个classname来标示如 dark light.

.dark button {
  color: white;
  background: dark;
}
.light button {
  color: dark;
  background: gray;
}
... 

这种方式的好处在于， 不用加载额外css, 只需要改变顶层的classname就可以达到切换皮肤的效果，也就是你所说的。

第二种则是通过动态修改 link

<link href="theme.default.css" />
<link href="theme.dark.css" id="J-theme-link" />

theme.light.css

button {
  color: white;
  background: dark;
}

theme.dark.css

button {
  color: dark;
  background: gray;
}

js控制

function changeTheme(type) {
    var el = doucment.querySelector('J-theme-link');
    el.href = themeUrl + '/theme.' + type + '.css';
}

当然这种方法我还并没有尝试过，仅供参考思路.

第二种的好处在于，用 css 文件名代替了顶层的 命名空间