angular theme color best practices

Topic: angular theme color best practices

Dragonnblack pro asked 6 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?

Add comment

Bartłomiej Malanowski staff answered 6 years ago

1 0 Best answer

Currently, the only way to customize colors is editing _colors.scss file. You can also create your own skin in _skins.scss file with the colors you like

Dragonnblack pro commented 6 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 6 years ago

_skins.scss is that part of the code that we don't share publicly. Please contact me directly at b.malanowski@mdbootstrap.com

Add comment

atrain0789 priority answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

For projects that are using npm, such as the Angular version of this project, editing a file within the codebase is not possible. When pulling in from npm if the MDB lib is updated it would wipe out any changes that I've made to the _custom file. Before MDB when I was using just Bootstrap by itself I would have a file where I override any of the BS4 Sass variables and then import the main BS4 sass file, which would then use my defined overrides since they do not have the !default flag. It would be great if MDB supported something like this instead of relying on editing a file within the codebase. I am trying to get this to work currently, but have been unable to do so. With this, I believe you would only need to redefine the variables you want to override prior to @import-ing the main mdb.scss. Has something like this been suggested before? Thanks in advance.

Nexcom pro commented 5 years ago

Did anyone from MDB support answered this one?

Damian Gemza staff commented 5 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, Damian

Add comment

Bosco free answered 6 years ago

0 0 Best answer

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.

Please insert min. 20 characters.

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, Damian

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: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Dragonnblack

Pro User 12Support score
3Questions 3Answers 0Snippets