Dark mode & accessibility improvements in Zuari
This update has been a long time coming. I had added a ticket to support dark mode almost a year ago when I first came across the Webkit support blog post. The code sample was straightforward:
@media (prefers-color-scheme: dark) { :root { --special-text-color: hsla(60, 50%, 70%, 0.75); --border-color: white; } }
Philip added the initial support and with a few adjustments to the Customizer we added the ‘Allow the operating system’s dark mode to override my color settings‘ checkbox. I didn’t want to force this change on every site because it would break the colors that people have picked for their page and headers. But if you do select it, the site changes colors based on the operating system’s setting:
More recently, I was able to complete my laundry list of accessibility improvements including:
- Adding
aria
markers where needed - Making sure all HTML was semantic
- Improving keyboard navigation
You can get all these changes in version 1.4.0 from Github, or the latest from the themes repository. I have also requested another round of review from the WordPress theme review team so that I can officially add the accessibility-ready
tag, but, I am not sure what the process here is. Hoping someone picks it up soon π€π½