Sidebar
How to Modify the Background Color of the Sidebar in SCSS
You can make changes in the
src/assets/scss/config/default/_variables-custom.scss file.
// Light Menu$vertical-menu-bg: $white;$vertical-menu-border: $white;// Dark Menu$dark-vertical-menu-bg: $primary;$dark-vertical-menu-border: $primary;// Gradient one$vertical-menu-bg-gradient:linear-gradient(to right, var(--#{$prefix}primary), var(--#{$prefix}success));$vertical-menu-border-gradient:var(--#{$prefix}success)$twocolumn-menu-iconview-bg-gradient:var(--#{$prefix}primary)// Gradient-2$vertical-menu-bg-gradient-2:linear-gradient(to right, var(--#{$prefix}info), var(--#{$prefix}secondary));$vertical-menu-border-gradient-2:var(--#{$prefix}secondary)$twocolumn-menu-iconview-bg-gradient-2:var(--#{$prefix}info)
How to Modify the text color of the Sidebar in SCSS
You can make changes in the
src/assets/scss/config/default/_variables-custom.scss file.
// Light Menu$vertical-menu-item-color: darken($gray-600, 10%);$vertical-menu-item-hover-color: $primary;$vertical-menu-item-active-color: $primary;$vertical-menu-sub-item-color: darken($gray-600, 4%);$vertical-menu-sub-item-hover-color: $primary;$vertical-menu-sub-item-active-color: $primary;$vertical-menu-title-color: #919da9;// Dark Menu$dark-vertical-menu-item-color: #abb9e8;$dark-vertical-menu-item-hover-color: $white;$dark-vertical-menu-item-active-color: $white;$dark-vertical-menu-sub-item-color: #abb9e8;$dark-vertical-menu-sub-item-hover-color: $white;$dark-vertical-menu-sub-item-active-color: $white;$dark-vertical-menu-title-color: #838fb9;
How to Modify the Background Color of the Sidebar in CSS
You can make changes in the
src/assets/css/app.css or src/assets/css/app.min.css file.
// Light Sidebar:root[data-sidebar=light] { --vz-vertical-menu-bg: #fff; --vz-vertical-menu-border: #fff; }// Dark Sidebar:root[data-sidebar=dark] { --vz-vertical-menu-bg: #405189; --vz-vertical-menu-border: #405189; }// gradient Sidebar:root[data-sidebar=gradient] { --vz-vertical-menu-bg: linear-gradient(to right, var(--vz-primary), var(--vz-success)); --vz-vertical-menu-border: var(--vz-success); --vz-twocolumn-menu-iconview-bg: var(--vz-primary); }
How to Modify the layout size of the Sidebar in SCSS
You can make changes in the
src/assets/scss/config/default/_variables-custom.scss file.
$vertical-menu-width: 250px; // sidebar-size = lg$vertical-menu-width-md: 180px; // sidebar-size = md$vertical-menu-width-sm: 70px; // sidebar-size = sm
How to Modify the layout size of the Sidebar in CSS
You can make changes in the
src/assets/scss/config/default/_variables-custom.scss file.
:root { --vz-vertical-menu-width: 250px; // sidebar-size = lg--vz-vertical-menu-width-md: 180px; // sidebar-size = md--vz-vertical-menu-width-sm: 70px; // sidebar-size = sm }