欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 22:52:49
更改主题颜色==更改侧边栏颜色==一、src/layout/components/Sidebar.index.vue二、src/styles/variables.scss更改侧边栏颜色一、src/layout/components/Sidebar.index.vue可以看到侧边栏的index.vue里面引入了’@/styles/variables.scss’样式二、src/styles/variables.scss去element官网的(Color 色彩)中https://element.el...

一、更改侧边栏颜色

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

可以看到侧边栏的index.vue里面引入了’@/styles/variables.scss’样式
[vue-element-admin]-更改主题颜色

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