Day/Night mode toggle button: aesthetics and user experience

Visual aesthetics: instant attraction

Increases appeal

A visually appealing website is the dream of any business. With the night/day mode (the switch that changes the appearance of the site depending on the time), your page adapts to the preferences of whoever visits it, whether it's day or night. This versatility captures attention right away and improves first impressions.

The impact on user experience

Personalization and comfort

Personalization is the key to an exceptional user experience. By offering the visual mode switch, you give control to your visitors: they adapt the site to their needs and feel comfortable on it.

Preventing eye strain

At night, the intense light of screens tires your eyes. Night mode reduces blue light, relieves eye tension, and makes content more readable.

Mobile device optimization

Adaptability at all times

Most users access it from their phone. With a single button, you can offer the switch between modes and ensure the website looks good on any screen and at any time.

Practical implementation

Easy access

Simplicity is key. Integrating this button onto your page is easy and efficient, and lets you tailor the design to each user's preferences.

Current trend

Being at the forefront of web trends is essential. Offering this functionality shows that your site is not only modern: it also commits to an excellent user experience.

Example of a custom day/night mode toggle button

This is the code I use in one of my projects with Coreframeworks. If you manage WordPress and want to inject code without touching the theme, there's a guide at How to remove elements from the WordPress admin menu with Code Snippets. And to organize and hide dashboard options, there's Adminimize: customize the WordPress dashboard.

HTML

<div class="theme-switch">
  <span id="lightModeText">LIGHT</span>
  <input type="checkbox" class="checkbox" id="checkbox">
  <label for="checkbox" class="checkbox-label">
    <svg id="moonSvg" class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
      <!-- Outer circle representing the moon -->
      <circle id="outerCircle" cx="12" cy="12" r="8"/>
      <!-- Inner circle to simulate the outline -->
      <circle id="innerCircle" cx="19" cy="10" r="7" fill="var(--bg-body-l-1)"/>
    </svg>
    <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="yellow" width="24" height="24">
      <circle cx="12" cy="12" r="8" />
    </svg>
    <span class="ball"></span>
  </label>
  <span id="darkModeText">DARK</span>
</div>

The structure has both texts (LIGHT and DARK), a hidden checkbox, and two SVG images (vector graphics): the sun and the moon. The small ball is the circle that slides from one side to the other when you click.

CSS

<style>

.theme-switch {
  display: flex;
  align-items: center;
}

.theme-switch #lightModeText {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--bg-body-d-2); /* Default color for light mode */
  margin-top: -6px;
  margin-right: 10px;
  margin-left: 10px; /* Adjust the space between the texts and the switch */
}

.theme-switch #darkModeText {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--bg-body-d-2); /* Default color for light mode */
  margin-top: -6px;
  margin-right: 10px;
  margin-left: 10px; /* Adjust the space between the texts and the switch */
}

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox-label {
  background-color: var(--bg-body-l-5);
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cf-theme-dark .checkbox-label {
  background-color: var(--bg-body-l-2); /* Dark gray background for the moon */
}

.cf-theme-light .checkbox-label {
  background-color: var(--bg-body-l-5); /* Light gray background for the sun */
}

.moon {fill: #fff;}
.sun {fill: #f39c12;}

.checkbox-label .ball {
  background-color: #ddd;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}

/* Text color changes based on the active theme */
.cf-theme-light #lightModeText {
  color: var(--text-body);
  font-weight: 700;
}
.cf-theme-dark #lightModeText {
  color: var(--bg-body-l-5);
  font-weight: 300;
  }

.cf-theme-light #darkModeText {
    color: var(--bg-body-d-5);
    font-weight: 300;
  }
.cf-theme-dark #darkModeText {
  color: var(--text-body);
  font-weight: 700;
}

</style>

The CSS gives the pill the shape of a switch, moves it when you check the box, and changes the colors of the text according to the active theme.

JS

<script>
const checkbox = document.getElementById("checkbox");
const htmlElement = document.documentElement;
const themeText = document.getElementById("themeText"); // New text element

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    // If the checkbox is checked (moon), apply the dark theme
    htmlElement.classList.remove("cf-theme-light");
    htmlElement.classList.add("cf-theme-dark");
    innerCircle.style.fill = "var(--bg-body-l-2)";
    themeText.textContent = "DARK Mode";

  } else {
    // If the checkbox is not checked (sun), apply the light theme
    htmlElement.classList.remove("cf-theme-dark");
    htmlElement.classList.add("cf-theme-light");
    innerCircle.style.fill = "var(--bg-body-l-2)";
    themeText.textContent = "LIGHT Mode";

  }
});

</script>

The JavaScript (the code that runs in the browser) listens to the change of the checkbox: if it is checked, it activates the dark theme; if not, the light one. Every time you toggle, the entire page changes appearance without reloading anything.