Ghost theme - Part 6: Colours

Time for the final part in this series to finish up all the basics. The colours!

The first thing that comes into my mind here is the fact that this is a blog with a lot of content for reading. So my goal is to make it easy on the eyes and provide a few colourful accentuations here and there.

Again there are great resources on the internet. One of these, that is already pretty common in the programming scene is the solarized theme.
Checking out the page you can see the different colours that are being used for it. So I am going to take this as a guide line and use the light theme for the background and content.

The Code

Again we are going to create a helper file. You should know the drill of where to put it and how to import it by now. So lets do it for a file called `colours.css`, which we are going to to fill with the following content:

:root {
    --color-background: #fdf6e3;
    --color-content: #073642;
    --color-headings: #002b36;
}

body {
    color: var(--color-content);
    background-color: var(--color-background);
}

h1, h2, h3 , h4, h5 {
    color: var(--color-headings);
}

Now we will have a beige background and darker text on it. One optimization here is to extract the variables in to variables.css file.

How to continue?

Now the base is done. Though not all colours are applied yet, think links, both clicked and unclicked.
What else needs to be set? Some accents.
To get some colour inspirations another great resource is https://flatuicolors.com/ . Just go ahead and pick something you like, then apply it to your theme, where ever you see fit.

Finished

Thats it for this series. While the last 2 instances were glanced over pretty quickly from my side there is a lot more knowledge to be learned about these topics. If you come across any great resource please let me know via Twitter or by contacting me via the contact page.

I hope you got some info out of these and are ready to explore even more of the modern web development world.

Also please take note that I have switched to the vanilla-framework, which is an opinionated CSS framework from Canonical, that fits my use case perfectly. In addition its from my colleagues and I know the effort and knowledge they put into it, so I can highly recommend it. Check out my post on migrating to it for more info.