#light dark

Light, Dark and Spring

30 Marts 2019

rstylr:

A Dark Mode guide-with CSS variables and JS
by@rstylr

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(!)

[View guide]