Topic: ModalDirective (mdbModal) forces the default skin for whole app

Christian free asked 4 years ago

Expected behavior

ModalDirective should use the theming of the currently active skin.

Actual behavior

Once a ModalDirective gets rendered, the theme resets to the default skin. The component seems to ship its own skins and overrides classes like 'bg-primary' with '!important' statements.

Resources (screenshots, code snippets etc.)

Please give advice what you need. We can provide source access if needed.

The skinning was done according to:

Konrad Stępień staff answered 4 years ago

Hi @Christian,

You can find the solution in this page. It is possible to create custom styles for components that use skins. Something like this in your global styles:

@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

@each $skin, $data in $skins {
    .#{$skin}-skin {
        component .bg-primary { // Also, you can remove 'component' for set globally bg-color into all components
            background-color: map-get($data, skin-primary-color) !important;

Best, Konrad.

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes