2019 became the year of Dark Mode. Nearly all consumer Operating Systems (OS) received updates this year to support Dark Mode. Some devices, like Android phones, may have these updates delayed by their manufacturer, carrier, or both. I wrote last week on how to setup Dark Mode on these various devices.
My favorite part is that all Browser vendors have released this year (or will release shortly) Dark Mode capable browsers. This is not just changing the user interface to match the devices Dark Mode setting. This is also supporting the prefers-color-scheme CSS media query so that websites and web applications can adjust to Dark Mode as well.
Current Browser Support
The following browsers currently support the prefers-color-scheme CSS media query.
- Chrome (76 or later)
- Edge (76 or later)
- Firefox (67 or later)
- Opera (62 or later)
- Safari (12.1 or later for MacOS and 13 or later for iOS/iPadOS)
The new Edge with support for the prefers-color-scheme media query is scheduled for release tomorrow. However, anyone can try it out today.
Internet Explorer and all older versions of these browsers do not support the prefers-color-scheme media query.
Does Your Browser Support Dark Mode?
Regretfully, at the time of writing, my blog does not yet support Dark Mode and the prefers-color-scheme media query. However, I created a CodePen to help you find out if your browser is ready. Check it out.
It is likely that your browser is ready. You may notice various sites already adjust to Dark Mode for you that previous had a Light Mode interface (e.g., Twitter.com). If you create or maintain websites and web applications, now is a good time to start developing support for a Dark Mode interface in addition to a Light Mode. I will be writing more on how to do this starting next week.