Theme-Skin

web
mobile

Aroquiassamy LA ROZE pro premium asked a year ago

Hi @Damian,

I'm Using SideNav and I applied skinfor.eg Deep-purple-skin. I want to apply the theme background color to my main background and I browsed node module and I found the code on css as

background-color: $sidenav-background-color;

I want to apply the same color that is displayed on side nav on _sidenav.scss so how to achieve that color on my style.scss for every skins that I apply on body tag kindly guide me..


You can add your own data to the skin with this code:

@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";


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

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


  }
}

pedrojrivera commented a year ago

That worked great for creating classes based on the skin!

Next question: How would I go about generating scss variables based on the skin now?

@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";


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

    $skinPrimary: map-get($data, skin-btn-primary) !important;
    $skinSecondary: map-get($data, skin-btn-primary) !important;

    .skin-primary {
      background-color: map-get($data, skin-btn-primary) !important;
    }
    .skin-secondary {
      background-color: map-get($data, skin-btn-secondary) !important;
    }
    .testingtesting {
      background-color: map-get($data, skin-btn-default) !important;
    }


  }
}

This is what I am passing into the skins loops. I'm not sure if this in generating the variables or not as you can't really see variables after render. All I get is undefined errors when trying to use these variables despite importing the whole MDB library in the file where the variable is being called.


Arkadiusz Idzikowski staff commented a year ago

Could you provide more information about the errors?


pedrojrivera commented a year ago

It's a simple undefined error. I am trying to use a scss variable ($skinPrimary) and it isn't defined. I have an scss file with the above code in it. The file itself is just an scss partial being imported into my main.scss file for the whole application. Creating new classes based off of the skin works great (.skin-primary etc.).

Any thoughts on if it's even possible to create these scss variables using the skins loop?

   @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";


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

        $skinPrimary: map-get($data, skin-btn-primary) !important;
        $skinSecondary: map-get($data, skin-btn-primary) !important;

        .skin-primary {
          background-color: map-get($data, skin-btn-primary) !important;
        }
        .skin-secondary {
          background-color: map-get($data, skin-btn-secondary) !important;
        }
        .testingtesting {
          background-color: map-get($data, skin-btn-default) !important;
        }


      }
    }


h1 { color: $skinPrimary;}

Failed to compile.

./src/assets/stylesheets/main.scss (./node\_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node\_modules/postcss-loader/src??embedded!./node\_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/stylesheets/main.scss)Module build failed (from ./node\_modules/sass-loader/lib/loader.js):

undefined ^ Undefined variable: "$skinPrimary". in C:\\Users\\username\\Documents\\Company\\Work\\app\\src\\assets\\stylesheets\\themes\\default\_customThemeClasses.scss (line 25, column 10)

Arkadiusz Idzikowski staff commented a year ago

I'm afraid it's impossible to create a new variable like that.


pedrojrivera commented a year ago

Is there a different way to create a variable from the library skins file or do I just need to customize the loop myself?


Arkadiusz Idzikowski staff commented a year ago

You need to customize the loop with new classes like in the example I provided.


Damian Gemza staff answered a year ago

Dear Aroquiassamy,

Please try to use the below code in the styles.scss file to get the value of the $sidenav-backgroud-color variable.

@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";
.body-color {
  background-color: $sidenav-background-color;
}

Best Regards,

Damian


Aroquiassamy LA ROZE pro premium answered a year ago

Hi @Damian,

Thanks for the Help but actually I'm Changing the SKINS *dynamically* so i need the selected skins color.


Damian Gemza staff answered a year ago

Dear Aroquiassamy,

There's no variable for actual selected skin color.

You have to check which skin are you using at this moment and use this skin variable.

Best Regards,

Damian


pedrojrivera commented a year ago

Hey so I'm in a similar boat. I need to be able to use the colors of a skin in areas not explicitly defined in the _skins.scss file.

Example: I make a custom card component and I want the top of the card to have a color inherited from the skin being applied to the application. Besides using the primary-color css class, what are my options?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop-Lenova
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No