Code Contribution/Example: A more easily customisable color


Topic: Code Contribution/Example: A more easily customisable color setup

sam pro asked 5 years ago

I was upgrading to a new version and noticed how colors were being setup as part of mdb.scss could be made better, and by better I mean more flexible. Right now the SCSS file for the colors contains some code to post process the nested array of colors to create a whole bunch of stuff based on these base colors. However if you have an existing color set you want to use, you either override it everywhere youself, or customize this file. By separating _color.scss into multiple files, its possible to declare customizations simply by editing the main scss file that imports all the MDB component scss files. Demonstration of the changes and a suggested file layout are here https://gist.github.com/techdragon/dedbe590c50ecccd8bd5 If that file layout is overly complicated the customization improvements can be had by simply moving the SCSS code that exists in the _post-processor.scss in that gist link into a separate file from the SCSS file where all the colour variable names are defined. I broke the color definitions into multiple files since it just felt more tidy to me, but obviously not everyone wants so many files. :-)

Michal Szymanski staff answered 5 years ago

Thanks Sam for idea, we've added your proposition to our list and we'll consider to execute it in the future ;)

sam pro answered 5 years ago

Something else I noticed while upgrading, it may be worth making use of the !default directive and setting up the order the colours are imported so that all the desired colours are defined as variables. and then you can make the main colour scheme definition a lot cleaner by switching to using the variable names in the class definitions.

.default-color { background-color: $default-color !important; }
.default-color-dark { background-color: $default-color-dark !important; }
.primary-color { background-color: $primary-color !important; }
.primary-color-dark { background-color: $primary-color-dark !important; }
.secondary-color { background-color: $secondary-color !important; }
.secondary-color-dark { background-color: $secondary-color-dark !important; }
.elegant-color { background-color: $elegant-color !important; }
.elegant-color-dark { background-color: $elegant-color-dark !important; }
.stylish-color { background-color: $stylish-color !important; }
.stylish-color-dark { background-color: $stylish-color-dark !important; }
.special-color { background-color: $special-color !important; }
.special-color-dark { background-color: $special-color-dark !important; }
.unique-color { background-color: $unique-color !important; }
.unique-color-dark { background-color: $unique-color-dark !important; }

Please insert min. 20 characters.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No