To give some backstory to this post, I was asked to create a simple website for a college assessment. I was interested in the light/dark mode theme abilities on websites and some applications. This led me down a rabbit hole of creating a light and dark mode theme switcher on my website, there are many variations of creating a theme like this. I chose to use JavaScript and I will discuss the steps I took in this post.

Adding/removing a dark class to the body element

To begin I simply added a class to the body element in the HTML DOM, and called this dark. To add and remove this dark class you simply select the body element and its class list and either add or remove the specified class name. You can see my example in the code snippet below.

For more examples and information on this see Add a Class and Remove a Class.

// adding
document.body.classList.add("dark");

// removing
document.body.classList.remove("dark");

Controlling the website style based on the dark class

So like I have already mentioned, I added a class to the body element in HTML DOM, I named this dark, this made the most sense to me and my reference. I then used the dark class in my CSS stylesheet to assign some colours to be used when the dark class is present on the body element

How do I allow the user to use this code?

Open questions

1. How do I capture the user's preference?

2. How do I use the user's preference?

How do I capture the user's preference?

I have this light/dark mode toggle set up as a checkbox, and to use this I want to know if the checkbox had been checked. I will explain this below.

Using the input checkbox with the name of darkmode. I can capture when a user selects the dark mode theme by using the code below:

<input name="darkmode" type="checkbox" onclick="alert('user enabled darkmode');"/>

If I want to capture whether the checkbox is checked or unchecked use the code below:

<input ... onchange="alert('darkmode enabled?'+ this.checked);"/>

this represents the current element, input (in this context), because this element is a checkbox, this has a .checked property.

How do I use the user's preference?

Next, I want to use the user’s choice, so whether the checkbox is checked or unchecked to decide what the theme of the website should be.

I made a function that expects a boolean. If it's true it outputs enabled and if false it outputs disabled.

<script>
    function toggleDarkMode(enabled) {

        if (enabled == true) {
            console.log("Darkmode enabled");
        }
        else if (enabled == false){
            console.log("Darkmode disabled")
        }
        else
            console.log("Invalid input")
    }
</script>

The next step of this method is to update this code to:

1. be called from the input checkbox, using the value of this.checked

2. add/remove the “dark” class to/from the body element

function toggleDarkMode(enabled) {

    if (enabled == true) {
        console.log("Darkmode enabled");
        document.body.classList.add("dark");
        document.getElementById("darkModeLabel").innerHTML = "☀️";

        localStorage.setItem("themePreference", "dark")
    }
    else if (enabled == false) {
        console.log("Darkmode disabled")
        document.body.classList.remove("dark");
        document.getElementById("darkModeLabel").innerHTML = "🌙";

        localStorage.setItem("themePreference", "light")
    }
    else
        console.log("Invalid input:" + enabled);

}

The toggleDarkMode method is being used in the input element, in the onchange event, see below:

<input name="darkmode" type="checkbox" onchange="toggleDarkMode(this.checked);"/>

This input HTML element calls on the function toggleDarkMode when the checkbox is changed.

I am using this to represent the input element and the .checked property to distinguish whether the checkbox is checked or unchecked in the input element.

My answer was derived in part from this stack overflow post: https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox/49716131#49716131

Setting the default theme

I had the default theme set to dark mode using the dark class in the body element while setting up the dark mode function. To set the default to load as the light mode I deleted the dark class in the body element, this class will now only appear in the body when the toggleDarkMode method is used for the checkbox being checked.

How does this code work?

A function toggleDarkMode is created, this function accepts a boolean value.

A darkclass is applied to the body element of the HTML file.

The toggleDarkMode function is applied when an onchange event occurs to the input element, which identifies whether a checkbox is checked or unchecked.

If the checkbox is checked the value is set to true, this adds the dark class to the body element and changes the theme to dark mode.

If the checkbox is unchecked the value is set to false, this removes the dark class from the body element and changes the theme to light mode.

The code then sets the themePreference in the localStorage of the browser (https://www.w3schools.com/jsref/prop_win_localstorage.asp)

My learning...

My learning from creating this light and dark mode theme switcher came from a problem-solving point of view. I needed to have the theme change from a light theme to a dark theme using an icon. I needed to solve the problem of what I needed to do to get the theme to change, and I started out by breaking the problem into steps. This helped me by making the larger problem into smaller problems and made the whole thing easier.

Steps

1. Create a button or checkbox to click that will change the theme

2. Create a dark class with CSS elements so that I could see that the changes worked

3. Have the button/checkbox tell me if it was clicked or unclicked, I did this by using console.log

4. Create the JavaScript method that would add and remove the dark theme from the body

5. Incorporate this method into the input element (checkbox/button) of the theme switcher

6. Style the button/checkbox

7. Finish the CSS styling of the themes