先说说element自带的主题切换
这个功能主要是进行主题按钮配色切换，直接官网引入进行了
第一步引入
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";
复制代码配置颜色变量
$--color-primary: red;
复制代码效果
就是这个样子
再说说自定义颜色切换
需求肯定不是这样，我们要求的是是两套主题色，也就是黑夜，和日间模式，这种就需要用到sass了，我们需要改造一下
1. 引入sass包
npm i sass-loader node-sass
复制代码2. 建立theme文件夹
入口文件index.scss
因为需要配合element自带的按钮变色，所以需要加入--font-path，black就是黑夜模式，default就是日间模式， 如果，这里有多模式，就自己继续加一个class
$--font-path: '~element-plus/lib/theme-chalk/fonts';
.blackT {
@import './black.scss';
@import "~element-plus/packages/theme-chalk/src/index";
}
.defaultT {
@import './default.scss';
@import "~element-plus/packages/theme-chalk/src/index";
}
复制代码日间模式default
因为是全局变量，所以属性都是绑定在根元素App下，这里定义想要的颜色
/* 改变主题色变量 */
$--color-primary: #7467F3;
// 与CSS原生变量映射
#App {
--colorText:#606266; // 正常文本
--colorTitle:#586573; // 标题
--colorSmall:#9CA5AC; // 小号标题
}
复制代码黑夜模式black
同理，定义黑夜模式下的颜色属性
/* 改变主题色变量 */
$--color-primary: #7467F3;
// 与CSS原生变量映射
#App {
--colorText:#ffffff;
--colorTitle:#FEFEFE;
--colorSmall:#CCCCCC;
}
复制代码3. 在main.js 引入
这块的样式，最好在element样式后面引入
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引入
import '../assets/theme/index.scss'
复制代码4. 配置html和样式切换
html页面添加默认样式
在div处添加默认样式‘defaultT’,这里和index.sass处的样式最好同名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">-->
<!-- <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" class="defaultT"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&&ak=f1NQ6UIOMeQ7LzXrWIae6yofbD9WGx62"></script>
<!-- built files will be auto injected -->
</body>
</html>
复制代码App.vue配置
首先id该成APP
<template>
<div id="App">
<router-view v-if="isRouterAlive" v-slot="{ Component }">
<transition name="slide-fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>
export default {
name: 'App',
components: {
},
data(){
return {
isRouterAlive:true
}
},
provide(){ //提供
return {
reload: this.reload
}
},
methods: {},
mounted () {}
}
</script>
<style lang="scss">
#App {
list-style: none;
font-family: PingFang SC;
color: var(--colorText);
}
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .5s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter-from, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
复制代码其次是element样式的覆盖，这里看你的需求，主要用到的几个组件，我都做了处理，变量的用法也写在了之里类似color: var(--colorText)
/* 导航样式修改 */
//设置鼠标悬停时el-menu-item的样式
.el-menu-item {
text-align: left !important;
transition: none !important;
}
//设置选中el-menu-item时的样式
.el-menu-item.is-active {
margin: 8px auto;
width: 200px;
height: 40px;
line-height: 40px;
background-image: linear-gradient(to right, #7467F3, #9E92F8);
box-shadow: 0 0 6px 1px #9E92F8;
border-radius: 10px;
}
.el-submenu__title{
transition: none !important;
/*outline:0;*/
/*background-color: var(--colorMode) !important;*/
}
// 取消border
.el-menu {
border-right: 0px !important;
}
// 修改选中效果
.el-submenu__title:hover,
.el-menu-item:hover,
.el-menu-item:hover {
background-color: rgba(116, 105, 236, 0) !important;
color: #7467F3 !important;
}
/* 设置tree样式 */
//设置当前选中项目的颜色
.el-tree-node.is-current > .el-tree-node__content {
background-image: linear-gradient(to right, #7467F3, #9E92F8);
/*box-shadow: 0 0 3px 1px #9E92F8;*/
border-radius: 10px;
color: #ffffff;//字体颜色
}
// hover样式
.el-tree-node__content {
&:hover{
background-image: linear-gradient(to right, #7467F3, #9E92F8) !important;
border-radius: 10px;
}
}
.el-tree-node__label {
font-size: 12px !important;
}
// 点击下拉按钮触发的选中颜色
.el-tree-node:focus>.el-tree-node__content {
background-image: linear-gradient(to right, #7467F3, #9E92F8) !important;
border-radius: 10px;
}
//#header .el-tabs__content{
// display: none!important;
//}
#header .el-tabs__header{
margin: 0;
border: none!important;
}
#header .el-tabs__nav{
border: none!important;
}
#header .el-tabs__item{
border: none!important;
color: #CCCCCC;
}
#header .el-tabs__item.is-active{
color: #7467F3;
}
iframe{
opacity: .8;
}
#header .el-tabs__nav-prev,#header .el-tabs__nav-next{
height: 100%;
font-size: 16px;
display: flex;
align-items: center;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
}
/*
表格复写
*/
.el-table::before {
//去除底部白线
height: 0 !important;
border-bottom: 0 !important
}
.el-table,
.el-table__expanded-cell {
/*background-color: transparent !important;*/
}
/*
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
background-color: transparent !important;
border-bottom: 0 !important;
}
/*
input 复写
*/
.el-input__inner {
background: none !important;
/*border:0 !important;*/
color: var(--colorText) !important;
border: 1px solid var(--buttonBorder) !important;
}
/*
*时间选择器
*/
.el-date-editor,
.el-range-input {
background: none !important;
}
.el-range-separator {
color: var(--colorText) !important;
}
/**
tags 复写
*/
.el-tag--danger {
background: none !important;
border: 0 !important;
}
/*
button 复写
*/
.el-button {
background-color: rgba(255, 255, 255, 0) !important;
color: #7469ECFF !important;
border: 1px solid var(--buttonBorder) !important;
/*border: 0 !important;*/
}
/*
el-dialog 复写
*/
.el-dialog {
background: var(--colorBg) !important;
.el-dialog__title {
color: var(--colorTitle);
}
}
复制代码5. 主题切换
在你需要页面添加一个事件
// 切换模式
changeMode(e) {
this.modeTheme = e;
if (this.modeTheme) {
this.themesName = 'defaultT'
let app = document.getElementById("app")
app.className = this.themesName;
} else {
this.themesName = 'blackT'
let app = document.getElementById("app")
app.className = this.themesName;
}
},
复制代码到这里简单的颜色切换就做好了