vue之elementui后台管理系统换自定义UI颜色方案

思路:用覆盖css的思路解决，常规色为elementui的默认颜色，切换风格按钮点了后，给body加个class命名为theme_dark

App.vue

<template>
  <div id="app">
    <!-- <router-view :key="$route.fullPath" /> -->
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  watch: {
    isDark: function (bool) {
      this.initDarkDom(bool)
    }
  },
  computed: {
    ...mapState(['isDark'])
  },
  mounted() {
    let dl = this.$db.ss.get('isDark')
    this.initDarkDom(dl)
  },
  methods: {
    initDarkDom(bool) {
      let dom = document.getElementsByTagName('body')[0]
      if (bool) {
        dom.classList.add('theme_dark')
      } else {
        dom.classList.remove('theme_dark')
      }
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 14px;
}
</style>

main.js

import '../theme/index.css'
import '../theme_dark/index.scss'

theme是原elementui的样式文件

 

 

 theme_dark是自己建的自定义UI样式文件,用的scss，好统一改颜色变量

 

 

 比如index.scss

$background_color:rgba(20, 25, 61, 1); // 主要背景色
$font_color : rgba(255, 255, 255, 1); // 主要文字颜色
$font_placeholder_color : rgba(255, 255, 255, .65); // 提示文字颜色
$font_disabled : $font_placeholder_color; // form禁用颜色
$input_background_color:rgba(20, 26, 59, 1); // 文本框背景色
$border_color:rgba(255, 255, 255, 0.2); // 边框颜色
$border:1px solid $border_color;
$background_main:#0d0f1e; //主体内容背景色
$background_suspended_shade:rgba(32, 32, 32, 0.8); //悬浮框背景色
$background_suspended:rgba(32, 32, 32, 1); //悬浮框背景色
$font_color_table_content:#acaebb; //表格内容主字体颜色
$font_color_suspended:rgba(169, 169, 169, 1); //悬浮框字体颜色
$font_color_hover_suspended:$font_color; //悬浮框select hover字体颜色
$butten_save_blue:#727dff; //按钮提交背景色
$icon_edit_color:#2b1f3b; //小图标修改背景色
$background_collapse_bar: rgb(57, 65, 138);
$background_hover_table:rgba(114, 125, 255, .2); //table hover背景色
$background_pagination_button: rgba(114, 125, 255, 0.10); // 分页组件切换页数按钮

.theme_dark {
  background-color: $background_main;

  #app {
    color: $font_color;
  }

  @import "./content";

  .container {
    background-color: $background_color;
  }


  .el-button {
    border-color: transparent;
  }
  .common-btn-dark {
    background: rgba(114, 125, 255, 0.3) !important;
    color: #727dff;
  }
  .el-input__suffix {
    color: $font_color;
  }

  .titleSupplier {
    color: $font_color !important;
  }

  .span-border {
    border: $border !important;
  }

  .form-val {
    color: $font_color !important;
  }
  .el-divider{
    background-color:$border_color
  }
  /*详情面包屑返回*/
  .el-page-header__left{
    color:$butten_save_blue
  }
  .el-page-header__left::after{
    background-color:$butten_save_blue
  }
  .el-page-header__content{
    color:$butten_save_blue
  }

  /*修改滚动条样式*/

  div::-webkit-scrollbar-track {
    background: transparent;
  }

  div::-webkit-scrollbar-thumb {
    background: $border_color;
  }

  div::-webkit-scrollbar-corner {
    background: transparent;
  }

  @import "./input";
  @import "./select";
  @import "./table";

里面的input.scss

.el-input.is-disabled .el-input__inner {
  background-color: $background_color;
  border-color: $border_color;
  color: $font_disabled;
}

.el-input__inner {
  background-color: $input_background_color;
  border: $border;
  border-radius: 4px;
  color: $font_color;

  &::-webkit-input-placeholder {
    color: $font_placeholder_color;
  }

  &::-moz-placeholder {
    color: $font_placeholder_color;
  }

  &:-ms-input-placeholder {
    color: $font_placeholder_color;
  }

  &::-ms-input-placeholder {
    color: $font_placeholder_color;
  }

  &::placeholder {
    color: $font_placeholder_color;
  }

  &:hover {
    border-color: $font_placeholder_color;
  }

  &:focus {
    outline: none;
    border-color: $font_color;
  }
}

.input-suffix>label {
  color: $font_color;
}
.el-input__inner:hover{
  border-color:$border_color
}

.el-input__inner:focus{
  box-shadow:0 0 10px 5px rgba(114,125,255,0.6);
  border-color:$border_color
}
.el-textarea__inner:hover{
  border-color:$border_color
}
.el-textarea__inner:focus{
  box-shadow:0 0 10px 5px rgba(114,125,255,0.6);
  border-color:$border_color
}
.el-textarea__inner{
  background-color: $background_color;
  border: 1px solid $border_color;
  color: $font_color;
}

.el-textarea .el-input__count {
  background-color: $background_color;
  color: $font_placeholder_color;
}

header.vue里面的切换风格按钮

...mapMutations([
      'changeUserInfo'
    ]),

 this.changeUserInfo(data1)

store/index.js

 isDark:db.ss.get('isDark')

 

changeUserInfo(state, val) {
      db.ss.set('userInfo', val)
      state.userInfo = val
      //更新登录信息的时候判断是否显示暗色
      if (
        val.lastRoleId === '***' //总经理
        || val.lastRoleId === '***' //部门经理
      ) {
        db.ss.set('isDark', true)
        state.isDark = true
      } else {
        db.ss.set('isDark', false)
        state.isDark = false
      }
    },