Adding Custom Skin Color not working

Topic: Adding Custom Skin Color not working

noveltytech priority asked 4 years ago

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); }

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 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);
} } }

// 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); 
 }
 }
 }

Please insert min. 15 characters.

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 0 Best answer

You need to use MDB variables in skin map, here is an example that will add yellow background color to the <code>login-content-wrapper</code> class:

<pre class="prettyprint"><code>$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;
    }

}
}
</code></pre>

Please insert min. 20 characters.

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 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.

Add comment

Write

Create snippet

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: Priority
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

noveltytech

149Support score
30Questions 4Answers 4Snippets