element-admin/若依主题风格设计

一个赏心悦目的主题风格，可以增强客户的体验感，让使用者心情愉悦。
若依/element-admin的侧边栏都是灰色/黑色的。个人感觉有点不符合自己的审美，下面几种主题风格（更多风格将持续更新~~~）：
主题一
1.紫色：

2.白色，咱也不知道为啥，一般政府人员喜欢用白色的，，

代码如下：（1）将公共样式styles-variables.scss文件中背景色，hover，title更改即可。各种不同的侧边栏背景色如下：

主题1：灰色  主题2是完整的代码
// $menuBg:#304156;//灰色
// $menuBg:#1d4169;//侧边栏背景-深蓝1

Sidebar-主题2：蓝紫色  
$menuText:#bfcbd9; //菜单栏字体默认颜色 / 选中后字体颜色 / 选中父级字体颜色
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;

$menuBg:#022e68;//侧边栏背景/ hover / 标题颜色 -高亮深紫蓝
$menuHover:#083f88;
$sidebarTitle: #ffffff;

$subMenuBg:#1f2d3d;//展开里面整体背景色 / 单个hover颜色
$subMenuHover:#001528;


主题3：白。 最终实现效果是上面那张图，但是需要更改下源码。差一行代码未渲染，有空弄------你们谁研究出来可以发布在评论区哦
$menuText:#000000;  //菜单栏字体默认颜色 / 选中后字体颜色 / 选中父级字体颜色
$menuActiveText:#ffffff;
$subMenuActiveText:#000000;
$menuBg:#ffffff; //侧边栏背景/ hover / 标题颜色 
$menuHover:#ffffff;
$sidebarTitle: #ffffff;
$subMenuBg:#ffffff;//展开里面整体背景色  单个hover颜色
$subMenuHover:#3C86FE;

（2）头部logo标题，styles/sidebar中添加这句代码：

 .sidebar-logo-container{ //logo背景色，侧边栏同步
    background:#022e68;
  }

（3）侧边栏宽度调整

主题二
下面的theme，本人会抽时间自己实验一下
vue更改element-ui的主题色