VUE设置两色主题切换

「已注销」

已于 2022-09-06 10:01:31 修改

阅读量1.9k

点赞数

文章标签：前端 javascript 开发语言

于 2022-09-05 11:09:35 首次发布

本文链接：https://blog.youkuaiyun.com/guluyaozaoshui/article/details/126700660

版权

第一步，在public下创建两个文件，如下图

deep.css

:root {
  /* 深色模式 */
  --app-mainColor: #2b579a; /*主要色调,高亮色*/
  --app-textColor: #d3d3d3;/*标题色*/
  --app-titleColor: #a6a6a6;/*正文色*/
  --app-notesColor: #595959;/*注释色*/
  --app-oneBg:#181818;/*一级背景颜色*/
  --app-twoBg:#222222;/*一级背景颜色*/
  --app-threeBg:#2F2F2F;/*一级背景颜色*/
}

shallow.css

:root{
  /* 浅色模式 */
  --app-mainColor: #2b579a; /*主要色调,高亮色*/
  --app-titleColor: #c3c3d9;/*标题色*/
  --app-textColor: #787893;/*正文色*/
  --app-notesColor: #c3c3d9;/*注释色*/
  --app-oneBg:#E7E7F0;/*一级背景颜色*/
  --app-twoBg:#F1F2F7;/*一级背景颜色*/
  --app-threeBg:#FDFDFD;/*一级背景颜色*/
}

第二步，使用vuex存储主题模式

npm install vuex --save 安装vuex

在src下创建store，然后在store下创建index.js

index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    skin:'shallow',//shallow浅色模式  //deep深色模式
  },
  getters: {},
  mutations: {
    getskin(state:any, newValue:any){
      state.skin = newValue
    }
  },
  actions: {
    setSkin(context:any, value:any){
      // 修改getskin的值
      context.commit('getskin',value)
    }
  },
  modules: {},
});

第三步，在切换主题颜色的页面中，引入对应的css文件，具体使用如下

页面引入vuex
import $store from "./store/index";
页面获取vuex内容
this.skin = $store.state.skin

mounted(){
      let link = document.createElement("link");
      link.type = "text/css";
      link.id = "theme";
      link.rel = "stylesheet";
      link.href = `./assets/${this.skin}.css`;
      document.getElementsByTagName("head")[0].appendChild(link);
}

<div @click="setSkin">
   <span v-if="skin == 'shallow'">切换到深色</i>
   <span v-if="skin == 'deep'">切换到浅色</i>
</div>

setSkin(){
  let val = ''
  if(this.skin == 'shallow'){ //浅色模式
      val = 'deep'
  } else {
      val = 'shallow'
  }
  $store.dispatch('setSkin',val);// 存储到vuex
  document.getElementById("theme").href = `./assets/${val}.css`; //引入对应文件
}

第四步，页面实践

.home{
  background: var(--app-twoBg);
  width: 100%;
  color: var(--app-textColor);
}