WordPress Admin Color Scheme Generator


This is day 23 of my WordPress Developer Advent Calendar. Lately, there has been a lot of buzz around WordPress admin color schemes. Sarah published a post on the Tavern which gives you a few options:

So this got me thinking… wouldn’t it be cool if you could enter a few colors into a generator and it spits out a stand-alone WordPress plugin which contains the custom color scheme? Nothing more, nothing less. If you are a freelancer, this would be really cool, cause you can generate a personalized color scheme plugin for an individual customer. Well, I built it! And it’s a WordPress plugin too. So this plugin generates other plugins.

Admin Color Scheme Generator Plugin

The plugin can display the generator form in the admin, under the Tools menu: Admin Color Scheme Generator Or you can use it on the front-end. To use it on the front-end, you will need to include some code in your page template:


I have installed it on my blog and you can test it out right here, right now! The code for the plugin is on Github, so take a look and contribute if you feel like it.

Under the Hood

I borrowed some ideas from the Admin Color Schemes plugin, in the way that is uses SASS to easily create a color scheme stylesheet from literally 5 lines of SASS code:

$base-color: #0c4da1;
$highlight-color: #ed5793;
$notification-color: #43db2a;
$action-color: #eb853b;
@import "../admin";

I found a cool PHP SASS compiler, called phpscss, which I use to generate the actual stylesheet in the zip. Just include the file and the rest is easy:

require_once 'includes/phpscss/';		
$scss = new scssc();
$css = $scss->compile( $scss_code );

I also borrowed a lot from the generator code, but more about that in my next post.