element plus 配合 sass 进行主题切换

6,880 阅读3分钟

先说说element自带的主题切换

这个功能主要是进行主题按钮配色切换,直接官网引入进行了

第一步引入

$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";

配置颜色变量

$--color-primary: red;

效果

就是这个样子 image.png

再说说自定义颜色切换

需求肯定不是这样,我们要求的是是两套主题色,也就是黑夜,和日间模式,这种就需要用到sass了,我们需要改造一下

1. 引入sass包

npm i sass-loader node-sass

2. 建立theme文件夹

image.png

入口文件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;
  }
},

到这里简单的颜色切换就做好了

引用资料

Element UI 主题切换实践(2020)