Random page colors anyone?
I really like the default bearblog theme, and it is the theme I am using for bagatto-bearblog, which is the base for this site.
Why not game it a little bit?! Let’s create a different theme for each page of this site, while maintaining the overall feel of the original bearblog.
Remember that we need to keep the dark theme dark enough, no matter which color we choose. In sRGB colorspace it is very hard to do, but there are other colorspaces in which it can be achieved. Turns out, all the latest browsers support many colorspaces, such as:
I won’t explain each one of those, but after some reading it turns out that oklch is the one we need. The lch in the name stand for: Lightness, Chroma and Hue. A very good graphical explanation and exploration of the colorspace can be found here.
If we take the original dark background rgb value #01242e of bearblog and paste it into the above site, we get this picture:
On each graph you can see the current available color space, and how the other two variables map into the space. Most iportantly for us, since we want to generate random hue for each page, is that the hue range is continuous, so every hue we generate will be displayed. In this case the whole hue range is possible. The background colors will be along the L line pointed by the red arrow.
For the light background, we only need to change the link color. I want the link color to be the same for dark and light background, so it needs to be light enough for the dark background and dark enough for the light background, which means the lightness will be around 0.5-0.6. I also want the link color to ‘pop’ at the reader, so I take the Chroma value up to the last point where the Lightness line thru it is still continuous:
The red arrow is pointing at the Lightness line thru the hue space, and you can see that the hue range is continuous.
See the code in index.janet and in the page style template templates/partials/style.temple.
That’s all there is to it, and the results are visible on every page of this site.