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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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 } },