creativetimofficial / ct-material-dashboard-pro-angular

68 stars 35 forks source link

How can i change sidebar color? other then Red, white and black #362

Open renatoredes opened 4 years ago

renatoredes commented 4 years ago
renatoredes commented 4 years ago

src/app/layouts/admin/admin-layout.component.html file.

rarestoma commented 4 years ago

Hi @renatoredes,

Thank you for working with our products and sorry for the late response.

For more colors, you have to add new style in scss/dashboard/_sidebar-and-main-panel.scss.

Exemple for background-color="red" on line 383:

   &[data-background-color="red"]{
    @include sidebar-background-color($gray-base, $white-color);
    .nav li .dropdown-menu .dropdown-item{
      color: $white-color;
    }
}

For example, you want to add purple background-color. The code for this new color would be:

&[data-background-color="purple"]{
    @include sidebar-background-color($brand-primary, $white-color);
    .nav li .dropdown-menu .dropdown-item{
      color: $white-color;
    }
}

Please let me know if it works.

Thank you, Rares

jeasomoza commented 4 years ago

sorry but where do you define the variables $brand-primary

rarestoma commented 4 years ago

Hi @jeasomoza,

You can find the brand Colors in src/assets/scss/core/variables/_brand.scss.

Thank you, Rares