什么是 CSS 变量

在 CSS 中，在整个代码中重复使用单一颜色或文本大小是很普遍的，这意味着在整个文档中多次重复使用相同的颜色或文本大小。使用 CSS 变量，可以将颜色或文本大小值分配给变量，并在多个位置使用。与使用传统 CSS 值相比，这使更改值更容易并且更方便。
如果不懂 CSS 变量的话可以去看这篇文章 CSS 变量

具体实现

创建两个保存不同样式的 JS 文件，把 CSS变量挂载到根元素上，在指定的元素上面使用 CSS变量，在切换主题的时候动态改变 Vuex 中的主题标识，动态切换不同的样式。

主要逻辑

import lightStyle from './light' // light 样式文件
import drakStyle from './drak'   // drak 样式文件

/**
 * @param {*} theme
 * 根据传入的样式风格, 返回不同的样式
 * 深浅色模式
 */
export function getThemeMap(theme = 'light') {
  return theme == 'light' ? lightStyle : drakStyle
}
/**
 * 
 * @param {*} theme 
 * 获取传入类型的样式文件, 然后使用 JS 设置, CSS 变量的样式
 * 
 */
export function setTheme(theme = 'light') {
  // 获取样式信息
  const themeMap = getThemeMap(theme)
  // 获取根节点
  let body = document.body
  // 循环给根节点的 CSS 变量赋值
  Object.keys(themeMap).forEach(key => {
    // 这里使用-- 作为前缀名, 是为了区分变量名
    body.style.setProperty(`--${key}`, themeMap[key])
  })
}

light 文件

export default {
  color: 'black',
  background: '#f3f3f3'
}

drak 文件

export default {
color: ‘#fff’,
background: ‘#999’
}

使用变量

<template>
  <div class="theme">
    
    <button @click="handleCheckTheme">{{GET_THEME}}</button>

    <p>themethemethemethemethemethemethemethemethemethemethemethemethemethemethemethemethemethemethemethemetheme</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex"; // 引入 vuex 的辅助函数
import { setTheme } from "./theme"; // 引入初始化的样式
export default {
  computed: {
    ...mapGetters(["GET_THEME"]),
  },
  mounted() {
    setTheme(); // 因为函数内部设置了函数参数默认值, 所以这里不需要传参
  },
  methods: {
    handleCheckTheme() {
      // 当按钮切换风格的时候, 切换成另一个风格
      let theme = this.GET_THEME == "light" ? "drak" : "light";
      // 重新初始化 CSS变量的值
      setTheme(theme);
      // 改变 Vuex 中的值
      this.$store.commit("SET_THEME", theme);
    },
  },
};
</script>

<style lang="scss" scoped>
.theme {
  width: 100%;
  height: 100%;
 	// 使用 CSS变量 !!!!!!
  color: var(--color);
  background: var(--background);
}
</style>