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:

Champagne Jello Cups

Everyone likes a little Jello sometimes, right? There’s just something so fun about it.

They’re more fun when you step away from the uber-sweet Jello brand & make your own flavors… and everything’s better with a little booze, right?

(no, I’m not going to talk about the kind of Jello shots you make in college to hide the taste of terrible rum or vodka…)

These are champagne jello shots.

photo 2

I made them for a New Years’s party, and they were great.

I knew immediately that I wanted to serve them in tiny champagne glasses. After confirming such a thing existed (2oz glasses from party city, yay), I went searching through almost a dozen recipes. None hit exactly what I wanted, but in the end I mostly followed this recipe.

I was worried about them being too sweet and not bubbly enough, so I swapped out the sugar for a half-cup of ginger ale. This worked for me – since I didn’t plan on making the “jigglers” shapes, I could get away with adding more liquid.

My final recipe was this:

Champagne Jello Cups

  • Servings: 40-50 2oz cups
  • Print


  • 1 bottle champagne
  • 1/2 cup peach schnapps
  • 1/2 cup ginger ale
  • 4 envelopes Knox gelatin
  • 1 small splash vanilla extract
  • Flat tray to set jello in


  1. Mix about 2 cups of champagne and 4 packets of gelatin together, and let sit for about 1-2 minutes.
  2. Heat mixture until the gelatin dissolves. This will smell pretty weird, but it’s not strong. Don’t let it boil.
  3. Add vanilla & take off heat.
  4. In another bowl, combine the rest of the champagne, peach schnapps, and ginger ale (I used the tray I was setting the jello in, since it wasn’t very shallow).
  5. Mix in the gelatin concoction, stirring gently to keep the mixture carbonated.
  6. Pour into your pan (if not there already), and refrigerate overnight or until set – I left mine at least 20hrs.
  7. Once at the party, I chopped up the pan into cubes and served them in the cups. We ended up with at least 40, maybe more? We kept refilling cups, and people kept eating them 🙂

It didn’t keep as much of the carbonated “flavor” as I was hoping, but the champagne taste was definitely there. I also bought a gold sugar I was going to sprinkle on for the sparkling texture, but in the flurry to get to the party, I forgot it. They were totally fine without it – overall a big hit.

I wonder what I’ll do for the next party?

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.

What an exciting day!