新增暗色菜单风格主题

RuoYi

2021-09-04 14c6c796e83274af2115118151994cdcf53085fe

新增暗色菜单风格主题

 ruoyi-ui/src/assets/styles/sidebar.scss

@@ -3,15 +3,15 @@
  .main-container {

    min-height: 100%;

    transition: margin-left .28s;

    margin-left: $sideBarWidth;

    margin-left: $base-sidebar-width;

    position: relative;

  }



  .sidebar-container {

    -webkit-transition: width .28s;

    transition: width 0.28s;

    width: $sideBarWidth !important;

    background-color: $menuBg;

    width: $base-sidebar-width !important;

    background-color: $base-menu-background;

    height: 100%;

    position: fixed;

    font-size: 0px;

@@ -81,12 +81,12 @@
    }



    & .theme-dark .is-active > .el-submenu__title {

      color: $subMenuActiveText !important;

      color: $base-menu-color-active !important;

    }



    & .nest-menu .el-submenu>.el-submenu__title,

    & .el-submenu .el-menu-item {

      min-width: $sideBarWidth !important;

      min-width: $base-sidebar-width !important;



      &:hover {

        background-color: rgba(0, 0, 0, 0.06) !important;

@@ -95,10 +95,10 @@


    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,

    & .theme-dark .el-submenu .el-menu-item {

      background-color: $subMenuBg !important;

      background-color: $base-sub-menu-background !important;



      &:hover {

        background-color: $subMenuHover !important;

        background-color: $base-sub-menu-hover !important;

      }

    }

  }

@@ -154,7 +154,7 @@
  }



  .el-menu--collapse .el-menu .el-submenu {

    min-width: $sideBarWidth !important;

    min-width: $base-sidebar-width !important;

  }



  // mobile responsive

@@ -165,14 +165,14 @@


    .sidebar-container {

      transition: transform .28s;

      width: $sideBarWidth !important;

      width: $base-sidebar-width !important;

    }



    &.hideSidebar {

      .sidebar-container {

        pointer-events: none;

        transition-duration: 0.3s;

        transform: translate3d(-$sideBarWidth, 0, 0);

        transform: translate3d(-$base-sidebar-width, 0, 0);

      }

    }

  }


 ruoyi-ui/src/assets/styles/variables.scss

@@ -8,37 +8,47 @@
$yellow:#FEC171;

$panGreen: #30B08F;



// sidebar

$menuText:#bfcbd9;

$menuActiveText:#409EFF;

$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951

// 默认菜单主题风格

$base-menu-color:#bfcbd9;

$base-menu-color-active:#f4f4f5;

$base-menu-background:#304156;

$base-logo-title-color: #ffffff;



$menuBg:#304156;

$menuHover:#263445;

$sidebarTitle: #ffffff;

$base-menu-light-color:rgba(0,0,0,.70);

$base-menu-light-background:#ffffff;

$base-logo-light-title-color: #001529;



$menuLightBg:#ffffff;

$menuLightHover:#f0f1f5;

$sidebarLightTitle: #001529;

$base-sub-menu-background:#1f2d3d;

$base-sub-menu-hover:#001528;



$subMenuBg:#1f2d3d;

$subMenuHover:#001528;

// 自定义暗色菜单风格

/**

$base-menu-color:hsla(0,0%,100%,.65);

$base-menu-color-active:#fff;

$base-menu-background:#001529;

$base-logo-title-color: #ffffff;



$sideBarWidth: 200px;

$base-menu-light-color:rgba(0,0,0,.70);

$base-menu-light-background:#ffffff;

$base-logo-light-title-color: #001529;



$base-sub-menu-background:#000c17;

$base-sub-menu-hover:#001528;

*/



$base-sidebar-width: 200px;



// 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;

  menuLightBg: $menuLightBg;

  menuLightHover: $menuLightHover;

  subMenuBg: $subMenuBg;

  subMenuHover: $subMenuHover;

  sideBarWidth: $sideBarWidth;

  sidebarTitle: $sidebarTitle;

  sidebarLightTitle: $sidebarLightTitle

  menuColor: $base-menu-color;

  menuLightColor: $base-menu-light-color;

  menuColorActive: $base-menu-color-active;

  menuBackground: $base-menu-background;

  menuLightBackground: $base-menu-light-background;

  subMenuBackground: $base-sub-menu-background;

  subMenuHover: $base-sub-menu-hover;

  sideBarWidth: $base-sidebar-width;

  logoTitleColor: $base-logo-title-color;

  logoLightTitleColor: $base-logo-light-title-color

}


 ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,13 @@
<template>

  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">

  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">

    <transition name="sidebarLogoFade">

      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">

        <img v-if="logo" :src="logo" class="sidebar-logo" />

        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>

        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>

      </router-link>

      <router-link v-else key="expand" class="sidebar-logo-link" to="/">

        <img v-if="logo" :src="logo" class="sidebar-logo" />

        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>

        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>

      </router-link>

    </transition>

  </div>


 ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -1,12 +1,12 @@
<template>

    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">

    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">

        <logo v-if="showLogo" :collapse="isCollapse" />

        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">

            <el-menu

                :default-active="activeMenu"

                :collapse="isCollapse"

                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"

                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"

                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"

                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"

                :unique-opened="true"

                :active-text-color="settings.theme"

                :collapse-transition="false"


 ruoyi-ui/src/layout/index.vue

@@ -1,7 +1,7 @@
<template>

  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">

    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>

    <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" />

    <sidebar class="sidebar-container"/>

    <div :class="{hasTagsView:needTagsView}" class="main-container">

      <div :class="{'fixed-header':fixedHeader}">

        <navbar />

@@ -93,7 +93,7 @@
    top: 0;

    right: 0;

    z-index: 9;

    width: calc(100% - #{$sideBarWidth});

    width: calc(100% - #{$base-sidebar-width});

    transition: width 0.28s;

  }