优化菜单主题风格

RuoYi

2026-03-24 ab77b8cb8d059dc2b06c91f753f93a99f231ccb7

优化菜单主题风格

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

@@ -74,6 +74,8 @@
      overflow: hidden !important;

      text-overflow: ellipsis !important;

      white-space: nowrap !important;

      height: 44px !important;

      line-height: 44px !important;

    }



    // menu hover

@@ -105,6 +107,96 @@
        background-color: $base-sub-menu-hover !important;

      }

    }



    // theme-dark 深色主题

    &.theme-dark {

      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);

      border-right: none;



      .el-menu-item.is-active {

        position: relative;



        &::before {

          content: '';

          position: absolute;

          inset: 0;

          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));

          border-right: 3px solid var(--current-color, #409eff);

          pointer-events: none;

          z-index: 1;

        }

      }



      .el-submenu.is-active > .el-submenu__title {

        color: var(--current-color, #409eff) !important;

      }



      .el-menu-item:not(.is-active),

      .submenu-title-noDropdown,

      .el-submenu__title {

        position: relative;



        &::before {

          content: '';

          position: absolute;

          inset: 0;

          background-color: transparent;

          pointer-events: none;

          z-index: 1;

          transition: background-color 0.2s;

        }



        &:hover::before {

          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));

        }

      }

    }

    
    // theme-light 浅色主题

    &.theme-light {

      border-right: 1px solid #e8eaf0;

      box-shadow: none;



      .el-menu-item,

      .el-submenu__title {

        color: rgba(0, 0, 0, 0.65);

      }



      .el-menu-item.is-active {

        color: var(--current-color, #409eff) !important;

        position: relative;



        &::before {

          content: '';

          position: absolute;

          inset: 0;

          background-color: var(--current-color-light, #ecf5ff);

          border-right: 3px solid var(--current-color, #409eff);

          pointer-events: none;

          z-index: 1;

        }

      }



      .el-submenu.is-active > .el-submenu__title {

        color: var(--current-color, #409eff) !important;

      }



      .el-menu-item:not(.is-active):hover,

      .submenu-title-noDropdown:hover,

      .el-submenu__title:hover {

        background-color: #f5f7fa !important;

        color: rgba(0, 0, 0, 0.85) !important;

      }



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

      .el-submenu .el-menu-item {

        background-color: #fafafa !important;



        &:hover {

          background-color: #f0f5ff !important;

        }

      }

    }

  }



  .hideSidebar {


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

@@ -10,31 +10,16 @@


// 默认菜单主题风格

$base-menu-color:#bfcbd9;

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

$base-menu-background:#304156;

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

$base-menu-background: #1a1f2e;

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



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

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

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



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

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



// 自定义暗色菜单风格

/**

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

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

$base-menu-background:#001529;

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



$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-sub-menu-background: #141824;

$base-sub-menu-hover: rgba(255,255,255,.06);



$base-sidebar-width: 200px;




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

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

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

    <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, settings.sideTheme]" :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


 ruoyi-ui/src/layout/index.vue

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

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

  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33'}">

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

    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>

    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">