Dark Mode in the Upcoming Default WordPress Theme “Twenty Twenty-One”?

WordPress 5.6 will come with a new default theme: Twenty Twenty-One. I personally really like the way it looks at the moment, with pastel colors and a simple and elegant design. Honestly, I think it is a theme that will age very well… although that’s something that only time will tell.

The theme is currently under development, and if you pay close attention to make.wordpress.org blog, you’ll find some interesting discussions about it. A few days ago, for example, I encountered an interesting post where Mel Choyce had shared a discussion that took place on the Slack channel pondering whether Twenty Twenty-One should include a dark mode or not.

Since dark modes are trendy right now, and it’s something we’ve actually talked about recently on the blog, I thought it would be interesting to share the discussion here, with you. But first of all, let’s see what a light and a dark version of the theme would look like (you can move the vertical separator to side and side):

As Mel summarizes in the WordPress blog post I mentioned earlier, here’s how they’ve initially envisioned such a feature should be integrated into the theme:

We’ve built in a Customizer setting that lets site owners opt their sites out of supporting Dark Mode, for greater design control. 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.

Mel Choyce at WordPress.org

As you can see, their initial intention was to give everyone (i.e. both to the owner of the website and to its visitor) the ability to customize the theme to their liking. The problem is that, once this solution was proposed, a lot of doubts and questions were raised.

On the one hand, there are those who believe that “adding visual adjustments to the web hinders the user experience,” although “it allows the visitor to adapt the content to their needs.” On the other hand, there are those who think that “even the owner of the website should not be able to modify this setting,” as a dark mode is something that’s implemented with the visitor need’s in mind. Someone also raised an issue with color schemes and logos, as visual elements that work on a light theme might require a specific version to be used in the dark version counterpart or else things wouldn’t look great.

I find these conversations very interesting because you can learn a lot of how an open source project like WordPress moves forward. Regarding the issue at hand, they’ve decided that, for the time being, this dark mode will not be included in the theme itself but will be offered as a separate plugin instead.

If you want to see how the topic evolves or you want to contribute your opinion, visit the blog and leave your opinion. I will personally follow the evolution of this plugin closely, because the truth is that it has very interesting things and it seems to me that it can be a great source of ideas to correctly integrate a dark mode to the themes that we implement in the future.

For example, in the functions.php file of this plugin you can see how they use some of the news that we have available in the CSS world and that we already told you about. Among them we have the use of special query selectors to detect user preferences:

@media (prefers-color-scheme: dark) { ... }

as well as the usage of CSS variables to implement color schemes:

html.respect-color-scheme-preference .editor-styles-wrapper {
  --global--color-background: var(--global--color-dark-gray);
  --global--color-primary: var(--global--color-light-gray);
  --global--color-secondary: var(--global--color-light-gray);
}

On the other hand, we also see they use some auxiliary functions such as get_relative_luminance_from_hex :

/**
 * Determine if we want to print the dark-mode switch or not.
 *
 * @since 1.0.0
 *
 * @return void
 */
function tt1_dark_mode_switch_should_render() {
  return (
    get_theme_mod( 'respect_user_color_preference', true ) &&
    127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex(
      get_theme_mod( 'background_color', 'D1E4DD' )
    )
  );
}

which is defined in the Twenty Twenty-One theme itself. Browsing the source code of a relatively small project like this can help you get a lot of ideas on how to solve this specific problem on your own projects.

So, what do you think? Do you like dark modes? Do you use it, or want to use it, on your website? Leave your opinion in the comment section below!

Featured image by Efe Yağız Soysal on Unsplash.