A Dark Mode guide - with CSS variables and JS
This was first published January 2022, but has been completely rewritten and updated!
This guide is aimed to make displaying dark mode more accessible and stable. I had a long talk with a user of one of my themes, who has some eyesight difficulties, I wanted to improve on accessibility in my themes - beginning with a better dark mode experience.
What we want
- When selected, dark theme to stay dark when refreshing a page
- To prevent default (light) theme from flashing before displaying dark mode when browsing
- If a visitor has dark mode on their computer/device, honor their preference and display dark mode with the option to turn on light mode
- a snappy transition(!) - with a way to override it though!