[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’样式
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