# My first attempt at adding dark mode to a website using JavaScript

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](https://www.w3schools.com/howto/howto_js_add_class.asp) and [Remove a Class](https://www.w3schools.com/howto/howto_js_remove_class.asp).

```csharp
// 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:

```csharp
<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:

```csharp
<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.

```csharp
<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
    

```csharp
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:

```csharp
<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](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](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