Twenty Twenty-One Dark Mode update

WordPress 5.6 is closing in on BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 4, and we are at a point where a final decision needs to be made about whether to include the Dark Mode functionality in the default theme, or whether it should ship separately in a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party.

With this post, we are asking for your feedback, and ways that we can improve the user experience.

Since the last discussion, the Dark Mode functionality has been placed back into the theme to make it easier to test.

Two test scrubs have been completed and we have listened to the feedback and tried to make the setting easier to use.

Changes include:

  • Dark Mode Support is opt-in.
  • The button used to turn Dark Mode on or off was removed from the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor.
  • In the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. and on the front, the button is now placed at the bottom right (left on RTL). The button is hidden when you scroll down to not distract from reading.
  • We renamed the Customizer section to “Colors & Dark Mode” to make the setting easier to find.
  • The description in the Customizer was updated and includes a link to the themes support page.
  • A notice in the Customizer has been removed.
  • The Privacy Policy has been updated with information about LocalStorage.

Dark Mode Walkthrough

To test the latest changes, you need to download the development version of the theme from the GitHub repository.

Install and activate the theme. The colors will be the default mint green background and dark text.

Go to the Customizer and open the Colors & Dark Mode panel:

Customizer panels.

Here you can customize the background color. If the background is light, a dark text color is used.

If the background is changed to dark, the text color is white and the Dark Mode Support option is hidden.

The Dark Mode option is a checkbox below the color picker for the Background Color.

The Dark Mode Support option is opt-in. When the option is enabled:

  • The colors respects the device settings.
  • A new button is visible on the front and in the Customizer. This button is used to turn Dark Mode on or off. This means that site owners and visitors can choose their preference independent of their device settings.
  • The same colors are used on the front, editor, and Customizer.

When Dark Mode is on, a dark grey background color is used. Images and borders also have a lower contrast.

When Dark Mode is off, the color in the background color option is used for the light background.

#bundled-theme, #dark-mode, #twenty-twenty-one