Automating CSS Dark Mode

The most common implementation of dark mode is a button which enables or disables dark mode, based on user preferences. By default then, we can store their preference and keep their dark or light mode enabled while using our website.

Another way to do this, is to automatically change the website to dark mode at a certain time, or perhaps based on their computer's settings. Let's look at how to do that.

Dark Mode Based on Operating System

Setting dark mode based on the operating system's settings is the easiest way to enable dark mode. If the user is using dark mode on their phone, tablet or computer, we can then show our website in dark mode by using the following CSS:

/* Light mode CSS */
body {
    background: white;
}
@media (prefers-color-scheme: dark) {
    /* If the operating system is using dark mode, then apply this CSS */
    body {
        background: black;
    }
}

Now we can have specific styles applied only when the operating system is in dark mode, which is usually automatic for most operating systems. That means dark mode will auto enable at a certain time. This also has pretty broad support:

Allowing User Override

If you want to allow a user override, then you can add a custom class to the body tag, which you can then target to override dark and light mode styles:

<button id="dark-mode"></button>

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("dark-mode").addEventListener("click", function(e) {
        if(!document.body.classList.contains("dark-mode")) {
            document.body.classList.add("dark-theme");
        } else {
            document.body.classList.remove("dark-theme");
        }
    });
});

Now, when the user clicks the button dark-mode, we will add a class to the body, which will enable dark mode (based on our CSS).

Enable Dark Mode Based on Time

If you have the need to set dark mode at a certain time every day, we can do that with Javascript. In this example, we will load up the file darkmode.css if the current hour is less than 6am, or more than 7pm.

document.addEventListener("DOMContentLoaded", function() {
   let time = new Date().getHours();
   if(time < 6 || time > 19) {
    let link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'darkmode.css';
    link.media = 'all';
    document.head.appendChild(link);
   }
});

More Tips and Tricks for CSS

• A Complete Guide to How the CSS not Selector Works
• How to do Deletion Animations with CSS
• CSS Transitions
• CSS Introduction
• Set a div or block to its content's width in CSS
• CSS Individual Transform Properties
• Putting Javascript in Your CSS with Paint Worklets
• Automating CSS Dark Mode
• Updating CSS Variables with Javascript
• An Interactive Guide to CSS Flex Box