Topic: Custom theme with custom colors

appbolaget pro asked 6 years ago


What is the correct approach to defining a custom theme with custom colors without having to change the source files in the node_modules folder?

I read a few other threads here and they all seemed to suggest to edit files in node_modules folder which isn't really an option for me. There must be another way, right?

kizmar free commented 6 years ago

I was wondering the same thing for React. We use continuous integration, and editing something inside the "node_modules" folder doesn't fly. I'm kind of surprised that's the expected way to customize this. Editing files in the "node_modules" folder is generally bad practice. I tried a couple things, but ended up creating copies of `mdb.scss`, `core/_colors.scss` and `core/_variables.scss` into my app and altering those so I could overwrite variables.

ojorge1984 free answered 3 years ago

I can't customize the colors when I use the mdbBtn directive, because this is putting an important! to scss classes

Arkadiusz Idzikowski staff commented 3 years ago

What approach did you try and which color did you want to overwrite?

ojorge1984 free commented 3 years ago

I did something almost identical to the proposed solution here. WHEN I use the btn.btn-primary, btn.btn-secondary, etc ... classes if it works correctly, but when I decide to use the mdbBtn directive, the colors revert to the default ones

Arkadiusz Idzikowski staff commented 3 years ago

You should always use mdbBtn directive when you use MDB Angular buttons. Styles added with directive will always have higher priority than the global styles.

Roman free commented 2 years ago

What is the correct way to change colors when I use mdbBtn then?

Arkadiusz Idzikowski staff commented 2 years ago

@Roman What colors exactly do you need to change?

Arkadiusz Idzikowski staff answered 5 years ago

You can also take a look at our example on how to add custom skin:

ike353 pro answered 5 years ago

I created a scss folder in my root directory and added a file called custom.scss

├── scss/
│   └── custom.scss
└── node modules/
    └── ng-uikit-pro-standard/
        ├── assets/
        ├── bundles/
        ├── ⋮
        └── public_api.d.ts

inside of custom.scss I put the scss variables and imported the relevant files:

$primary-color:        #BADDAD;
$primary-color-dark:   darken($primary-color, 10);
$secondary-color:      #ACE007;
$secondary-color-dark: darken($secondary-color, 10);
$default-color:        #9C9C9C;
$default-color-dark:   darken($default-color, 10);

@import "~ng-uikit-pro-standard/assets/scss/core/colors";

and finally, in the angular.json of the root directory under projects > your-project > architect > build > options > styles

"styles": [

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No