Skip to main content

Here is a step by step guide that shows you how to code basic website dark mode toggle using html, css, and javascript. If you want to see this in action you can try clicking on the dark mode toggle button in the top right of this website. Otherwise checkout this demo.

Here the data is stored locally in the browser using localStorage. The variable is checked the next time the page loads (or another page in the site) and the css is applied accordingly.

First create a basic webpage:

<!DOCTYPE html>
<html>

<head>
    <title>Dark Mode Toggle</title>
</head>

<body>
    <h1>
        Dark Mode Toggle Using localStorage
    </h1>
    <button onclick="toggle_light_mode()">
        Toggle Light Mode
    </button>
</body>
</html>

Next add the Javascript that will handle the toggling function immediately before the closing body tag. This code:

  • Gets the body element
  • Checks the lightMode variable
  • If the lightMode variable = ‘dark’ it sets it to ‘light’ and sets the data-state of the body to light
  • And vice versa.

Please note: In this example I decided to use a data attribute that I called ‘data-light-mode’ however you could simply toggle css classes if you prefer. For more information on data attributes checkout this link. I also get the base body tag for my ‘app’ variable because when using Codepen I am not able to easily include an id or class on the body element (otherwise I would normally do that instead).

Place this code immediately before the closing body tag:

<script>
function toggle_light_mode() {
    var app = document.getElementsByTagName("BODY")[0];
    if (localStorage.lightMode == "dark") {
	localStorage.lightMode = "light";
	app.setAttribute("data-light-mode", "light");
    } else {
	localStorage.lightMode = "dark";
	app.setAttribute("data-light-mode", "dark");
    }		
}
</script>

Next create some CSS styling for the dark mode. You can can create this style as an external css document (and link to it in the head), or simple place it inline in the head immediately before the closing head tag:

<style>
body {
    transition: background-color .3s;
}

body[data-light-mode=dark] {
    background-color: #000;
    color: #eee;
}
</style>

Now check your document in the browser and the toggle button should work.

This is all fine for the toggle but we also want the page to apply the most recently set state when the page loads. The way I did this was by including the following code in the html immediately below the opening body tag. I found that it was important to include this code near the top of the page so it is run as soon as possible.

This code checks if the lightMode variable = dark and if so sets the datastate accordingly for the css to apply to. Otherwise the page loads in the normal default ‘light’ mode.

<script>
    var app = document.getElementsByTagName("BODY")[0];
    if (localStorage.lightMode == "dark") {
        app.setAttribute("data-light-mode", "dark");
    }
</script>

Now try switching to the dark mode and then closing and reopening the page. Hopefully it is all working OK.

Taking it Further

Of course this is pretty basic and there is really no limit to what you can do with the dark mode style. Here is an example that simply adds a few additional styles to the button and inverts the colours in dark mode:

button {
    padding: 1em;
    font-size: 1em;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: .3s;
}

button:hover {
    opacity:.5;
}

body[data-light-mode="dark"] button {
    background-color: #fff;
    color: #000;
}

Otherwise this is the just the first time I have attempted to code a dark mode toggle and I’m sure there are plenty of ways to achieve this with more elegant code. Please don’t hesitate to get in touch with any feedback via email at contact@henryegloff.com.

Filed under:
Coding, Web Development

All Tutorials

Henry Egloff
Twitter Facebook Linked In Instagram Codepen Behance Youtube