Sidebar Colors

We have provided multiple colors sidebar options and which seems very easy to have it. You need to change the below attribute from the yiii2\views\domiex\partials\body.php.

Light Colors

data-sidebar="default"

Dark Colors

data-sidebar="dark"

Brand Colors

data-sidebar="brand"

Purple Colors

data-sidebar="purple"

Sky Colors

data-sidebar="sky"

Use Custom Sidebar Colors

To display sidebar content in dark mode, you can use the data-sidebar-colors="dark" attribute. You can also create your own sidebar colors by clone 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".

Admin/Main/src/assets/css/themes-color/sidebar-color.css

[data-sidebar-colors="dark"] {
    --color-sidebar:                var(--color-gray-800);
    --color-sidebar-border:         var(--color-gray-800);
    --color-menu-title:             var(--color-gray-500);
    --color-sidebar-text:           var(--color-gray-400);
    --color-sidebar-bg:             var(--color-primary-500);
    --color-sidebar-text-hover:     var(--color-gray-50);
    --color-sidebar-bg-hover:       var(--color-primary-200);
    --color-sidebar-text-active:    var(--color-gray-50);
    --color-sidebar-bg-active:      var(--color-gray-200);
    --color-effect:                 var(--color-gray-800);
}

[data-sidebar-colors="brand"] {
    --color-sidebar:                #1a57d4;
    --color-sidebar-border:         #1a57d4;
    --color-menu-title:             #bcc5e6;
    --color-sidebar-text:           #c0c8f8;
    --color-sidebar-bg:             var(--color-primary-500);
    --color-sidebar-text-hover:     #ffffff;
    --color-sidebar-bg-hover:       var(--color-primary-50);
    --color-sidebar-text-active:    #ffffff;
    --color-sidebar-bg-active:      var(--color-primary-50);
    --color-effect:                 #1a57d4;
}

[data-sidebar-colors="purple"] {
    --color-sidebar:                var(--color-purple-950);
    --color-sidebar-border:         var(--color-purple-950);
    --color-menu-title:             #b98fd7;
    --color-sidebar-text:           #b98fd7;
    --color-sidebar-bg:             var(--color-purple-950);
    --color-sidebar-text-hover:     #dfd3eb;
    --color-sidebar-bg-hover:       var(--color-purple-50);
    --color-sidebar-text-active:    #dfd3eb;
    --color-sidebar-bg-active:      var(--color-purple-50);
    --color-effect:                 var(--color-purple-950);
}

[data-sidebar-colors="sky"] {
    --color-sidebar:                var(--color-sky-900);
    --color-sidebar-border:         var(--color-sky-900);
    --color-menu-title:             #8ea2b5;
    --color-sidebar-text:           #8ea2b5;
    --color-sidebar-bg:             var(--color-sky-900);
    --color-sidebar-text-hover:     var(--color-sky-50);
    --color-sidebar-bg-hover:       var(--color-sky-50);
    --color-sidebar-text-active:    var(--color-sky-50);
    --color-sidebar-bg-active:      var(--color-sky-50);
    --color-effect:                 var(--color-sky-900);
}

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".