Topic: Angular Pro theme / scss theming

tim2 pro asked 5 years ago

What is the proper procedure to theming using the Angular Pro theme? I am trying to import bootstrap and change styles in my style.css folder. I need to change the primary colors for my whole app.

This is the closest I've gotten, but it seems to break the MDB styles:

@import "../node_modules/ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "../node_modules/ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";

$theme-colors: (
 primary: $red

/* finally, import Bootstrap */
@import "../node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss";

What i do for override? I import all mdb.scss into my styles.scss Now i remove from angular.json the import of mdb (be sure u have styles.scss imported) Now Styles.scss is imported with mdb.scss now create new color.scss in src/scss and copy all core/color.scss to them. Now override styles.scss color import for your new color.scss. Now u can create safe new variables and modify themes

Vladislav Stoitsov free answered 5 years ago

This is part of angular.json

                        "styles": [

and I can override only some variables. For example I can override $theme-colors but I cannot override $breadcrumb-bg or $btn-box-shadow

Damian Gemza staff commented 5 years ago

Dear @Vladislav Stoitsov

To overwrite variables which are used in one of the components - for example, buttons, you have to import the buttons scss file in styles.scss, and then overwrite the variables.

I described this in the previous answer (3 months ago).

Best Regards,


Vladislav Stoitsov free answered 5 years ago

What if I want to overwrite globally?

Damian Gemza staff commented 5 years ago

Then you have to overwrite the variables in the global styles.scss file.

Damian Gemza staff answered 5 years ago

Dear tim2,

If you want to overwrite one of our MDB variables, you have to overwrite one of your desired variables (for example $primary-color: red) and import core/bootstrap/functions, core/bootstrap/variables, core/colors, core/mixins, core/variables, core/global, core/helpers and at the end file which you want to overwrite (for example buttons), free/buttons in the styles.scss file.

Here's the code which allow you to overwrite primary class in buttons:


$primary-color: red;
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/global";
@import "~ng-uikit-pro-standard/src/lib/assets/scss/core/helpers";

@import "~ng-uikit-pro-standard/assets/scss/free/buttons";

Best Regards,


tim2 pro commented 5 years ago

_Edited_I've tried your code above. It doesn't seem to work unless i add: @import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"; at the very bottom (but then the mdb designs break).

tim2 pro commented 5 years ago

EDIT: Adding @import "~ng-uikit-pro-standard/assets/scss/mdb.scss"; fixes the overall mdb design. This still is not changing btn-primary though, but it does change link colors, text-primary, etc..

tim2 pro commented 5 years ago

EDIT: It looks like btn-primary color is coming from: $skins: () !default; $skins: map-merge(( "white": ( "skin-primary-color": #4285F4, "skin-navbar": $white, "skin-footer-color": #6f7178, "skin-accent": #4285F4, "skin-flat": #F9F9F9, "skin-sidenav-item": #4285F4, "skin-sidenav-item-hover": rgba($black-base, .05), "skin-gradient-start": #ababab, "skin-gradient-end": $white, "skin-mask-slight": rgba($white, .5), "skin-mask-light": rgba($white, .65), "skin-mask-strong": rgba($white, .8), "skin-sn-child": #4285F4, "skin-btn-primary": #4285F4, "skin-btn-secondary": #fc685f, "skin-btn-default": #454545, "skin-text": #424242 ),

tim2 pro commented 5 years ago

I was able to get it working by taking the entire $skins: map-merge((...)) and adding it in my style.css and then adding an the @import "~ng-uikit-pro-standard/assets/scss/mdb.scss"; at the end.

This takes up alot of space though... is there a way to cherry-pick what I need from skins?

Damian Gemza staff commented 5 years ago


Unfortunately, there's no possibility to cherry-pick what you need from skins. You have to iterate through all of the skins.

Best Regards,


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: 7.4.3
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No