CSS实现切换主题
CSS实现切换主题
方式一：主题层
这是最常用的一种方法。
首先我们的站点会有一个最初的基础样式，后续通过添加一些额外的CSS来覆盖与重新定义部分样式。
@import "style.css"; // 基础样式、默认样式
@import "button.css"; // 比如说自定义了一个按钮的样式，部分覆盖style.css中的按钮
优点：
- 实现方法简单
- 可以实现将主题应用与所有元素
缺点：
- 过多的冗余代码
- 许多CSS其实是无用的，浪费了带宽
- 把样式文件切分到许多文件中，更加的繁琐
方式二：有状态的主题
该方式可以实现基于条件选择不同的主题皮肤，并允许用户在客户端随时切换主题。
非常适合需要对站点的某一个部分，进行独立样式设置的场景。
.u-color-current {
.t-red & {
color: blue;
}
.t-blue & {
color: red;
}
}
这样子，我们在不同主题的上下文环境下使用u-color-current时，就可以控制元素展示出不同主题的字体颜色。
<body class="t-red">
<h1 class="page-title u-color-current">...</h1>
</body>
上面这段代码会控制<h1>元素字体颜色为红色主题时的颜色。
优点：
- 非常适合主题切换的功能
- 非常适合站点局部的主题化
缺点：
- 许多主题混杂在了同一块代码中
- 可能会存在冗余
方式三：配置主题
使用sass配置文件，例如setting.config.scss，在这里面定义当前的主题值以及一些其他变量
$config: {
theme: red,
env: dev
}
// 从$config中获取响应的配置变量
@function config($key) {
@return map-get($config, $key);
}
定义tab组件样式：
.tab {
margin: 0;
padding: 0;
@if (config(theme) == red) {
background-color: red;
} @else {
background-color: gray;
}
}
引入：
@import "settings.config";
@import "components.tabs";
优点：
- 访问网站时，只会传输所需要的CSS，节省带宽
- 将主题的控制位置放在了一个地方
缺点：
- 在Sass中会有非常多的逻辑代码
- 只支持数量有限的主题
- 添加一个新的主题会十分费劲
方式四：主题调色板
为客户端提供完全的定制化主题，并经常希望更新或添加主题的时候，这种模式是不错的选择。
专门创建一个settings.palette.red.scss文件：
$color: red;
$color-tabs-background: $color-red;
tab组件样式：
.tabs {
margin: 0;
padding: 0;
backgroung-color: $color-tabs-background;
}
引入：
@import "settings.palette.red";
@import "components.tabs";
可以看见，与方式三相比，这里没有关于主题的逻辑判断，只需要专注于编辑样式，剩下的交给主题调色板即可。
优点：
- 编译出来的样式代码无冗余
- 非常适合做一些定制化主题
缺点：
- 由于主要通过设定不同的变量，所以代码确定以后，可以修改的范围是有限的
方式五：用户定制化
“用户定制化”在社交媒体产品、SaSS 平台或者是 Brandable Software 中最为常见。
要实现定制化，需要使用到util class（工具类）
首先，页面中支持自定义的元素，会被预先添加util class，例如u-user-color-background
<ul class="tabs u-user-color-background">...</ul>
此时，u-user-color-background还并未定义任何样式。而当用户输入了一个背景色时，我们会创建一个style标签，并将 hex 值注入其中
<style id="my-custom">
.u-user-color-background {
background-color: #00ffff;
}
</style>
这时用户就得到了一个红色的 Tab
优点：
- 用户自定义
- 允许用户拥有自己独一无二的站点
- 非常实用
缺点：
- 需要处理更多的“不可控”的情况
- 会有许多的冗余
- 会浪费CSS的带宽
- 失去部分CSS的浏览器缓存能力
