黑白主题换肤方案

前言

切换的时候，不重新调接口

具体实现

1、首先创建一个存放公共css变量的js文件

将需要定义的css变量存放到该js文件，例如（variable.js）

2、在页面使用这些css变量

3、安装css-vars-ponyfill 插件

npm i css-vars-ponyfill

「css-vars-ponyfill」 官方概念：在传统浏览器和现代浏览器中为CSS自定义属性(又名“CSS变量”)提供客户端支持的ponyfill。 （具体用法与概念请查阅官方网站）

4、封装切换主题的js，在main.js做初始化调用

theme.js

// theme.js
import {
    
     lightTheme, darkTheme } from "@/assets/js/variable"
import cssVars from "css-vars-ponyfill"
export const initTheme = (theme) => {
    
    
  document.documentElement.setAttribute("data-theme", theme ? "dark" : "light")
  cssVars({
    
    
    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
    variables: theme ? darkTheme : lightTheme, // variables 自定义属性名/值对的集合
    onlyLegacy: false, // false  默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css
  })
}

5、main.js调用

import {
    
     initTheme } from './theme'
let theme = localStorage.getItem('theme') === 'light' ? false : true
initTheme(theme)

6、home.vue切换主题(我这边在文件夹是有图片的)

<template>
  <div class="home">
    <div>
      <el-switch
        v-model="theme"
        @change="changeSkin"
        active-text="黑色背景"
        inactive-text="白色背景"
      >
      </el-switch>
    </div>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="less_box add">
      <img :src="avatar" alt="" />
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
  </div>
</template>

<script>
import {
    
     initTheme } from '@/theme'
import {
    
     mapState, mapMutations } from 'vuex'
// import BUS from '@/utils/bus'
export default {
    
    
  data () {
    
    
    return {
    
    
      theme: true,
      input: ''
    }
  },
  computed: {
    
    
    ...mapState({
    
     sysTheme: 'theme' }),
    avatar () {
    
    
      // let theme = this.sysTheme === false ? 'light' : 'dark'
      return require(`@/assets/images/logo-${
      
      this.sysTheme}.png`)
    }
  },
  watch: {
    
    
  },
  mounted () {
    
    
    console.log(this.sysTheme);
    this.theme = this.sysTheme === 'dark' ? true : false
    // document.body.style.setProperty('--bottom-bg', '#0094ff');
    // initTheme(this.theme)
    // console.log(1111);
  },
  methods: {
    
    
    ...mapMutations({
    
    
      setTheme: 'setTheme'
    }),
    changeSkin () {
    
    
      localStorage.setItem('theme', this.theme ? 'dark' : 'light')
      this.setTheme(this.theme ? 'dark' : 'light')
      initTheme(this.theme)
    },
    // setThemeValue (theme) {
    
    
    //   theme = theme ? "light" : "dark";
    //   this.avatar = require(`@/assets/images/logo-${theme}.png`);
    // }
  }
}
</script>
<style lang="less" scoped>
.home {
    
    
  .box {
    
    
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
    
    
      background-color: var(--left-bg);
      height: 500px;
      flex: 1;
    }
    .right {
    
    
      background-color: var(--right-bg);
      height: 500px;
      flex: 1;
    }
  }
  .less_box {
    
    
    height: 200px;
    width: 1500px;
    display: flex;
  }
}
</style>

7、在app.vue中使用

8、vuex持久化

import Vue from "vue";
import Vuex from "vuex";
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);

export default new Vuex.Store({
    
    
  state: {
    
    
    theme: localStorage.getItem('theme') === 'light' ? 'light' : 'dark'
  },
  mutations: {
    
    
    setTheme (state, data) {
    
    
      state.theme = data
    }
  },
  actions: {
    
    },
  modules: {
    
    },
  // plugins: [
  //   createPersistedState({
    
    
  //     storage: window.localStorage,
  //     reducer (val) {
    
    
  //       // console.log(val);
  //       return val
  //     }
  //   })]
});

到此所有的颜色切换和图片切换都已经完成，说一下图片切换的思路：图片的路径主要使用computed来获取，这样子我们在更改主题的时候，vuex保存的主题值就会发生变化，而computed会监视该变化从而达到更换图片路径的效果。