css变量主题色 + VUEX 实现系统主题换肤

最新推荐文章于 2024-12-17 12:09:26 发布

MittyLee

最新推荐文章于 2024-12-17 12:09:26 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/MittyLee/article/details/107542689

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何利用CSS变量和Vuex状态管理库，实现网站主题颜色的动态切换。通过在用户选择颜色后更新Vuex中的颜色值，并应用到全局样式，使网站图标、侧边栏等元素的颜色随主题变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给用户提供n个可选主题色选中颜色后更换整个系统图标,侧边栏等地方的颜色。

这里主要使用到了css的变量配合vuex传递的用户所选颜色即可赋值给任意标签的css。

（最开始只使用vuex存储所选颜色并直接获取赋值给标签这种办法设置的只能是行内样式在elementui上的颜色效果会覆盖掉hover颜色但并没有办法在行内设置hover 于是pass）

（css变量：用--xxx来定义变量用var来使用这个变量）

各位用上了的话欢迎给me点个赞呀~

vuex里提供主题色初始值

  state: {
    // 初始值
    personality: "#fff",
    themeColor: "--themeColor:#fff"
  },
  getters: {
    // 监听值的变化
    getpersonality: statr => {
      return state.personality;
    }
  },
  mutations: {
    addcount(state, color) {
      console.log(state, color);
      state.personality = color;
      state.themeColor = "--themeColor:" + color;
    }
  },

在用户选择颜色的页面methods增加方法拿到所选颜色存值在vuex里

   changeColor(index) {
    // 传入一个当前值
    this.colorIndex = index;
    const colorMap = {
      1: ["#ffffff", "#ffffff"],
      2: ["#1890ff", "#1890ff"],
      3: ["#222222", "#222222"],
      4: ["#5d44fb", "#5d44fb"],
    };
    this.setColor(...colorMap[index]);
  },
  setColor(color1, color2) {
    this.$store.commit("addcount", color1);
    localStorage.setItem("personality", color2);
  },

给全局的body里赋值vuex里存的颜色（vue里的最外层#app标签或el-container处）

<el-container class="home"
                :style="this.$store.state.themeColor">

最后就可以在任意页面的css里直接使用这个变量啦

/deep/ .save-btn {
  background: var(--themeColor);
  border-color: var(--themeColor);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  margin-top: 40px;
  margin-left: 85px;
}