Topic: Adding Custom Skin Color not working

noveltytech priority asked 3 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 3 years ago

Please provide a full skin scss code on which we will be able to reproduce this problem.


noveltytech priority commented 3 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);
} } }


Arkadiusz Idzikowski staff answered 3 years ago


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 3 years ago

I want to add another variable like "skin-yellow-color" in skin map is it possible


Arkadiusz Idzikowski staff commented 3 years ago

It is not possible to modify the skin map.



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