Vue<主题色修改>

效果图：

 

 

changeColor.gif

此篇文章是基于vue项目上进行修改的，在其他项目中也是可以实现这种效果的。

 

知识点：

1. :root 选择器
2. .setProperty属性

🎈首先创建一个 .scss 文件(其实用 .css 文件也是可以的)

 

image.png

index.scss 代码

 

// --color 相当于全局定义的一个css变量
// var(--color) 用于引用
// 在页面样式的引用中，你将会看到
:root {
  --color: rgb(79, 67, 253);
  --bck: rgb(196, 192, 255);
}

并在 main.js中引入

import '@/assets/css/index.scss'

⚓⚓ （ 完整页面代码，直接往下翻 ~~~~~ ）

🎈引用全局配置的 css 变量

 

image.png

然后 document 获取到 :root，通过 .setProperty 直接修改定义的 css 变量属性的值，就能直接改变主题颜色

 

 let root = document.querySelector(":root");
 root.style.setProperty("--color", "rgb(253, 44, 79)");
 root.style.setProperty("--bck", "rgb(255, 192, 203)");

😡😡😡注意：
:root 只能在全局上使用，下面的这种写法是不生效的(因为设置 scoped 后就不是全局样式了)，想要生效的话可以去除 scoped

<style lang="scss" scoped>
:root{
--sss:red;
}
.box{
background:var(--sss);
}
</style>

代码如下：

<template>
  <div class="box">
    <div class="change_tab">
      <span @click="changeColor(1)">主题色1</span>
      <span @click="changeColor(2)">主题色2</span>
      <span @click="changeColor(3)">主题色3</span>
    </div>
    <h3>文字颜色</h3>
    <div class="bck"></div>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor(num) {
      let root = document.querySelector(":root");
      if (num == 1) {
        root.style.setProperty("--color", "rgb(253, 44, 79)");
        root.style.setProperty("--bck", "rgb(255, 192, 203)");
      } else if (num == 2) {
        root.style.setProperty("--color", "rgb(253, 114, 0)");
        root.style.setProperty("--bck", "rgb(253, 216, 186)");
      } else if (num == 3) {
        root.style.setProperty("--color", "rgb(79, 67, 253)");
        root.style.setProperty("--bck", "rgb(196, 192, 255)");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding: 50px;
  .change_tab {
    display: flex;
    span {
      margin-right: 20px;
      color: #3d3d3d;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  h3 {
    transition: 0.3s;
    color: var(--color);
    text-align: left;
    margin: 20px 0;
  }
  .bck {
    transition: 0.3s;
    width: 100px;
    height: 100px;
    background: var(--bck);
  }
}
</style>

上面讲的主要是应用于主题色的点击切换，如果想要在满足什么条件下，进入项目的时候直接改变颜色，那么就可以在 App.vue 里进行修改
(我这边是根据 sessionStorage 里面储存的 CHANNEL 类型判断的 )

  mounted() {
    let root = document.querySelector(":root");
    if (sessionStorage.CHANNEL == "AXXXXXXXXX") {
      root.style.setProperty("--color", "rgb(253, 44, 79)");
      root.style.setProperty("--bck", "rgb(255, 192, 203)");
    } else if (sessionStorage.CHANNEL == "ZMPH") {
      root.style.setProperty("--color", "rgb(253, 114, 0)");
      root.style.setProperty("--bck", "rgb(253, 216, 186)");
    }
  }