Botó de canvi de mode dia/nit: estètica i experiència d'usuari

L’estètica visual: atracció instantània

Augmenta l’atractiu

Un lloc web visualment atractiu és el somni de qualsevol propietari de negoci. La teva pàgina es pot adaptar a les preferències dels usuaris gràcies al mode nit/dia, tant si naveguen de dia com de nit. Aquesta versatilitat visual atrau instantàniament l’atenció i millora la primera impressió.

L’impacte en l’experiència d’usuari

Personalització i comoditat

La personalització és la clau d’una experiència d’usuari excepcional. En oferir la possibilitat de canviar el mode visual, dones als teus visitants el control absolut i generes una experiència de comoditat i adaptació a les seves necessitats personals.

Evitar la fatiga visual

Durant la nit, la llum intensa de les pantalles pot causar fatiga visual. El mode nit redueix l’emissió de llum blava, alleuja la tensió ocular i millora la llegibilitat del contingut.

Optimització per a dispositius mòbils

Adaptabilitat en tot moment

La majoria d’usuaris accedeixen a la web des de dispositius mòbils. Amb un sol botó podràs canviar entre modes i garantir que el teu lloc web llueixi impressionant a qualsevol pantalla i a qualsevol hora del dia.

Implementació pràctica

Accés fàcil

La senzillesa és la clau. Integrar aquest botó a la teva pàgina és fàcil i eficient per ajustar el teu disseny a les preferències de l’usuari.

Tendència actual

Estar a l’avantguarda de les tendències web és imprescindible. La implementació d’aquesta funcionalitat demostra que el teu lloc web no només és modern, sinó que també està compromès a oferir una experiència d’usuari excel·lent.

Exemple d’un botó personalitzat de canvi de mode dia/nit

Codi d’exemple utilitzat en un dels meus projectes amb Coreframeworks

HTML

<div class="theme-switch">
  <span id="lightModeText">CLARO</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">
      <!-- Círculo exterior representando la luna -->
      <circle id="outerCircle" cx="12" cy="12" r="8"/>
      <!-- Círculo interior para simular el contorno -->
      <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">OSCURO</span>
</div>

CSS

<style>

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

.theme-switch #lightModeText {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--bg-body-d-2); /* Color predeterminado para el modo claro */
  margin-top: -6px;
  margin-right: 10px;
  margin-left: 10px; /* Ajusta el espacio entre los textos y el interruptor */
}

.theme-switch #darkModeText {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--bg-body-d-2); /* Color predeterminado para el modo claro */
  margin-top: -6px;
  margin-right: 10px;
  margin-left: 10px; /* Ajusta el espacio entre los textos y el interruptor */
}

.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); /* Fondo gris oscuro para la luna */
}

.cf-theme-light .checkbox-label {
  background-color: var(--bg-body-l-5); /* Fondo gris claro para el sol */
}

.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);
}

/* Cambios de color de texto según el tema activo */
.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>

JS

<script>
const checkbox = document.getElementById("checkbox");
const htmlElement = document.documentElement;
const themeText = document.getElementById("themeText"); // Nuevo elemento de texto

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    // Si el checkbox está marcado (luna), aplica el tema oscuro
    htmlElement.classList.remove("cf-theme-light");
    htmlElement.classList.add("cf-theme-dark");
    innerCircle.style.fill = "var(--bg-body-l-2)";
    themeText.textContent = "Modo OSCURO";

  } else {
    // Si el checkbox no está marcado (sol), aplica el tema claro
    htmlElement.classList.remove("cf-theme-dark");
    htmlElement.classList.add("cf-theme-light");
    innerCircle.style.fill = "var(--bg-body-l-2)";
    themeText.textContent = "Modo CLARO";

  }
});

</script>