Topic: Best way to add custom variables/styles/skin
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
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
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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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