Here is a free utility so you can quickly modify existing color themes and easily create brand new color themes using CSS.
I recently paid a CSS guru to upgrade the Wizard's Toolkit CSS library to make it look even better and more modern. Then I integrated those changes into both the core Wizard's Toolkit library and this CSS Maker. All the new files are available for download.
Originally built for Wizards Toolkit and MaterializeCSS, this can easily be modified for any HTML/CSS library. If you are using MaterializeCSS this is the ideal way to test and perfect your CSS files to make sure they will look good for all aspects of your pages. If you are using Bootstrap or some other HTML framework, it would only take you a couple hours to modify this to work specifically for your environment.
With the use of JScolor and some fancy JavaScript you can see your color choices change the page in real-time. The HTML page is built to show all the major elements we use of MaterializeCSS.
The basic concept is your library will have a core CSS file. For us that’s materialize.css. Using variables with Cascading Style Sheets is extremely powerful. We want to override their default colors in a way that affects all the many HTML elements.
So we created a wtkGlobal.css file with the global overrides. We wanted both a Light theme and a Dark theme option so we also created a wtkLight.css and wtkDark.css.
Next we wanted to overlay different color themes. So we created wtk{SomeColorName}.css files which are nothing but a set of CSS variables. By listing them in this order in your HTML it properly sets up everything.
- materialize.min.css (or whatever CSS framework you are using)
- wtk{YourColor}.css
- wtkLight.css or wtkDark.css
- wtkGlobal.css
This utility allows you to pick any of the CSS files in the folder and see how the page will look. This requires the CSS file to start with 'wtk' and excludes our wtkLight, wtkDark and wtkGlobal files. You can then modify each of the main color types and see immediately what the effect is in both Light and Dark mode. Once you have designed a color theme you like you can save it.
I also created a page on the web where you can build color themes and have the CSS shown in a browser tab for you to "Save As". The below link provides you access to this page plus all the source code and all our WTK CSS files.
For full usage this utility requires PHP (but to use the online website does not). With that you’ll be able to easily modify it for other HTML/CSS libraries like Bootstrap or whatever you’re using. Of course any good coder can easily modify this code to work with other languages and still benefit from the JScolor and JavaScript coding for testing and making new CSS color templates.
Download the free utility at:
https://wizardstoolkit.com/css-maker/
That page will also send you a link where you can generate CSS color themes without needing PHP.
Brought to you by Wizards Toolkit the PHP, SQL and JavaScript low-code development library.
Wizards Toolkit
https://wizardstoolkit.com
MaterializeCSS
https://materializecss.com
JScolor
https://jscolor.com
Top comments (0)