As I mentioned in the first post here, this website was stiched together at speed to update what was an creaking old Wordpress site. Unfortunately, I didn’t take my own advice and build without accessibility as a primary concern - now I’m working to address that.
I started by wanting to add a dark mode, and out of curiosity ran a Lighthouse audit…
Just how bad is it?
According to Lighthouse, it isn’t great.
I’m less concerned initially about the performance, a cursory glance spots some easy wins there. To be fair to me, some of them are a hold over from the theme I have based the site on, but I will aim to address them as soon as possible.
However, the accesibility score of 65 does raise some eyebrows!
An hour or so minor tweaks, and a more extensive than I had hoped dive into the slider plugin I am using and we now have a much better score.
Now onto darkmode!
Able to now say that at least my site is pretty accessible, onto what I actually wanted to look at - adding a dark mode toggle.
Researching the best methods for implimenting this I came across an article on the ever-useful CSS tricks. Read the article. This exhaustive article really does cover everything you could need to know about implimenting a dark mode, including supporting the ‘prefers-color-scheme’ functionality.
So that’s the next plan for this site, a user friendly toggle that respects the users presets. Lets see how that pans out!