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的浏览器缓存能力