[vue-element-admin]-更改主题颜色

更改主题颜色

• ==一、更改侧边栏颜色==
• ==二、更改顶部navbar样式颜色==

一、更改侧边栏颜色

1、src/layout/components/Sidebar.index.vue

可以看到侧边栏的index.vue里面引入了’@/styles/variables.scss’样式

2、src/styles/variables.scss

去element官网的(Color 色彩)中
https://element.eleme.cn/#/zh-CN/component/color
去找自己想要的颜色，替换即可。

// sidebar
$menuText:#bfcbd9;//普通按钮字体颜色
$menuActiveText:#409EFF;//选择模块的字体颜色#F56C6C
$subMenuActiveText:#f4f4f5; //选中模块父级按钮字体颜色#E6A23C

$menuBg:#304156;//菜单的整体背景色
$menuHover:#263445;//菜单悬浮变色

$subMenuBg:#1f2d3d;//子菜单背景色
$subMenuHover:#001528;//子菜单悬浮背景色

$sideBarWidth: 210px; //侧边栏的宽度

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

二、更改顶部navbar样式颜色

//src/layout/components/Navbar.vue

<template>
  <div class="navbar">
  </div>
</template>


<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #E4E7ED; //navbar的背景色#fff
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
</style>

本文地址：https://blog.csdn.net/u013998349/article/details/110234195