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

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

Augmenta l'atractiu

Una web visualment atractiva és el somni de qualsevol negoci. Amb el mode nit/dia (l'interruptor que canvia l'aspecte del lloc segons l'hora), la teva pàgina s'adapta a les preferències de qui la visita, faci dia o faci nit. Aquesta versatilitat atrau l'atenció de seguida 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 el canvi de mode visual, dones el control als teus visitants: s'adapten el lloc a les seves necessitats i s'hi estan a gust.

Evitar la fatiga visual

A la nit, la llum intensa de les pantalles cansa la vista. El mode nit redueix la llum blava, alleuja la tensió ocular i fa el contingut més llegible.

Optimització per a dispositius mòbils

Adaptabilitat en tot moment

La majoria d'usuaris hi accedeixen des del mòbil. Amb un sol botó pots oferir el canvi entre modes i garantir que la web llueixi bé a qualsevol pantalla i a qualsevol hora.

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, i et permet ajustar el disseny a les preferències de cada usuari.

Tendència actual

Estar a l'avantguarda de les tendències web és imprescindible. Oferir aquesta funcionalitat demostra que el teu lloc no només és modern: també es compromet amb una experiència d'usuari excel·lent.

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

Aquest és el codi que faig servir en un dels meus projectes amb Coreframeworks. Si administres WordPress i vols injectar codi sense tocar el tema, tens una guia a Com eliminar elements del menú d'administració de WordPress amb Code Snippets. I per ordenar i ocultar opcions del tauler, hi ha Adminimize: personalitza el tauler de WordPress.

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>

L'estructura té els dos textos (CLARO i OSCURO), una casella de verificació oculta i dues imatges SVG (gràfics vectorials): el sol i la lluna. La bolita és el cercle que llisca d'un costat a l'altre quan cliques.

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>

El CSS dona forma d'interruptor a la pastilla, la mou quan marques la casella i canvia els colors del text segons el tema actiu.

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>

El JavaScript (el codi que s'executa al navegador) escolta el canvi de la casella: si està marcada, activa el tema fosc; si no, el clar. Cada vegada que alternes, la pàgina sencera canvia d'aspecte sense recarregar res.