Using Tonesque & Sass to generate color schemes

Last month, I posted about Umbra being released on I’m excited about the release of this one, since I think what we did with colors is really cool.

Click through to see the demo, and be sure to click around on some posts to see the different colors.

The theme defaults to a purple, grey, and gold color scheme, but you can customize this in the customizer. By default, on single pages, it’ll also grab the color from the featured image (or first image in the post).

How did we do it? It’s easier than you might think. By pulling in some libraries from Jetpack, most of the hard work is already done. If you use the theme without Jetpack, you’ll just have the purple/gold theme in the screenshot.

Get a base color from Tonesque

Tonesque isn’t really documented in any user-accessible way, so your best bet is to go right to the source. If you check out theme-tools.php, you’ll see that to load Tonesque, Jetpack looks for theme support. This is a pretty cool feature of core, that you can add support for arbitrary theme features.

So if we want to use tonesque, all we need to do is confirm we support it.

// Support tonesque from Jetpack
add_theme_support( 'tonesque' );

Now we can use Tonesque’s methods. We’ll first create a new Tonesque object, which takes an image URL (you can check out Umbra’s source for how I get the image URL). Once we have that, we can get the sampled color from the image. (If you want to rabbit-hole like I did, you can investigate grab_color & grab_points, to see how the color is picked from the image)

$image = new Tonesque( $image_src );
$color = $image->color();

Create the scheme with Sass

A single color doesn’t really make for an entire color scheme. Luckily Jetpack has more awesome to help us out. To support using CSS preprocessors in the custom css module, it includes libraries for parsing Sass & LESS into plain CSS. Again, check out the source for all the details.

To start, I pulled all my color definitions into a single Sass (.scss) file, along with rules to generate a lot of other colors from a single “base color”. The file I ended up with is a bit of a mess - so if you’re planning on doing this, think about your colors from the start.

Since we’re uploading this to, we can’t use the PHP filesystem methods to read from a sass file. That’s why base-scss.php is a PHP file.

After walking through how Jetpack saves and renders CSS (see get_css), I figured out that I can use the minify method, which will also conveniently minify the generated CSS. Now we can combine the global variable from our Sass PHP file with the real base color. The $sass variable now contains a valid string of Sass, and can be processed to give us our CSS. From here, we’ll inject this CSS into the header on the wp_head hook.

$sass = '$base-color: #' . $color . '; ' . $umbra_base_scss;
$css = Jetpack_Custom_CSS::minify( $sass, 'sass' );

The last step is to wrap all this in caching. We don’t want to run all this processing on every page load every time, it should only run once per color. You can check out how I handled this in generate_css.

Thanks for reading! I hope I gave you some fun ideas for how to work with dynamic colors in your themes. Feel free to ask any questions in the comments :)

Other people doing similar cool things:

  • Color Posts plugin– Jeremy also has a writeup on customizing the plugin’s CSS for your theme.
  • Ryu theme– colors image posts based on the first image.

New Theme: Aventurine

Mel & I have released a new theme for users! Aventurine is a colorful theme with a focus on your content. As always, our themes are fully responsive & child theme ready (we might even have a color-swapped child theme in the works right now :) ).

Check out our intro post.

Psst, Want to help translate one of our themes? Or let us know about a bug? You can contribute to Aventurine through github.


Funny observations from the themes on


I wanted to run some more interesting queries against the themes on, so earlier this evening I pulled down the theme data into a local database. Eventually I want to “feature” some nice but maybe not super popular themes, so I’ve run a few queries to find out how things are rated, what the number of downloads is, etc. So, here are some interesting results.

Bouquet, by Automattic, is the “best” theme — it has the highest rating/downloads combo.

Catch Everest, by catchthemes, is probably a better “best”, with the highest rating/number of ratings/download combo. Sequel, by ZGani, is the “best” child theme.

Interestingly, removing number of downloads doesn’t affect which themes are in the top ~5, just the order. Since number of ratings should correspond to downloads, this isn’t too surprising.

The average theme is rated 8 times, with a score of 60 (3 stars), and downloaded 47,957 times. If I remove the themes with no ratings, the average rating jumps to 88. So… is everyone too nice, or are themes just that great?

Automattic has the highest number of themes, at 54, followed by tskk (32) and (27). If I remove child themes, Automattic is still in the lead (though only 48 now), followed by (still 27), and ThemeZee (23).

The scatterplot above was just thrown together quickly, I wanted to see if the number of tags on a theme affected the number of downloads or rating. The chart has rating on the x axis and downloads on the y, with number of tags controlling the hue (red, fewer tags, blue/purple, more). It doesn’t seem to though, since most of the dots ended up green everywhere- which is about average.

Anyway, that was my exciting night (need to do something while Mel hogs the TV for Dragon Age :) ) - look for some future posts on lesser-known awesome themes!