Sidebar Colors

We have provided multiple colors sidebar options and which seems very easy to have it. You need to change the below attribute in the Admin/src/partials/main.html.

Change Sidebar Properties

You can change the sidebar properties in the Admin/src/assets/scss/_variables-custom.scss.

//sidebar light
$sidebar-bg: $white;
$sidebar-border: var(--#{$prefix}border-color);
$sidebar-menu-title: var(--#{$prefix}secondary-color);
$sidebar-link-color: var(--#{$prefix}secondary-color);
$sidebar-dropdown-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
$sidebar-link-hover-color: var(--#{$prefix}primary);
$sidebar-link-bg-hover-color: var(--#{$prefix}primary-bg-subtle);
$sidebar-link-active-color: var(--#{$prefix}primary);
$sidebar-link-bg-active-color: var(--#{$prefix}primary-bg-subtle);
$sidebar-link-sub-color: var(--#{$prefix}secondary-color);
$sidebar-link-sub-hover-color: var(--#{$prefix}primary);
$sidebar-link-sub-active-color: var(--#{$prefix}primary);
$sidebar-link-sub-effect-color: var(--#{$prefix}primary-bg-subtle);

//sidebar dark
$sidebar-dark-bg: #0f1d35;
//sidebar brand
$sidebar-brand-bg: #1b408d;
//sidebar purple
$sidebar-purple-bg: $purple-600;
//sidebar sky
$sidebar-sky-bg: #075985;

Add Custom Sidebar Color

Create your own sidebar colors by cloning brand or dark or any other object from the below code and provide custom name and use the same name in the attribute i.e. data-sidebar-colors="custom". Do the below changes in both the file to get custom attribute working.

Admin/src/assets/scss/_variables-custom.scss

//sidebar dark
$sidebar-custom-bg: #000000;

Admin/src/assets/scss/custom/mixin_sidebar.scss

$themes-sidebar: (
    "custom": (
        sidebar-bg: #{$sidebar-custom-bg},
    )
);

Feel free to contact us via support if you are facing any issues. https://1.envato.market/domiex-admin-dashboard-support