CODEWITHSUNDEEP
angularsassbootstrap-4mdbootstrap
Cody Pritchard
Cody Pritchard

Reputation: 887

Angular MDBootstrap Pro: Import current skins primary, secondary, and default colors to .scss file

I am working with MDBootstrap Pro, and I implemented a simple "Skin Picker", allowing me to select a skin and change the colors of my app dynamically.

But, there are certain components that do not change colors when you select a new theme, such as mdb-select. So id like to write custom .scss so that they change as well.

Does anyone know how I can import the current active skins primary, secondary and default colors into my .scss file, in such a way that when i select a different skin, i get the updated color values?

The two source files i know to look in are:

I have tried this:

@import "~node_modules/ng-uikit-pro-standard/assets/scss/core/_colors.scss";

span.primary {
  color: $primary-color;
}
span.secondary {
  color: $secondary-color;
}
span.default {
  color: $default-color;
}

But that only gives me the global default colors, and they dont change when i select a new skin.

Upvotes: 2

Views: 537

Answers (1)

Vlad
Vlad

Reputation: 53

I'm working on the same task right now. Here's the link to official documentation from MDB

https://mdbootstrap.com/docs/angular/css/skins/#custom

To add new custom skin you will need to create it and implement it in your application

// This code should be placed before imports of mdb scss core files
    $skins: () !default;
    $skins: map-merge((
      "test": (
        "skin-primary-color": #fff,
        "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/mixins';
    @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/core/variables-pro';
    @import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

// Also, there is a possibility to add a custom skin class to your theme
// Add the following code after imports of mdb scss core files

  @each $skin,
  $data in $skins {
    .#{$skin}-skin {

      .custom-class {
        background-color: map-get($data, skin-primary-color) !important;
      }

    }
  }

Upvotes: 1

Related Questions