Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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: https://mdbootstrap.com/docs/angular/css/skins/


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.

FREE CONSULTATION

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

Status

Answered

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