Changing the Bleak Ghost theme Color Scheme (with CSS Variables)

Bleak was originally created by zutrinken, and it is a lovely theme. It's sleek, responsive, and organized.

Example of original bleak theme

Taking a peek under the hood had me even more impressed. The coding is clean and easy to understand. Which means it didn't take long to figure out how I could tweak the theme to my liking.

The main thing I wanted to change was the colour scheme. The shade of green the author chose was nice, but I have a kind of blue thing going on (just look at my YouTube Channel). Luckily there were only two main colours used throughout the theme, so once I had those hex codes I could search through the stylesheet and just replace them to the colours I wanted.

First off, I set up a forked repository of the original theme. I've creatively called it Bleak-Draconis. If you like what I've done here, you can download the ZIP, extract and upload it to your Ghost Blog themes.

If you don't have a Ghost Blog—well then! You can learn about it here!

A recent development with CSS (and something I REALLY could have used last year) are CSS Variables. It was added around October 2015 to Webkit and it makes changing multiple selectors far more simpler. Basically, you can set a few variables at the top of your style sheet (like color1, color2, font1, etc...) and then use those variables throughout your CSS file. If you ever want to quickly make changes across your stylesheet, all you have to do is edit those variables.

I just want to take a moment and relish in how fantastic this addition is and think about all the instances I'm going to be taking advantage of this in the future.....

... if you want to learn about this from the source, check out Webkit's post about it.

Basically, the workflow is this:

  • set up a pseudo-selector :root {} at the top of your CSS.
  • Add all your variables you plan to use later in your file.

:root { --main-color: #3D9ED9; --secondary-color: #25668F; --font-title: 'Kankin'; --font-main: 'Merriweather Sans'; }

  • When you want to use those variables, wrap the name within var() instead of what you'd normally put.

.post-text { color: var(--main-color); }

The only requirement when naming variable names is that they must begin with --.

So that's basically how I went about changing all the colours in my blog. I've tested it in Firefox and Chrome and it works fine, but I'm not sure about Safari. Microsoft Edge doesn't work... but I'm not too sad about that. If I get around to adding support across all browsers I will probably make a pull request to the main theme to add this in, so anybody

In the meantime if you want this yourself, either follow what I've outlined here or take a look at my repo. Bleak's original theme uses #36D995 for the main colours and #2DB77E for the secondary colours. It wont take long to find/replace with variables of your choosing.

Happy coding!