Topic: Change a pre-defined skin's primary color

1001albertpadilla free asked 5 years ago


How can I change the default primary color of a particular pre-defined skin? e.g. cyan-skin


Arkadiusz Idzikowski staff answered 5 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


1001albertpadilla free commented 5 years ago

Cool. Thanks a lot!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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