持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言：

掘友们，大家好啊，今天是开工的第一天。不知道大家假期的生活愉快不。俗话说的好，一日之计在于晨，一年之计在于春。假期也结束了，接下来就要全身心的投入工作啦，换种方式坐等下一个节假日的到来！

开工第一天，任务头一个！

产品：“做一个更换主题页面的换肤功能！就类似于xxx的”。很好，web网站换肤切换主题功能，对于前端开发者来说已经灰常灰常常见了。通常是白天和黑夜主题的切换，来增加用户的体验感。废话少说，直接上干货！

调研原理

切换主题从根本来讲就是通过事件或者颜色选择器，选择自己需要的颜色，通过js来操作css覆盖原有的样式。非常简单。但是更换主题的方法也是有很多种的，不同的方法，复杂程度不一，操作元素也是不一样的。

模型图

大家可以看一下，这是vue.js的官网切换主题功能，两个主题（白天/黑夜)，通过开关切换换肤。官网是是更换主题后永久更换，刷新后主题也是更换后的。我们可以通过后台存储，将主题类型存储起来，也可以通过浏览器存储，短暂的存储主题类型，以达到主题更换的需求。

方案一、常见的浅色加深色主题模式

这里统一以vue2为例

1. 在assets目录下新建全局css文件，此处是自定义类名，不同主题设置不同css样式。可添加其他的样式属性。

.night {
    background-color: #1a1a1a;
    color: #fff;
}
.daytime {
    background-color: #fefefe;
    color: #000;
}

2. main.js中引入全局css样式文件

3. 通过开关触发change事件调用方法，获取标签，设置不同class类名，控制不同样式

    <!-- 此处使用的element的Switch组件 -->
    <div class="switch">
      <el-switch
        v-model="value"
        active-color="#2F2F2F"
        inactive-color="#F1F1F1"
        inactive-icon-class="el-icon-sunny"
        active-icon-class="el-icon-moon"
        @change="changeTheme"  
      >
      </el-switch>
    </div>

js方法：states是开关的状态，根据状态判断不同主题，获取body标签，设置不同类名，设置不同主题色

    changeTheme(states) {
      var body = document.body;
      if (states) {
        body.className = "night";
      } else {
        body.className = "daytime";
      }
    },

效果奉上

方案二、定义主题变量，动态改变主题

使用css3中的:root伪类选择器和var变量

1. 在全局css文件中定义主题变量

:root {
    --theme-color: #fefefe;
    --theme-text-color: #000;
}

2. 定义主题变量的同时要通过var给body标签设置上默认的主题色

body {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

3. 通过js事件动态改变主题变量，使用css变量替换

changeTheme(states) {
  if (states) {
     document.documentElement.style.setProperty('--theme-color', '#1a1a1a');
     document.documentElement.style.setProperty('--theme-text-color', '#fefefe');
  } else {
     document.documentElement.style.setProperty('--theme-color', '#fefefe');
     document.documentElement.style.setProperty('--theme-text-color', '#1a1a1a');
  }
},

方案三、通过颜色选择器，动态修改主题色

操作颜色选择器和方案二结合，使用:root伪类选择器和var变量赋值

<el-color-picker @change="changeColor" v-model="color"></el-color-picker>

绑定颜色值，通过事件获取到颜色值，操作setProperty将新的value颜色值传递

changeColor(value) {
   document.documentElement.style.setProperty('--theme-color', value);
}

好处： 颜色选择器可以根据用户选择主题色来更改我们web项目，或者页面的主题，有更大的选择性。

弊端： 用户在选择了主题色后，我们很难保证设置的字体颜色会跟主题色不起冲突。还需要更改字体的颜色，操作起来麻烦，一不小心，丑上加丑。

效果奉上

总结：

本文介绍了三种常用的主题切换方案，其中方案一比较适合两种主题的切换，动态修改样式文件。适用于更换主题色的方法还有很多，这三种方法是不依赖于UI库的主题切换方法，当对于来说比较简单。后续会更新关于UI库的主题切换方案，学习永无止境，技术不断提升。