Here is a free utility so you can quickly modify existing color themes and easily create brand new color themes using CSS.
Originally built for Wizards Toolkit and MaterializeCSS, this can easily be modified for any HTML/CSS library.
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.
For the video/visual version of this information see:
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
So 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://wizbits.me/CSSmaker
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)