Topic: Change a pre-defined skin's primary color
                  
                  1001albertpadilla
                  free
                  asked 6 years ago
                
How can I change the default primary color of a particular pre-defined skin? e.g. cyan-skin
                      
                      Arkadiusz Idzikowski
                      staff
                        answered 6 years ago
                    
Unfortunately it's not possible to change single variable, you would need to overwrite all skin colors. You can use the code from our documentation and change the name of the skin, for example for cyan-skin:
$skins: () !default;
$skins: map-merge((
  "cyan": (
    "skin-primary-color":      red, // your custom color
    "skin-navbar":             #114861,
    "skin-footer-color":       #114861,
    "skin-accent":             #f0b247,
    "skin-flat":               #24879d,
    "skin-sidenav-item":       rgba(29, 65, 82, .8),
    "skin-sidenav-item-hover": rgba(29, 65, 82, .8),
    "skin-gradient-start":     #114861,
    "skin-gradient-end":       #45b0c0,
    "skin-mask-slight":        rgba(21, 78, 96, .5),
    "skin-mask-light":         rgba(21, 78, 96, .65),
    "skin-mask-strong":        rgba(21, 78, 96, .8),
    "skin-sn-child":           #ffa742,
    "skin-btn-primary":        #ffa742,
    "skin-btn-secondary":      #45b0c0,
    "skin-btn-default":        #114861,
    "skin-text":               #fff
  )
), $skins);
@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/pro/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/pro/skins";
Documentation for custom skins: https://mdbootstrap.com/docs/angular/css/skins/#custom
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 7.5.1
 - Device: Laptop
 - Browser: Chrome
 - OS: Win 10
 - Provided sample code: No
 - Provided link: No