Topic: angular theme color best practices
Dragonnblack pro asked 7 years ago
Hello,
I would like to customize the default colors (primary color ...)Currently, I only found one way it is edited the file _colors.scss node_modules folder but I do not find it very modular ... Do you have a simple way to overload the sass variables?
Bartłomiej Malanowski staff answered 7 years ago
Dragonnblack pro commented 7 years ago
Hello, Can we have an example of a _skins.scss file and where to put it? the solution of modifying the file _colors.scss is not viable in production because to each deployer it is crushed ...Bartłomiej Malanowski staff commented 7 years ago
_skins.scss is that part of the code that we don't share publicly. Please contact me directly at b.malanowski@mdbootstrap.comatrain0789 priority answered 6 years ago
Nexcom pro commented 6 years ago
Did anyone from MDB support answered this one?Damian Gemza staff commented 6 years ago
Dear Nexcorn, The problem you are describing is in our plans to solve, but it may take some time before the problem is solved. We need to think hard about how this can best be done and test all the possibilities. Unfortunately, I cannot guarantee you any deadline, not even an approximate one. As a workaround I can offer you to read this article. It can guide you to the solution you need. Link: https://medium.com/afosto/how-to-setup-a-bootstrap-project-like-bootstrap-does-it-3825a726b09a Best Regards, DamianBosco free answered 6 years ago
Hi,
I just solved this issue on our project. I placed the following code in the _custom.scss file:
$newSkin:(
"myProject":(
"skin-primary-color": #e55c37,
"skin-navbar": #e55c37,
"skin-footer-color": #e55c37,
"skin-accent": #e55c37,
"skin-flat": #e55c37,
"skin-sidenav-item": #e55c37,
"skin-sidenav-item-hover": #e55c37,
"skin-gradient-start": #e55c37,
"skin-gradient-end": #e55c37,
"skin-mask-slight": #e55c37,
"skin-mask-light": #e55c37,
"skin-mask-strong": #e55c37,
"skin-sn-child": #e55c37,
"skin-btn-primary": #e55c37,
"skin-btn-secondary": #e55c37,
"skin-btn-default": #e55c37,
"skin-text": #e55c37
)
);
$skins: map-merge($newSkin, $skins);
At this point I had to copy/past in the ENTIRE loop from _skins.scss that starts with:
"@each $skin, $data in $skins { .... "
Yes, that is a TON of code to copy in to the custom.scss, but the issue is that MDB loads the _custom file after that for each loop has already run. So even if you map-merge your skin in, it won't generate the css that it should. To avoid editing source code that may update later, I chose to re-run that loop. With the code I supplied, you would use 'class="myProject-skin"' in your <body> tag and your defined colors should show up.
Damian Gemza staff commented 6 years ago
Dear Bosco, thanks for your solution! Hope that it helps other peoples with the same problem. Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No