Change a pre-defined skin's primary color

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