On Thursday, September 19, iOS 13 will release to the public. Along with a host of other features, one of the biggest new additions is a dark mode, which will invert interface element colors in order to keep from blinding you with bright colors at night. What can you do to make your website dark mode compatible? Here are a few options to consider.
Apple’s recommended dark mode implementation
At Apple’s Worldwide Developers Conference in June, Apple previewed iOS 13 for the first time and offered seminars to developers afterward. One of those sessions, entitled Supporting Dark Mode in Your Web Content, explained how to add full dark mode support to websites and even emails.
If you’re hardcoding a website from scratch, this is a fairly easy change to make. Essentially, you change the way colors are specified in CSS so that you can swap from one group to another when a user switches from light to dark mode. This is important because iOS 13 employs automatic dark mode, which can be scheduled from sunset to sunrise or a different custom time. Dark mode can also be implemented any time. Because of this, the ideal solution is to check whether a device is using light mode or dark mode and display the proper colors. This solution would work not only on iOS 13 but also Macs running MacOS Mojave or Catalina.
Unfortunately, however, this solution is much harder to implement in WordPress. Because the Customizer (Appearance → Customize in your WordPress Dashboard) writes the code for the colors you select, you would have to edit the Customizer’s code to change the CSS output to match the format of Apple’s new specification. At the time of this writing, a plugin to automatically switch from light mode to dark mode is not available.
Other options
While an automatic dark mode plugin is not available at this time, plugins to allow users to manually switch from light mode to dark mode do exist. This solution isn’t ideal, but it at least gives you the option to enable dark mode in some form, should you choose to do so. We’ve tested out several different manual dark mode plugins, and Blackout is the best option we’ve found so far. It adds an icon to your website that, when clicked, changes your website from light mode to dark mode. You can customize the size and placement of the icon.
It is somewhat limited in that you can’t customize the dark mode colors, but it’s a good start.
Need help installing a plugin? Here’s how.
Dark mode for the Dashboard
While the Blackout plugin adds this feature for your users, you may wish to have it when you edit your site as well. If so, look no further than the Dark Mode plugin. This plugin provides a new WordPress Dashboard color scheme with darker colors and light text to make editing your site at night easier on your eyes. As with other Dashboard color schemes available, the plugin allows you to change the color scheme for each user.
Do you plan on using dark mode on your computer or phone? Let us know in the comments!
