Create a new brand color

[groovemen]

Hello there,

In order to add a new color let's say "blue" you have to create the classes/styling for the component that you want to use. First of all, you have to create new variables. For example, if you want a button with your new color, you will need to have the .btn-blue​ class.

Go to this file: assets/scss/material-kit/variables/_bootstrap-material-design.scss and at line 80 you have to add your custom hex for the new variable: $brand-blue: #123456 !default;and then you have to go to assets/scss/material-kit/variables/_buttons.scss at line 40 you will see other variables which are declared so yours have to look like this:

$btn-blue-color:                 #fff !default;
$btn-blue-bg:                    $brand-blue !default;
$btn-blue-border-color:          $btn-blue-bg !default;

Now, you have to go to assets/scss/material-kit/mixins/_buttons.scssand search after @mixin bmd-raised-button-color. Inside of the @mixin, you have to add:

&.btn-blue {
  @include bmd-raised-button-variant($btn-blue-color, $btn-blue-bg, $btn-blue-border-color);
}

Now, after you will recompile the SCSS, your new color, and btn-blue class will be created. And like this, you have to search in the project and create new styling for the components that you need to be styled with your new color.

Hope that information helps you. Stefan