Add a Dark Mode Button to a WordPress Website

If you use WordPress to build a website with a lot of text, such as a novel sharing website. Then, for user experience, you can consider adding a dark mode to the website to avoid the page being too glaring when night owls visit your site. If you don't know how to add dark mode to your website, congratulations, WordPress plugins can easily solve this problem.

Dark Mode for WordPress

Dark Mode for WordPress is a simple plugin for adding dark mode (night mode) to a website.WordPress PluginAfter installing and activating the plugin, a toggle button will appear on the website frontend. There are no extra settings, it works out of the box. The plugin only calls one js file, so there's no need to worry about slowing down the website.Download Link

Blackout: Dark Mode Widget

Blackout: Dark Mode Widget is slightly more feature-complete than the Dark Mode for WordPress plugin above, with an additional customization feature allowing you to set colors and button size/position.Download Link

Darkmode.js

The two plugins above actually both use Darkmode.js. Darkmode.js is an open-source project, project address:https://github.com/sandoche/Darkmode.jsSo if you know how to add code yourself, you can implement dark mode functionality for any website. The simplest way is to directly copy the code below and add it to your website's code to achieve dark mode functionality.

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

You can also customize the js file with the following code, for example, colors.

var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '????', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

If there are items on your website you don't want to use dark mode for, you can disable it by adding the `darkmode-ignore` class, or by adding `isolation: isolate;`.