Home
CSS
HTML

Building a Light & Dark Mode using HTML and CSS

Light & Dark Mode | Coding Zemigle

Creating a light and dark mode for a website is a crucial feature in modern web development. It enhances user experience by offering customization based on user preferences, whether it's for better readability or reduced eye strain. This article will guide you through creating a simple light and dark mode toggle using just HTML and CSS.

With the growing importance of user-centric web designs, offering light and dark mode options is no longer a luxury but a necessity. These modes improve readability, reduce eye strain, and allow users to personalize their experience. Whether they prefer the brightness of a light theme during the day or the subdued tones of a dark theme at night, you can easily provide this functionality using HTML and CSS.

Advertisement  ✛

Step 1: Setting Up the HTML Structure

The first step in creating a light and dark mode toggle is setting up your HTML framework. Here’s a simple structure:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Light & Dark Mode | Coding Zemigle</title>
</head>
<body>
  <input id="switch" type="checkbox">
  <div class="app">
  <div class="body">
    <div class="phone">
      <div class="menu">
        <div class="time">4:20</div>
        <div class="icons">
          <div class="network"></div>
          <div class="battery"></div>
        </div>
      </div>
      <div class="content">
        <div class="circle">
        <div class="crescent"></div>
        </div>
        <label for="switch">
          <div class="toggle"></div>
          <div class="names">
            <p class="light">Light</p>
            <p class="dark">Dark</p>
          </div>
        </label>
      </div>
    </div>
  </div>
</div>
</body>
</html>



A <div> container holds the content for a neat layout.

A <button> element is included for the theme toggle functionality.

The <link> and <script> tags are used to include CSS and JavaScript files.

Advertisement  ✛

Step 2: Designing the Themes with CSS

CSS allows you to define styles for light and dark themes. Use CSS variables for flexibility, making it easier to switch themes dynamically.

✲    style.css
.credit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.credit a {
  color: inherit;
}

.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%)
}

.phone {
  position: relative;
  z-index: 2;
  width: 18rem;
  height: 17rem;
  background-color: inherit;
  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
  box-shadow: 0 4px 35px rgba(0,0,0,.1);
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.menu {
/*background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: .5rem;
}

.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}

.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  -webkit-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}

.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
}

.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label, .toggle {
  height: 2.8rem;
  border-radius: 100px;
}

label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0;
  cursor: pointer;
}

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
  font-size: 90%;
  font-weight: bolder;
  color: black;
  width: 65%;
  margin-left: 17.5%;
  margin-top: 6.5%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  opacity: .5;
}

.mark {
  border-radius: 100px;
  background-color: black;
}

.time {
  color: black;
}
[type="checkbox"] {
  display: none;
}

[type="checkbox"]:checked + .app .toggle {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #34323D;
}

[type="checkbox"]:checked + .app .dark {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked + .app .light {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked + .app .body {
  background-color: #26242E;
  color: white;
}

[type="checkbox"]:checked + .app .crescent {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: #26242E;
}

[type="checkbox"]:checked + .app .circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .app .main-circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
  border-color: transparent transparent white transparent;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
  background-color: white;
}

[type="checkbox"]:checked + .app .body {
  border-radius: 40px;
  ;
}

.menu {
/*background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}




Cross-Browser Compatibility: Test your implementation on all major browsers (Chrome, Firefox, Safari, Edge).

Device Responsiveness: Verify functionality on different devices, including desktops, tablets, and smartphones.

Fallbacks: Provide graceful fallbacks for older browsers that do not support modern CSS or JavaScript features.

Adding light and dark mode functionality to your website is a simple yet impactful feature. It not only improves user experience but also aligns your design with modern trends. By following the steps outlined above, you can implement a responsive and accessible theme toggle using only HTML, CSS, and JavaScript.

So, go ahead and try it on your next project. Your users will thank you for it!