Dark/Light Mode Toggle Switch Pattern A11y

Try it for yourself: https://timsilva.com/dm/
On CodePen: https://codepen.io/timsilva/pen/xxVzRVr

I was recently on the hunt for an accessible, elegant solution for bringing the trendy dark/light-mode pattern to the web. To my surprise, no one had fully solved this yet, at least not at the level I was hoping for. I tried to merge various code snippets together and ended up building this micro-interaction entirely from scratch instead based on my own list of requirements that focus on respecting user-preference above all else (plus some of my own flavors of visual and motion design). I built this using JavaScript and CSS, I used jQuery but I’m sure this could be accomplished with vanilla JS fairly easily (go easy on me, I’m a designer-first 😜).

I see dark/light mode on the web as the next massive leap forward since the responsive/adapting wave of 2011~2013. This is my contribution and take on how it should be done. I also included the ability to have dark/light mode favicon supported in this since I wanted a wholistic, shippable solution. Note that using a mid-tone gray or colored favicon, you can absolutely get by with one. 😉

Super open to any feedback or forks.

Requirements:
1.) Design a beautiful, minimal toggle switch with a buttery-smooth animation.
2.) Crystal-clear states and affordances. Clickable, subtle, dual-state toggle labels.
3.) On the first visit, respect the user's OS-level choice of dark/light mode (or auto).
4.) As a fallback, default to the brand's choice by adding or omitting the “dark” class on the body tag in the markup.
5.) While viewing the website and updating the OS-level preference, auto-update via a listener (no refresh required).
6.) Allow the user to manually override their OS-level preference by clicking or tapping the toggle switch.
- At first, I had the favicon synchronized with both manual and OS-level changes. I changed that. See #8.
7.) Remember the user's most recent choice (via the toggle or OS), store that locally, and serve again next time.
- If a user clears their browser's cache, the next visit will respect their OS-level preference like during the first visit.
- If a user changes their OS-level preference without the web page currently open, that setting will not apply on their next visit.
8.) Keep the favicon synchronized with the OS-level setting at all times for optimal favicon contrast against the browser chrome.