最成熟的前端换肤方案

前言

      在网上找了很多的换肤方案，其中我认为写的最好的也是有demo 的无疑是这篇，但是同时也发现了一些问题，就是太多方案不知道选哪个，而且没有做持久化处理，并且没有把图片切换的代码放在一起。我这边的需求是需要换背景，同时也是需要切换图片的,为了大家便于理解，于是我根据他的demo改写了一下，做了持久化和图片的切换。
      这篇文章写的换肤的方案有很多种，但是根据多方的调查以及搜索，最终我这边确定的是通过 CSS变量兼容性实现-2 这个方案来做的，最大的原因是便于维护，且不会对现有项目做很大的变更。这个方案也是一个比较成熟且很多人都在用的一种换肤方案。

实现过程

1.首先需要建一个存放公共css变量的js文件，将需要定义的css变量存放到该js文件，例如
（variable.js）

// 字体变量
const baseSize = {
  "--font-size-large-x": "22px",
  "--font-size-large": "18px",
  "--font-size-medium": "14px",
  "--font-size-medium-x": "16px",
  "--font-size-small-s": "10px",
  "--font-size-small": "12px",
};

//浅色
export const lightTheme = {
  "--left-bg": "rgb(182, 23, 23)",
  "--right-bg": "rgb(63, 9, 9)",
  "--top-bg": "rgb(6, 36, 65)",
  "--bottom-bg": "rgb(55, 214, 10)",
  ...baseSize,
};

// 深色
export const darkTheme = {
  "--left-bg": "#0094ff",
  "--right-bg": "blue",
  "--top-bg": "red",
  "--bottom-bg": "pink",
  ...baseSize,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.页面中使用css变量，例如：

<style lang="less">
  .left {
      background-color: var(--left-bg);
      height: 500px;
      flex: 1;
    }
</style>
1
2
3
4
5
6
7

3.安装css-vars-ponyfill 插件

npm i css-vars-ponyfill
1

❝
「css-vars-ponyfill」 官方概念：在传统浏览器和现代浏览器中为CSS自定义属性(又名“CSS变量”)提供客户端支持的ponyfill。 （具体用法与概念请查阅官方网站：「css-vars-ponyfill」）
❞

4.封装切换主题的js，在main.js做初始化调用

// theme.js
import { lightTheme, darkTheme } from "../src/assets/js/variable";
import cssVars from "css-vars-ponyfill";
export const initTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme ? "light" : "dark");
  cssVars({
    watch: true, // 当添加，删除或修改其或