In this tutorial we are going to learn how to create switch between dark and light theme using vanilla JavaScript and CSS. We will also be using browser localStorage to persist the theme.

So let’s get started with below HTML and CSS.

and following CSS

If you save, above markup in a file and load in browser you should see below output. Please make sure you load the page using a local server.

Let’s give theme switcher button life that is located on top-right corner.

Step 1

Set a data-theme attribute on body element as follows

We have not set any value to data-theme attribute and will treat default/null is equal to light theme.

So if you save it and reload the browser tab you won’t see any difference.

Step 2

Next, we will set onclick handler of theme swicther button

Now we have defined the onclick handler however we have not created the function yet. So lets create switchTheme() function. You can open the script tags within document or create the function in separate file.

Before we author that function lets gather our requirements

• get current theme value from localStorage theme property - on inital load this won’t exist so, it will return null. We are using localStorage as we need to persist the theme betwen various page loads. If current theme is light update the theme value to dark or vice-versa.
• next, we need to update the theme value in localStorage theme variable.
• finally, we can set the new theme value on data-theme attribute defined in step#1 above

Step 3

So, our switchTheme() function is ready. Now, we need to handle the scenario when the website is loaded the first time - again there are two cases here listed below

• a user could be new on the website for whom the theme was never set
• a user could be returning user for whom we need to load theme based on his past preference.

So let’s handle the above two scenarios in function setTheme() and here are our detailed requirements

• get the current theme from localStorage and if the property theme is not found then default it to light on the first load
• update current theme value on data-theme attribute that we created in step#1 above.
• update the inner text of the button dynamically based on the current theme.
• call the setTheme() function on initial page load

Step 4

As you can see few of steps are common between the switchTheme() function and setTheme() function so, its good time to refactor switchTheme() function and below is updated code.

We have removed last 2 lines and called setTheme() function instead

We have covered the JavaScript part here. Now if you open the developer console and go to the Application tab, Local Storage section and then click on the theme switcher button you should see the theme being updated at each click.

Step 5

Now we just need to add magic of CSS data attributes here to respond to theme switcher button.

You can use any color however, I just used two colors i.e. white and black.

Logic

• When the data-theme is set to dark, we are setting the font color to white and background color to black. No action is required when the theme color is light as the browser will default the font color to black and background color to white.
• Next, we just need to handle the theme switcher button background color and font so that it is visible both in; light and dark modes.

Example

A working demo of code discussed above