Switch Dark/Light Mode Using CSS & JavaScript
Tags: css, html, javascript
Published: 2022-09-01 11:17:17

In this post I'm going to show you how you can easily create Dark/Light mode switcher using CSS, JavaScript, and little bit of Bootstrap 5.
I'll show you everything in steps, so you can easily understand.

## Step 1 - (HTML Code)

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css' integrity='sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==' crossorigin='anonymous' />
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-6">
          <div class="form-switch text-center my-5">
            <input type="checkbox" id="mode" class="form-check-input">
            <label for="mode" class="form-check-label"></label>
          </div>
          <div class="card shadow">
            <div class="card-header">
              <div class="fs-4 fw-bold">Dark Mode</div>
            </div>
            <div class="card-body">
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, dolorum. Nostrum, quisquam? Sit assumenda incidunt asperiores facere voluptatem nemo consectetur. Atque, expedita. Perferendis placeat officia iusto! In repellendus esse laboriosam?</p>
            </div>
            <div class="card-footer d-flex justify-content-evenly">
              <button class="btn btn-primary">Primary Button</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

</html>
```
In above HTML code you can see I'm using Bootstrap 5 to design a card to the center of the page. Also I've linked a `style.css` within head tag and a `script.js` file at the end of closing body tag. So in later steps we'll see the codes of both the files.

## Step 2 - (CSS Code)

```css
:root,
:root.light {
	--color-bg: #ffffff;
	--color-fg: #000000;
	--card-bg-color: #fafafa;
}
```
In the above codes you can see I'm using `:root` and `:root.light` selector. to store light background and dark foreground colors. `:root` selector is by default, so when nothing is set by the JavaScript then light mode will be applied to all the elements. Similarly I'll use `:root.dark` selector to store dark background and light foreground colors as shown below:

```css
:root.dark {
	--color-bg: #263238;
	--color-fg: #ffffff;
	--card-bg-color: #607d8b;
}
```
Now next We'll apply the CSS variables to the element in which we want to apply the colors, so we'll `var` function of CSS like below:

```css
body {
	background-color: var(--color-bg);
	color: var(--color-fg);
}

.card {
	background-color: var(--card-bg-color) !important;
}
```
So in above codes you can see I've used `var` function of CSS to give background and foreground colors to the elements.

So the final codes of `style.css` file are:

```css
:root,
:root.light {
	--color-bg: #ffffff;
	--color-fg: #000000;
	--card-bg-color: #fafafa;
}
:root.dark {
	--color-bg: #263238;
	--color-fg: #ffffff;
	--card-bg-color: #607d8b;
}

body {
	background-color: var(--color-bg);
	color: var(--color-fg);
}

.card {
	background-color: var(--card-bg-color) !important;
}
```

## Step 3 - (JavaScript Code)
In `script.js` first We'll select the switch checkbox using below code:

```javascript
const modeBtn = document.getElementById('mode');
```
Now next We'll use a `onchange` event on switch button:

```javascript
modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}
```
In above coding you can see I'm checking if checkbox is `checked === true` then I'm first removing the **light ** class from the `html` tag using `documentElement` and then adding **dark ** class, also I'm using `localStorage` to store the **mode ** type to **persist ** the mode in the browser. Similarly when checkbox is unchecked then I'm removing the **dark ** class from the `html` tag and adding **light ** class and also change the `localStorage` **mode ** value to light.
Now if you click the switch button then you can see the dark mode is applied to your web page, and when you again click the switch button then light mode applied to your web page.
This is working fine but this works until you refresh/reload the page. When you reload the page then again it come back to default theme i.e. light, now how to persist this, so in above coding you can see I've used `localStorage` to store the mode type value in the broswer's local storage. Now next we'll see how use `localStorage` value to persist any applied theme.

```javascript
const mode = window.localStorage.getItem('mode');
```
First We'll get the mode value from the `localStorage` using above code.

```javascript
if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}
```
Now in above codes you can see I'm checking condition that if `mode == 'dark'` then add **light** class to `html` tag and remove **dark** class. And also make the checkbox to `checked` state. Similarly We'll do for light mode also.

Here below is the final codes `script.js` file:

```javascript
const modeBtn = document.getElementById('mode');
modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}

const mode = window.localStorage.getItem('mode');
if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}
```
Below are some screenshots:

![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn7dydnaqp9kmd3ts8dk.png)


![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38celm0juhz9za30jrkw.png)