Topic: Adding Custom Skin Color not working
Expected behavior added "skin-extended-color": #2B597C,
Actual behavior error background-color: rgba( map-get($data, skin-extended-color), 0.6); $color: null is not a color. Resources (screenshots, code snippets etc.) .login-content-wrapper{ background-color: rgba( map-get($data, skin-extended-color), 0.6); }
You need to use MDB variables in skin map, here is an example that will add yellow background color to the login-content-wrapper class:
$skins: () !default;
$skins: map-merge(
(
'test': (
"skin-primary-color": yellow,
"skin-navbar": #fff,
"skin-footer-color": #fff,
"skin-accent": #fff,
"skin-flat": #fff,
"skin-sidenav-item": #fff,
"skin-sidenav-item-hover": #fff,
"skin-gradient-start": #fff,
"skin-gradient-end": #fff,
"skin-mask-slight": #fff,
"skin-mask-light": #fff,
"skin-mask-strong": #fff,
"skin-sn-child": #fff,
"skin-btn-primary": #fff,
"skin-btn-secondary": #fff,
"skin-btn-default": #fff,
"skin-text": #fff
),
),
$skins
);
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@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/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';
@each $skin,
$data in $skins {
.#{$skin}-skin {
.login-content-wrapper {
background-color: map-get($data, skin-primary-color) !important;
}
}
}
noveltytech pro premium priority commented 4 years ago
I want to add another variable like "skin-yellow-color" in skin map is it possible
Arkadiusz Idzikowski staff commented 4 years ago
It is not possible to modify the skin map.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.8.2
- Device: Macbook Pro
- Browser: Firefox, chrome
- OS: MacOS catalina
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Please provide a full skin scss code on which we will be able to reproduce this problem.
noveltytech pro premium priority commented 4 years ago
// custom skin $skins: () !default; $skins: map-merge(( "test": ( "skin-heading-font": 'IBM Plex Serif', "skin-transparent-color": transparent, "skin-primary-color": #78509A, "skin-primary-color-dark": #840b55, "skin-extended-color": #78509A, ) ), $skins);
@import "~ng-uikit-pro-standard/assets/scss/core/colors"; @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/variables"; @import "~ng-uikit-pro-standard/assets/scss/core/variables-pro"; @import "~ng-uikit-pro-standard/assets/scss/core/mixins"; @import "~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro";
@each $skin, $data in $skins { .#{$skin}-skin { // Background color @each $color, $value in $theme-colors { @include bg-variant(".bg-#{$color}", $value); } .login-content-wrapper{ background-color: rgba( map-get($data, skin-extended-color), 0.8);
} } }