WordPress 5.6 is set to include a new default theme, Twenty Twenty-One, designed to give users a blank canvas for the block editor. The theme doesn’t fall under any particular category and is meant to be suitable for use across different types of websites. One new feature that has very recently come under consideration is support for a dark mode that can be toggled on or off.
Contributors have raised the possibility of including a dark mode in several issues while the theme has been in development. Mel Choyce, who is leading the design on the default theme, published a summary of the team’s recent discussions about which options the theme should make available for site owners and viewers in support of dark mode, or if the feature should simply be scrapped.
“We’ve built in a Customizer setting that lets site owners opt their sites out of supporting Dark Mode, for greater design control,” Choyce said. “Additionally, we’re considering adding a front-end toggle so site viewers can turn Dark Mode on/off, regardless of their OS/Browser preference. This setting would only show if a site allows Dark Mode support.”
Twenty Twenty-One Light and Dark Modes
Choyce outlined five different combinations of options for supporting it, including two options that allow site owners to disable it, regardless of the user’s selection in their OS/browser. Two other options require the site to support dark mode but differ in whether or not the visitor is allowed to toggle it on or off.
Dark mode was a late addition to the default theme’s development. Choyce said the idea seems like a good opportunity to explore but ideally the team would have intentionally designed the feature before development started.
In the comments of the post, contributors are discussing the many intricacies of adding this feature to a theme that will be on by default for new WordPress sites. A few commenters noted there might be issues and surprises with logos and transparent images. For this reason, several made the case for shipping it as an opt-in feature and not on by default.
Others did not see the need for users to be able to toggle dark mode on/off for individual websites when they already have controls available through their system or browser preferences.
Kjell Reigstad contends that users’ expectations have not yet translated into demand for this feature.
“As much as I’m a fan of dark mode in general (I use it on all my devices and it definitely helps to reduce eye strain), I think the general public views it as ‘a thing that apps do’ — not something that websites do yet,” Reigstad said. “As mentioned above, this theme could be a step towards changing that perception, but the feature’s novelty is something to keep in mind.”
WordPress 5.6 core tech lead Helen Hou-Sandí suggested it might be better to develop the feature as a plugin, instead of pushing for it to be ready in a short time frame.
“My instinct right now is that it would be best to split dark mode for Twenty Twenty-One out into a plugin as a form of opt-in, primarily because I think that will both ease the burden for meeting the bar for core ship and also gives space for the feature to be iterated on outside of the core development cycle,” Hou-Sandí said. She also noted that users will be doing things with the theme that core contributors cannot anticipate and a plugin is an easier route for responding to those needs.
“By separating it out, I think it has a better chance of reaching a point where it encompasses enough by default to be a theme setting without too much futzing on the user’s part, or even enough of a thing to be a feature for all themes at large,” Hou-Sandí said.
Choyce and Carolina Nymark agreed with this suggestion and announced a decision in the WordPress Slack #core-themes channel this morning, based on feedback on the post.
“Carolina Nymark and I made the decision to move Dark Mode out into a plugin,” Choyce said. “This will allow us to better address all of the edge cases we’ve been encountering without slowing down the progress of bug fixing within the core theme.”
The plugin is being developed on GitHub where contributors will explore how to support the feature moving forward.
