Using Tonesque & Sass to generate color schemes

Last month, I posted about Umbra being released on WordPress.org. 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.

Note
Since we’re uploading this to WordPress.org, 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

Ingredients

  • 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

Directions

  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 WordPress.org 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!

Funny observations from the themes on wordpress.org

I wanted to run some more interesting queries against the themes on wordpress.org, 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 wp.org themes just that great?

Automattic has the highest number of themes, at 54, followed by tskk (32) and InkThemes.com (27). If I remove child themes, Automattic is still in the lead (though only 48 now), followed by InkThemes.com (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!