Create a Theme Toggle Button in HTML

A toggle button is an user interface element that enables users to quickly switch between two states or selections with just one click or tap. By adding this interactive feature to your webspage or website, will enhance their browsing experience. You can provide users with the option to switch between dark and light themes. Let’s start!!

Step 1: Plan Your Theme Colors

Decide your color schemes, font choices, and any other visual elements that you want to toggle. It will help you determine the style and ensure a consistent and visually appealing experience.

For dark theme, I am using #343434 as background color, and white (#ffffff) as foreground color. For light theme, I am using white (#ffffff) as background color, and black (#000000) as foreground color.

Step 2: Create CSS Variables

Now create CSS variables for for light and dark theme.

:root,:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
}

:root.dark {
    --color-bg: #343434;
    --color-fg: #ffffff;
}

Step 3: Create the Toggle Button in HTML

I have used FontAwesome Icons in my code, you can use only icon library you want, if you face any problem in adding the icons, check this story.

<div class="container">
  <label class="toggle_label">
    <input type="checkbox" id="mode" class="toggle">
    <span class="slider round">
      <i class="fa-solid fa-moon fa-lg fa-spin moon"></i>
      <i class="fa-solid fa-sun fa-spin fa-lg sun"></i>
    </span>
  </label>
  <p id="theme"></p>
</div>

Now styling our components

.toggle {
    background-color: #607d8b;
    color: #607d8b;
    visibility: hidden;
}

.toggle_label {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;
    background-color: rgb(0, 0, 0);
    border-radius: 30px;
}

.slider {
    bottom: 0;
    cursor: pointer;
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    border: 5px solid white;
    content: "";
    height: 36px;
    width: 36px;
    right: 10px;
    left: 7px;
    top: 7px;
    position: absolute;
    transition: .4s;
    border-radius: 50%;
}

Step 4: Adding Theme changing functionality in Javascript

const theme = document.getElementById('theme');
const changeTheme = document.getElementById('mode');
changeTheme.onchange = (e) => {
  if (changeTheme.checked === true) {
    console.log("Checked")
    theme.innerHTML="Light Theme"
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  } else {
    console.log("Not Checked")
    theme.innerHTML="Dark Theme"
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  }
}
const mode = window.localStorage.getItem('mode');
if (mode == 'dark') {
  changeTheme.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  changeTheme.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}

Step 5: The final preview

For final code, check my repository.

Want SQL Interview Notes?? Check this out, File Link.

Clear any interview with these notes, it will clear all your concepts.

👉 Follow me on Medium | LinkedIn | Github