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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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