Back

Creating a Dynamic Color Toggle Button for Light and Dark Mode

A step-by-step guide to creating an eye-catching toggle button to seamlessly switch between light and dark themes.

HTML Structure

Let's start with the HTML. We're creating a simple toggle button inside a container. Additionally, we have a theme information text that displays the theme.

        <div class="toggle-container">
          <button class="toggle-button" onclick="switchTheme()">
            <span class="toggle-circle"></span>
          </button>
        </div>
        <div class="theme-info">Theme: <span id="theme-name">Light</span></div>

JavaScript to Toggle Themes

Our JavaScript will handle the theme switching by toggling classes on the body and button elements. We use a single function, switchTheme(), which toggles the theme mode and updates the UI accordingly.

        let isDarkMode = false;
        function switchTheme() {
          const body = document.body;
          const themeName = document.getElementById('theme-name');
          const toggleButton = document.querySelector('.toggle-button');

          isDarkMode = !isDarkMode;

          if (isDarkMode) {
            body.classList.add('dark-mode');
            toggleButton.classList.add('active');
            themeName.textContent = 'Dark';
          } else {
            body.classList.remove('dark-mode');
            toggleButton.classList.remove('active');
            themeName.textContent = 'Light';
          }
        }

Styling with CSS

Our CSS is crucial for the aesthetic appeal and smooth transitions of the toggle button. We set background colors, handle transitions, and position elements properly for both light and dark modes.

        body {
          font-family: Arial, sans-serif;
          transition: background-color 0.5s;
          background-color: #ffffff;
          color: #000000;
        }
        .dark-mode {
          background-color: #2c2f33;
          color: #ffffff;
        }
        .toggle-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50vh;
        }
        .toggle-button {
          border: 2px solid #000;
          background-color: #fff;
          border-radius: 30px;
          width: 60px;
          height: 30px;
          position: relative;
          cursor: pointer;
          transition: background-color 0.5s, border-color 0.5s;
        }
        .toggle-button .toggle-circle {
          background-color: #000;
          border-radius: 50%;
          width: 22px;
          height: 22px;
          position: absolute;
          top: 2px;
          left: 2px;
          transition: left 0.5s;
        }
        .toggle-button.active {
          background-color: #262626;
          border-color: #fff;
        }
        .toggle-button.active .toggle-circle {
          left: 32px;
          background-color: #fff;
        }
        .theme-info {
          text-align: center;
          font-size: 1.2em;
          margin-left: 2px;
        }

Conclusion

This color toggle button provides a seamless user experience for switching between light and dark themes. It's a versatile component that can be easily integrated into any web project, offering not only functional benefits but also enhancing the visual dynamics of your site. Modify, expand, and customize as needed to fit your project requirements.

Whole code

<div class="toggle-container">
  <button class="toggle-button" onclick="switchTheme()">
    <span class="toggle-circle"></span>
  </button>
</div>
<div class="theme-info">Theme: <span id="theme-name">Light</span></div>


<script>
let isDarkMode = false;
function switchTheme() {
  const body = document.body;
  const themeName = document.getElementById('theme-name');
  const toggleButton = document.querySelector('.toggle-button');
  isDarkMode = !isDarkMode;
  if (isDarkMode) {
    body.classList.add('dark-mode');
    toggleButton.classList.add('active');
    themeName.textContent = 'Dark';
  } else {
    body.classList.remove('dark-mode');
    toggleButton.classList.remove('active');
    themeName.textContent = 'Light';
  }
}
</script>

<style>
body {
  font-family: Arial, sans-serif;
  transition: background-color 0.5s;
  background-color: #ffffff;
  color: #000000;
}
.dark-mode {
  background-color: #2c2f33;
  color: #ffffff;
}
.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}
.toggle-button {
  border: 2px solid #000;
  background-color: #fff;
  border-radius: 30px;
  width: 60px;
  height: 30px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.5s, border-color 0.5s;
}
.toggle-button .toggle-circle {
  background-color: #000;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.5s;
}
.toggle-button.active {
  background-color: #262626;
  border-color: #fff;
}
.toggle-button.active .toggle-circle {
  left: 32px;
  background-color: #fff;
}
.theme-info {
  text-align: center;
  font-size: 1.2em;
  margin-left: 2px;
}

</style>

Creating a Dynamic Color Toggle Button for Light and Dark Mode

HTML Structure

JavaScript to Toggle Themes

Styling with CSS

Conclusion

Whole code

Comments

More toggle-buttons

Similar

See also