Topic: angular theme color best practices

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



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

atrain0789 priority answered 4 years ago


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 4 years ago

Did anyone from MDB support answered this one?

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

Bosco free answered 4 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 4 years ago

Dear Bosco, thanks for your solution! Hope that it helps other peoples with the same problem. Best Regards, Damian


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