Light/Dark Theme Toggle with CSS and JavaScript

This tutorial will guide you through the process of creating a light/dark theme toggle with CSS and JavaScript. This feature enhances user experience by allowing users to switch between light and dark themes, reducing eye strain in low-light environments and personalizing the website’s appearance.

Setting Up the HTML Structure

The basic HTML structure will provide the foundation for our toggle and content. This includes the checkbox for toggling the theme, a heading, and some sample paragraph text.

<div class="container">
        <h1>Light / Dark Mode</h1>
        <div class="toggle-container">
            <input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
        </div>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ducimus repellendus dolorem eum consequatur id exercitationem nesciunt, inventore modi perferendis impedit esse, tempora officia, ipsam quae libero. Nostrum, alias dignissimos.</p>
    </div>
    <script  src="./script.js"></script>

Applying CSS Styles

We’ll use CSS variables to define the colors for both light and dark themes. The CSS will also handle the styling of the toggle switch and the overall appearance of the page. The transition class ensures a smooth theme change.

html {
  height: 100%;
  font-family: "Montserrat";
  display: grid;
  align-items: center;
  justify-items: center;
  --bg: #FCFCFC;
  --bg-panel: #EBEBEB;
  --color-headings: #0077FF;
  --color-text: #333333;
}

html[data-theme=dark] {
  --bg: #333333;
  --bg-panel: #434343;
  --color-headings: #3694FF;
  --color-text: #B5B5B5;
}

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

.container {
  background-color: var(--bg-panel);
  margin: 5em;
  padding: 5em;
  border-radius: 15px;
  display: grid;
  grid-template-columns: 80% auto;
  grid-template-rows: auto auto;
  grid-template-areas: "title switch" "content content";
}
.container h1 {
  margin: 0;
  color: var(--color-headings);
}
.container p {
  color: var(--color-text);
  grid-area: content;
  font-size: 1.1em;
  line-height: 1.8em;
  margin-top: 2em;
}

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: var(--color-headings);
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 45px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

Implementing JavaScript Functionality

The JavaScript code will detect the checkbox state and switch between themes by modifying the data-theme attribute of the html element. The trans function adds a transition class to the HTML element to ensure smooth change of styles.

var checkbox = document.querySelector('input[name=theme]');

        checkbox.addEventListener('change', function() {
            if(this.checked) {
                trans()
                document.documentElement.setAttribute('data-theme', 'dark')
            } else {
                trans()
                document.documentElement.setAttribute('data-theme', 'light')
            }
        })

        let trans = () => {
            document.documentElement.classList.add('transition');
            window.setTimeout(() => {
                document.documentElement.classList.remove('transition')
            }, 1000)
        }

Congratulations! You’ve successfully implemented a light/dark theme toggle with CSS and JavaScript, improving your website’s accessibility and user experience.