Add a Night Mode Button to a WordPress Website

If you have built a text-heavy website with WordPress, such as a novel sharing site, then for the sake of user experience, you might consider adding a night mode to your website to avoid the page being too glaring for night owls visiting your site. If you don't know how to add night mode to your website, congratulations, WordPress plugins can easily solve this problem for you.

Dark Mode for WordPress

Dark Mode for WordPress is a simple plugin for adding night mode (dark 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 loads 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-rich than the Dark Mode for WordPress plugin mentioned above. It adds a customization function, 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 night mode functionality for any website. At its simplest, you can directly copy the following code snippet and add it to your website's code to enable night mode.

<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, for 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 be affected by night mode, you can disable it by adding the `darkmode-ignore` class, or by adding `isolation: isolate;`.