[data-bs-theme=semi-dark] body { --bs-semi-body-color: #dee2e6; --bs-semi-body-color-rgb: 222, 226, 230; --bs-semi-body-bg: #212529; --bs-semi-body-bg-2: #181c1f; --bs-semi-border-color: #495057; --bs-semi-emphasis-color:#fff; --bs-semi-light-bg-subtle: #343a40; --bs-semi-border-color-translucent: rgba(255, 255, 255, 0.15); /* sidebar wrapper */ .sidebar-wrapper { background-color: var(--bs-semi-body-bg); border-right: 1px solid var(--bs-border-color-translucent); .sidebar-header { background-color: var(--bs-semi-body-bg); border-right: 1px solid var(--bs-semi-border-color-translucent); .logo-text { color: var(--bs-semi-body-color); } .mobile-toggle-icon { color: var(--bs-semi-body-color); background-color: var(--bs-semi-body-bg); &:hover, &:focus { background-color: var(--bs-semi-light-bg-subtle); color: var(--bs-semi-emphasis-color); } } } .metismenu { a { color: var(--bs-semi-body-color); } ul { background: var(--bs-semi-body-bgbody-bg); } } .metismenu .mm-active>a, .metismenu a:active, .metismenu a:focus, .metismenu a:hover { color: var(--bs-semi-emphasis-color); background-color: rgba(255, 255, 255, 0.1); } } @media screen and (min-width:1025px) { .wrapper { &.toggled { .sidebar-wrapper { &:hover { .sidebar-header { .mobile-toggle-icon { display: flex; } } } } &:not(.sidebar-hovered) { .sidebar-wrapper { width: 70px; .sidebar-header { width: 70px; justify-content: center; width: 70px; .logo-text { display: none; } } .metismenu { a { justify-content: center; } .menu-title { display: none; } li { ul { display: none; } &.menu-label { display: none; } } .has-arrow { &:after { display: none; } } } } } } } } }