How to theme properly

This is a drawn out post on how to make good themes that are accessible and friendly to people's eyes. You might also learn some CSS and colour theory from this, too.


Strangely enough, a good dark/night theme has a dark background with light text. A light/day theme has a light background with dark text. You also want a lot of contrast, but not too much that it hurts to read.

W3 has specifications on how much contrast is needed for large and small text to be read easily:

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

(Large text is 18pt or larger, and AAA is a better grade than AA. You should strive for AAA unless you're absolutely sure AA is reasonable.)

If you're okay with running some JavaScript, this website lets you interactively check if your colours are up to the standard. There are also some standards for link colours which require they're also identifiable against the other text.

Oversaturated colours are also a no-no, because those can cause eye strain. Shitposters would hate you forever. Be very careful, or don't because it's easy to avoid if you actually test your theme, to not do this. Check if you have colour pairs people may have problems seeing. One easy test is to take a screenshot of your theme, and take out one (or two) of the red-green-blue channels in your image.

The Raddle navigation bar is #c00, which has a saturation of 100 and a lightness of 80 according to the GIMP. The Material guidelines also have some example colours, and tools for checking contrast against them.

Usually you shouldn't need more than two or three hues to decorate your theme. You might pick a strong primary colour for the navbar and links (for example, red), and a pale secondary for quotes and accenting backgrounds (such as the pale green used by default).


People have differing opinions on space. It's technically useless, but it helps with readability and looks nice. The holy search engine reccomends 16 points of spacing for most objects, and at least 8 points for each side of any interactive objects. (This adds up to 16 for two objects next to each other.) That might be too much for you, but you should probably use at least half an em of whatever text you're padding out, which is usually at least 7pt.


Shadows are also mysterious emphasis tools, making it look like a light source is present on the website, and showing a gap between the background and your focus targets. (No, if you tilt your head around, the shadows will not move.) Material suggests two for maximum realism, but one will suffice. Usually only a few pixels/points are enough to make it look nice.