How to Implement Dark Mode on Your Website Without Plugins

October 8, 2023

How to Add Dark Mode to the Website Without Plugins?

If you’re looking to add a dark mode to your website without using any plugins, you’re in luck. By following a few simple steps, you can achieve a dark mode theme for your website. This article will guide you through the process.

1. Understanding the Concept of Dark Mode

Before we dive into the implementation, it’s essential to understand what a dark mode is. Dark mode, also known as night mode or dark theme, is a display setting that uses dark-colored themes instead of the default light-colored themes. It reduces the amount of light emitted by your screen, providing a more comfortable viewing experience, especially in low-light conditions.

2. Rebuilding the Website in Dark Colors

If you’re open to rebuilding your website in dark colors, this approach is relatively straightforward. Here, we assume that your website is built using the Gutenberg default builder blocks and the Twentytwo Three theme.

To implement the dark mode, you need to define the corresponding CSS styles. Add the following CSS code to your theme’s CSS file or the Custom CSS section of your WordPress dashboard:

.dark-mode {
    background-color: #222222;
    color: #ffffff;
}
.dark-mode a {
    color: #ffffff;
}
.dark-mode h1, .dark-mode h2, .dark-mode h3, 
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #ffffff;
}

The above CSS code sets the background color, text color, and link color to create a dark mode appearance. You can modify the colors to match your desired dark theme.

Once you’ve added the CSS styles, you need to provide user controls to switch between light and dark mode. You can achieve this by modifying your header or footer template and adding the following JavaScript code:

<script>
    function enableDarkMode() {
        document.body.classList.add("dark-mode");
    }
    
    function disableDarkMode() {
        document.body.classList.remove("dark-mode");
    }
</script>

In the above JavaScript code, the enableDarkMode() function adds the dark-mode class to the <body> element, and the disableDarkMode() function removes it.

To provide user controls, you can add a switch or button element to your header or footer template. For example:

<button onclick="enableDarkMode()">Enable Dark Mode</button>
<button onclick="disableDarkMode()">Disable Dark Mode</button>

With this setup, your users will be able to switch between light and dark modes by clicking the corresponding buttons.

3. Conclusion

In summary, adding a dark mode to your website without using plugins is achievable. By rebuilding your website in dark colors and adding some CSS and JavaScript code, you can provide your users with a seamless dark mode experience. Remember to test your website thoroughly to ensure that all elements and functionalities work properly in both light and dark modes. Happy coding!