Best way to add custom variables/styles/skin

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

Glaser pro asked 5 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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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;
}

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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 5 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Glaser

Pro User 5Support score
1Questions 0Answers 0Snippets