526互联

elmentui-admin自定义主题修改（野路子）

发布时间 2023-06-30 09:19:16作者: 妞妞猪

最近在给elementui-admin加自定义主题功能的时候发现，使用官网上的npm i element-theme -g方法有点问题（主要原因是自己的node版本和他要去不一致，会导致安装失败），然搜索了之后找到cnpm install element-themex -g这个（使用方法参考https://blog.csdn.net/czc1997/article/details/126171541）结果也是安装不了。之后发现若依源码（http://vue.ruoyi.vip/tool/gen）中并未使用element-theme和element-themex，说明也是可以使用其他方法来解决主题切换问题的，然后就开始了自己魔改之路。。。

再次声明，如果你的本地环境可以安装使用elementui-theme或是element-themex最好还是跟着官方的文档来，这种野路子方法只适用于本地环境无法安装element-themex和element-theme的情况，操作比较复杂。

首先 找到el-scrollbar

 会发现该控件下的background-color等样式会使用variables这个scss文件中的参数

打开varibales.scss文件可以看到

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#5088f0; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#44515e;
$subMenuHover:#001528;
$sideBarWidth: 190px;
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

 为了能够切换自定义颜色，在varibales.scss文件中新增浅色样式，并且为了能够使logo的字体颜色也进行改变，我加了logo字体颜色的改变，修改后整体代码如下（具体的样式色彩可以更具自己的喜欢进行修改）

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#5088f0; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#44515e;
$subMenuHover:#001528;
$logoColor:#f4f4f5;
//亮色主题
$menuTextLight:#5f5b5b;
$menuBgLight:#bfcbd9;
$menuHoverLight:#a5a5b6;
$subMenuHoverLight:#b4b4d1;
$subMenuBgLight:#dbdbf0;
$logoColorLight: #1f2d3d;
$sideBarWidth: 190px;
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  logoColor: $logoColor;
  //亮色
  menuTextLight: $menuTextLight;
  menuBgLight: $menuBgLight;
  menuHoverLight: $menuHoverLight;
  subMenuHoverLight: $subMenuHoverLight;
  subMenuBgLight: $subMenuBgLight;
  logoColorLight: $logoColorLight;
}

 

 

样式修改完毕，接下来就是使用样式啦，

下面贴出原来的elementui-admin中el-scrollbar页面的代码

<template>
  <div :class="{'has-logo':showLogo}" >
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper" >
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="true"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
下面的是我修改之后的代码，其中getThemeColor是我选择主题样式传到vuex中的全局变量，然后在这个页面进行获取，light表示浅色主题，dark表示深色主题，我会通过判断themeColor是否等于light来获取主题是浅色还是深色（如果需要更多的样式，可以再进行数组的判断）。 要注意的是el-scrollbar中需要添加一个:class="你的样式名称"，这样做的原因我后面会说到
<template>
  <div :class="{'has-logo':showLogo}" >
    <logo v-if="showLogo" :collapse="isCollapse" :fontColor="themeColor==='light'?variables.logoColorLight:variables.logoColor" :style="{'background-color':themeColor==='light'?variables.menuBgLight:variables.menuBg}" />
    <el-scrollbar wrap-class="scrollbar-wrapper" :class="themeColor" :style="{'background-color':themeColor==='light'?variables.menuBgLight:variables.menuBg}">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="themeColor==='light'?variables.menuBgLight:variables.menuBg"
        :text-color="themeColor==='light'?variables.menuTextLight:variables.menuText"
        :unique-opened="true"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

 到这里基本样式和使用都已经完成了，但是你重新运行会发现只有菜单的背景颜色和菜单的字体颜色改变了，还有其他的一些样式并没有生效呀，借来下我会讲到el-scrollbar中:class的用途......

在与el-scrollbar同一根目录下有一个SidebarItem.vue，打开它你会找到sidebar-item中会找到class="nest-menu"，像这个

 然后使用vscode中查找文件关键字nest-menu

 在sidebar.scss中会找到，这是子菜单的背景颜色和鼠标悬浮的背景颜色

 　& .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
      background-color: $subMenuBg !important;
      min-width: $sideBarWidth !important;
      &:hover {
        background-color: $subMenuHover !important;
      }
    }

我们根据主题的名称给上面的代码进行修改

　& .dark .nest-menu .el-submenu>.el-submenu__title,
    & .dark .el-submenu .el-menu-item {
      background-color: $subMenuBg !important;
      min-width: $sideBarWidth !important;
      &:hover {
        background-color: $subMenuHover !important;
      }
    }
    & .light .nest-menu .el-submenu>.el-submenu__title,
    & .light .el-submenu .el-menu-item {
      background-color: $subMenuBgLight !important;
      min-width: $sideBarWidth !important;
      &:hover {
        background-color: $subMenuHoverLight !important;
      }
    }
  }
这样一来当我们在上面提到过的el-scrollbar中class名称等于light的时候它就会使用subMenuBgLight和subMenuHoverLight的样式，而当class名称等于dark时它就会使用subMenuHover和subMenuBg的样式。
不过到这里之后发现，还没结束，子菜单的hover可以正常出来样式，但是不下拉的父菜单hover样子不太对，通过研究发现父菜单的样式是通过submenu-title-noDropdown这个class来进行显示的，继续查找

 发现就在刚才修改的nest-menu样式上边，原代码是这么写的

    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: $menuHover !important;
      }
    }

我将它修改为

　 & .dark .submenu-title-noDropdown,
    & .dark .el-submenu__title {
      &:hover {
        background-color: $menuHover !important;
      }
    }
    & .light .submenu-title-noDropdown,
    & .light .el-submenu__title {
      &:hover {
        background-color: $menuHoverLight !important;
      }
    }

 重新启动，发现成功！最后附上两种主题的图，感谢若依提供的解决思路，我对思路进行了一个梳理和分享。