Best way to add custom variables/styles/skin


Topic: Best way to add custom variables/styles/skin

Glaser pro asked 6 years ago

Hi,

I need to provide a custom theme for an application. I found some instructions, how it can be done, but unfortunately I did not get it fully working.

Based on this instruction https://mdbootstrap.com/docs/angular/css/skins/#custom I could add a custom skin. But I also need to change some variables. Within this article https://mdbootstrap.com/docs/angular/css/variables/ it should be possible to override the skin, styles and variables. But when I import the ng-uikit-pro-standard as a node module how can I add custom data to these files?

Do I need to check out the source from git, change the custom* files and do a custom build locally?

Can you give me some hints for what is the best option?

Thank you very much, Gerold


Damian Gemza staff answered 6 years ago

Dear Gerold,

Could you please specify, which variables do you want to overwrite?

If you specify which variables you want to overwrite I would like to provide you with the best solution for your problem.

Best Regards,

Damian


Glaser pro commented 6 years ago

Hi Damian,

I tried to update the variable $link-color, which is used in the core/bootstrap/variables. The definition in the file is $link-color: theme-color("primary") !default; This is just an example, I need to overwrite some other variables within this file either.

Best regards, Gerold


Arkadiusz Idzikowski staff answered 6 years ago

Please try this code:

$link-color: black;

@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";
@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";

.custom-class {
  color: $link-color;
}

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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