vue框架自由切换样式主题，浅色/深色一键换肤

vue框架自由切换样式主题，浅色/深色一键换肤

vue组件的深浅色

下载能实现这个功能的包（最好同版本号，不确定直接下载最新版本各个包之间是否匹配）

    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-css-wrap": "^0.1.2",
    "element-theme-chalk": "^2.15.10",

执行： et

会自动初始化，生成一个element-variables.scss，就在根目录下

修改颜色，里面都是一些颜色色值，修改成自己想要的即可

创建好自己准备存放深浅色样式代码的文件夹，跟后面gulp的路径一致就行

创建gulpfile.js文件，代码内容如下

var path = require('path');
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var cssWrap = require('gulp-css-wrap');

gulp.task('css-wrap', function() {
  return gulp.src(path.resolve('./theme/index.css'), { allowEmpty: true }) // 准备加前缀的css文件位置
    .pipe(cssWrap(
      {
        selector: '.theme-dark' // 名称随便改，改成什么最后生成的css文件中每个样式前面加上该名称的前缀
      }
    ))
    .pipe(cleanCSS())
    .pipe(gulp.dest('src/assets/css/theme/dark')); /* 存放的目录 */
});

主要关注这俩

执行 gulp css-wrap

代码都被包了一层theme-dark（这个文件打开有可能卡）

把et生成的theme 里的 fonts复制到gulp完的css下（css是gulp好的不用动）

main.js引入新的主题css

切换主题

有国际化，凑活看吧
因为切换的时候，表格组件纹丝不动，所以用了reload，不太优雅但能实现效果

      <el-select v-model="theme" class="mr-6 leading-none select-lang" style="width:75px" @change="themeChange">
        <el-option key="light" :label="$t('nav.light')" value="light" />
        <el-option key="dark" :label="$t('nav.dark')" value="dark" />
      </el-select>

    themeChange() {
      this.$message.success(this.$t('nav.changeStyle'));
      localStorage.setItem('SYSTEM_THEME', this.theme);
      setTimeout(() => {
        this.tooggleClass(document.body, 'theme-' + this.theme);
      }, 1000);
      window.location.reload();
    },
    tooggleClass(element, className) {
      if (!element || !className) {
        return false;
      }
      element.className = className;
    },

进系统初始化主题

APP.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    if (!localStorage.getItem('SYSTEM_THEME')) {
      localStorage.setItem('SYSTEM_THEME', 'light');
    }
    const theme = localStorage.getItem('SYSTEM_THEME');
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
    this.tooggleClass(document.body, 'theme-' + theme);
  },
  methods: {
    tooggleClass(element, className) {
      if (!element || !className) {
        return false;
      }
      element.className = className;
    },
  }
};

</script>

login页面不受APP.vue控制，所以要单独设置

  created() {
    if (!localStorage.getItem('SYSTEM_THEME')) {
      localStorage.setItem('SYSTEM_THEME', 'light');
    }
    this.theme = localStorage.getItem('SYSTEM_THEME');
    this.tooggleClass(document.body, 'theme-' + this.theme);
  },

    tooggleClass(element, className) {
      if (!element || !className) {
        return false;
      }
      element.className = className;
    },

普通自定义样式的深浅色

最外层套上深浅对应的名字就好了

tailwind.css的深浅色

加上dark:就行