So I recently added a colour scheme switcher, and I want to talk about it because I think it’s worth talking about. I’m trying to use this website more anyway, so I might as well.
Minimal Javascript
I didn’t want my colour scheme switcher to rely on Javascript. I feel like requiring the user to run an unknown script just to change the colours on a website is… not a great user experience? I want the website to be as usable as possible, even if Javascript is fully disabled.
Therefore, if you look at the code, pretty much all of the colour scheme switching is done with CSS variables. Granted, this is a relatively new feature of CSS, so while it should work on most browsers people use I can’t guarantee 100% compatibility. Regardless, just click the dropdown, choose the colour scheme you want (three options at time of writing, more may be added), and the entire site changes. No Javascript required.
That said, there’s one thing that I did have to use Javascript for.
See, while the colours can be changed with pure HTML and CSS, the
preferred colour scheme cannot be saved that way. A small amount of
Javascript is required in order to save the colour scheme preference in
localStorage. That is the only piece of Javascript used on
the entire site, and it is completely optional. I really wish I could
have managed to do this with no Javascript at all, but that would have
really killed the user experience I feel.
Why these colour schemes?
At the moment, there are three colour schemes available: dark, light, and low contrast. I chose a dark theme as the default in order to be easier on the eyes, but there’s also a light theme available for people who prefer that sort of thing. The real question comes from the low contrast theme. Why would I add a low contrast theme when my previous article went on and on about how important contrast is?
Yes, contrast is important, and I do believe that needs to be the default choice. However, as I have recently learned, low contrast can also be an accessibility feature. Contrast that is too high can cause pain in certain people, and that’s not something I want to cause in anyone. You need to give your eyes a rest sometimes.
Therefore, I put in a low contrast theme. I must admit, I didn’t spend very long on it, mostly just choosing various shades of grey until I found something that looked pretty decent. I’ll probably go back and tweak it at some point, but the sole review I got said it looked good, so I’ll take that as a win.
Flashes
Unfortunately, there is one issue: flashes. As it’s coded now, the website loads before the colour scheme changes. As a result, there will always be a tiny moment when the page uses dark mode before switching to the preferred scheme.
I do want to fix this at some point, but I must admit, I’m not entirely sure how. I’ll be looking into this, and if it’s fixed I’ll update this page, but for now I don’t know how to get around that. Sorry.
Future plans
If there ever exists a method to save tiny bits of data without using Javascript, I am hopping on that bandwagon. I want my website to be as static as possible, and this is already causing my teeth to itch a bit. I realise I’m being a little bit ridiculous, but I have weird principles.
The Javascript file themesave.js is public domain,
because it’s so tiny that it really doesn’t deserve any sort of
copyright. It’s also probably not very good, I cobbled it together after
reading various articles about how to get something like this working.
At the very least, I can guarantee that no simulated intelligence was
used.
Hopefully I’ll have actual content to put on this website soon, I was thinking about doing something with Mark Z. Danielewski’s “Only Revolutions”, but we’ll see how that goes.