vue项目中实现动态切换主题颜色(简易版)

今天来实现一个使用css变量动态切换项目主题颜色的功能，这种方式也是比较简单的一种方式。大致思路就是给文档根元素设置不同的属性选择器来匹配不同的css样式。

首先定义一个单独的css文件theme.css

:root{
     --text-primary:#1b1b1b; // 定义文字的默认颜色
     --background-primary:#fff; // 定义页面的默认背景颜色
}
// 暗黑主题下文字和背景的样式
html[data-theme='dark']{
    --text-primary:#fff;
    --background-primary:#1b1b1b;
}

:root和html的区别：

1. :root是伪类选择器，html是标签选择器
2. :root的优先级高于html

它们都用于匹配文档的根元素，在css3中，:root一般用来定义全局css变量。

然后我们使用select标签来进行模拟：

<template>
  <div>
    <select v-model="theme" @change="handleChange">
      <option value="light">亮色</option>
      <option value="dark">暗色</option>
    </select>
    <span>Toggle</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: "light",
    };
  },
  methods: {
    handleChange() {
      // 修改html的属性 即html[data-theme=""]
      document.documentElement.dataset.theme = this.theme;
    }
  },

}
</script>
<style>
html {
  width: 100vw;
  height: 100vh;
  /* 使用var()应用定义好的css全局变量 */
  background: var(--background-primary);
  color: var(--text-primary);
}
</style>

现在如果刷新页面的话不会对我们修改的结果进行保存，所以需要进行本地存储。

<script>
export default {
data() {
    return {
     theme: localStorage.getItem("theme") || "light",
    };
  },
  methods: {
    handleChange() {
      localStorage.setItem("theme", this.theme);
      document.documentElement.dataset.theme = this.theme;
    }
  },

}
</script>

完整代码

后续还会在此基础上逐渐丰富，先完结撒花！