Topic: Code Contribution/Example: A more easily customisable color setup
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. :-)
!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; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No