How to add Dark Mode to WordPress: text editor, backend, frontend

This is actually a question that was bugging me for some time: How to add dark mode to WordPress?

Moreover, how to apply dark mode to the very text editor, too?

I’ve been working with tons of typed out text and other written material, tinkering in WordPress over the years and then decided to just take a chance and start this blogging journey.

But my eyes? Oh, my eyes!

Yeah, they didn’t like it at all…

Photo by Justin Morgan on Unsplash

Oh, wait. Someone is going to read what I wrote this time, too. And they might be doing that at night, when phone brightness becomes the enemy.

Or… they simply enjoy dark mode as much as I do.

I gave myself a task to find the best possible solution for applying dark mode there, there… and everywhere.

And I’ve found it!

Keep reading to learn more about today’s WordPress Plugin personal recommendation, named WP Dark Mode.

Also, personal tip for adding/utilising dark mode to your classic text editor is at the very end of the article!

A Word on Dark Mode and WordPress Plugin

Dark mode is more than just a web design trend.

It’s a way to enhance your website’s performance, usability, and appearance. Dark mode is a color scheme that uses dark colors, such as black, gray, or navy, as the background and light colors, such as white, yellow, or blue, as the foreground.

Dark mode can offer many benefits for both users and website owners, such as:

• Reducing eye strain and improving readability by lowering the contrast and brightness of the screen
• Saving battery life and reducing energy consumption by using less backlight
• Enhancing the aesthetic appeal and creating a modern and elegant look for your website

However, adding a dark mode to your WordPress site can be challenging if you don’t have the right tools or skills. You may need to edit your theme’s code, install multiple plugins, or deal with compatibility issues. Moreover, you may want to give your visitors the option to switch between dark and light mode according to their preferences or device settings.

Screenshot taken from: WPPOOL Official Website

WP Dark Mode is the best dark mode plugin for WordPress that works automatically without going into any complicated settings. It detects your visitors’ device preferences and dynamically delivers a handcrafted, expert-designed dark theme experience for them. You can also add a dark mode toggle button to your website to let your visitors choose between dark and light mode anytime they want (the thing we did on this blog!).

WP Dark Mode works flawlessly across all operating systems, including Windows, Android, iOS, and macOS. It supports all major browsers, such as Chrome, Firefox, Safari, and Edge. It also works with any WordPress theme and plugin, so you don’t have to worry about breaking your site’s functionality or design.

WP Dark Mode is not only easy to use but also powerful and customizable. It offers many features and options that let you control every aspect of your dark mode website. Here are some of the main features (some of them are included in Pro version though):

• Floating Switch Button: You can display a dark mode floating switch button in the footer of your website. You can customize the button’s position, shape, color, and icon.
• Time-Based Mode: You can enable dark mode based on time. You can set a specific time range when dark mode will be activated automatically on your website.
• Multiple Color Schemes: You can choose from 11 predefined color schemes for your dark mode website. You can also create your own custom color scheme with unlimited colors.
• Image Brightness: You can adjust the brightness of your images in dark mode to make them more visible and appealing.
• Elementor Widget: You can use the WP Dark Mode widget in Elementor to add a dark mode switch button anywhere on your website.
• Excludes Pages: You can exclude specific pages or posts from dark mode if you want to keep them in light mode only.
• Custom CSS: You can add custom CSS code to further customize the appearance of your dark mode website.

Additional features are:

• Backend Dark Mode: You can enable dark mode for your WordPress dashboard and admin area. You can also choose from different color presets for your backend dark mode.
• OS-Based Mode: You can enable dark mode based on the operating system preference of your visitors. If they have enabled dark mode on their device settings, they will see your website in dark mode automatically.
• Shortcode: You can use the [ wp_dark_mode_switch ] shortcode (with spaces next to the brackets removed) to add a dark mode switch button anywhere on your website.
  Here’s what it looks like included in this post (click/tap on it to test it):
• Gutenberg Block: You can use the WP Dark Mode block in Gutenberg to add a dark mode switch button anywhere on your website.
• WooCommerce Compatibility: You can enable dark mode for your WooCommerce store and products. You can also exclude specific products or categories from dark mode if you want.
• Social Share: You can add social share buttons to your website that are optimized for dark mode. You can choose from different social media platforms and icons.
• Advanced Settings: You can access more settings and options to fine-tune your dark mode website. For example, you can enable or disable dark mode for specific user roles, devices, browsers, or screen sizes.

How To Add Dark Mode to WordPress Frontend and Backend

To install WP Dark Mode on your WordPress site, follow these simple steps:

1. From your WordPress dashboard, go to Plugins > Add New.
2. Type ‘WP Dark Mode’ in the plugin search bar.
3. Click on Install Now next to the corresponding plugin.
4. Once installed, click on Activate.
5. Upon activation, go to WP Dark Mode > Settings to configure the plugin according to your needs.

That’s it!

You have successfully added a dark mode option for your WordPress site. 🙂

If you want to get the premium version of WP Dark Mode, you can visit the official website and choose from different pricing plans. You’ll be able to compare Annual and Lifetime billing options and pick what fit your needs best.

How To Add Dark Mode to WordPress Block Editor (Gutenberg)

Step 1: You need WP Dark Mode plugin Activated, if you haven’t done it already.

Step 2: Now, go to the Posts or Pages section of the WordPress’ dashboard.

Step 3: Pick a post or a page to Edit (if you have both Block and Classic editors installed for your WordPress, there will be an option to pick between the two. Pick the Block Editor one and the editing mode will open).

Step 4: You’ll now see something like this in the upper left corner:

Step 5: Click on that option labeled with red and pick Dark Mode. Well done!

How To Add Dark Mode to WordPress Classic Editor

Although the Block Editor (Gutenberg) is now widely used, many users prefer using the Classic Text Editor instead (including me – old habit, I guess…).

If you don’t have/don’t see a Classic Editor on your WordPress, please refer to this article to see how to activate it.

Now, activating the Dark Mode for the Block Editor is pretty straightforward, but here’s how you do it for the Classic one (far easier than it may appear and it actually doesn’t require any plugin!)

Step 1: I assume you’ve already activated the WP Dark Mode plugin for your backend, because you want your entire WordPress to be dark.

Step 2: In your browser (new tab), type in the following: chrome://flags/#enable-force-dark

Step 3: You should now be seeing something like this:

Step 4: Now, click on that drop-down menu that says Default and pick the following Enable option like on the image below:

You’ll now get a message that says: “Your changes will take effect the next time you relaunch Chrome.” together with a Relaunch button (press it if you want the dark mode application to take effect immeditely). Open your WordPress text editor again and check it out.

Now, the additional tip from me to you would be to bookmark the Chrome flags (Experiments) page you’ve accessed in the step above, then make that bookmark easily accessible (for example, putting in on the very Bookmarks bar). That way, you can easily turn on/turn off the Chrome Dark Mode as you please.

Note: Once you Enable the Chrome Dark Mode, it will apply not only to your WordPress text editor but to all the pages you’re visiting in that session, unless you turn it off. You do that it in the exact same way you Enable it, although I click on Default instead of Disabled to turn it off.

At the time of writing this article, I haven’t played much with the rest of the options you’ve seen in that drop-down menu, so I’m unable to advise you on that at the moment. I might cover them and some other Chrome tips & tricks in my future posts, if the opportunity arises.

___________

Was this article helpful to you?

Have you found an additional workaround for this issue?

Let us know your thoughts in the comments! 🙂

___________

© cashmeere