La importancia del botón modo Noche/Día en tu sitio web: Mejora la experiencia del usuario

Descubre cómo un pequeño detalle puede marcar una gran diferencia en la percepción de tu sitio web. En este artículo, exploramos la importancia del botón que cambia entre el modo noche y día, revelando cómo puede mejorar la estética.

VER OTROS RECURSOS

La experiencia del usuario es crucial para mantener a los visitantes en tu página web en la era digital. Una característica imprescindible para lograrlo es la inclusión de un botón que facilite la transición entre el modo noche y el modo día. Pero, ¿por qué es tan importante este pequeño pero potente detalle?

La Estética Visual: Atracción Instantánea

Aumenta la Atractividad

Un sitio web visualmente atractivo es el sueño de todo propietario de negocio. Tu página puede adaptarse a las preferencias de los usuarios gracias al modo noche/día, ya sea que estén navegando durante el día o la noche. Esta versatilidad visual atrae instantáneamente la atención y mejora la impresión inicial.

El Impacto en la Experiencia del Usuario

Personalización y Comodidad

La personalización es la clave para una experiencia del usuario excepcional. Ofreciendo la posibilidad de modificar el modo visual, brindas a tus visitantes el control absoluto, generando una experiencia de comodidad y adaptación a sus necesidades personales.

Evitando la Fatiga Visual

Durante la noche, la luz intensa de las pantallas puede causar fatiga visual. El modo noche reduce la emisión de luz azul, aliviando la tensión ocular y mejorando la legibilidad del contenido.

Optimización para Dispositivos Móviles

Adaptabilidad en Cualquier Momento

La mayoría de los usuarios acceden a la web desde dispositivos móviles. Con un solo botón, podrás cambiar entre modos y asegurar que tu sitio web luzca impresionante en cualquier pantalla y en cualquier momento del día.

Implementación Práctica

Fácil Acceso

La simplicidad es la clave. Integrar este botón en tu página es fácil y eficiente para ajustar tu diseño a las preferencias del usuario.

Tendencia Actualizada

Estar a la vanguardia de las tendencias web es esencial. La implementación de esta funcionalidad demuestra que tu sitio web no solo es moderno, sino que también está comprometido con ofrecer una excelente experiencia al usuario.

Ejemplo de un botón personalizado de cambio de modo día/noche

Código de ejemplo utilizado en uno de mis proyectos con 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>

CÓDIGO DEL SNIPPET

Utiliza los códigos mencionados anteriormente.

CONCLUSIÓN

En resumen, el botón que alterna entre el modo nocturno y diurno no es meramente un elemento decorativo, sino una poderosa herramienta que potencia la experiencia del usuario. Esta pequeña complemento puede marcar una gran diferencia en la percepción de tu página web, tanto en términos de estética como de adaptabilidad. ¡No subestimes su impacto! ¡Atrévete a destacar y ofrece a tus visitantes la experiencia visual que se adapte a sus necesidades!

¡Transforma tu Página Web con Experiencia y Estilo!

Descubre cómo puedo llevar tu sitio web al siguiente nivel con mi experiencia de más de 20 años en desarrollo web, diseño gráfico, e impresión digital. Aprovecha la funcionalidad del botón de cambio de modo noche/día para una experiencia visual adaptada a tus usuarios.

Beneficios que Obtendrás:
  • Diseño web atractivo y funcional.
  • Modo noche/día para personalización total.
  • Experiencia del usuario mejorada.
  • Adaptabilidad en dispositivos móviles.
  • Soluciones asequibles y atractivas.

¿Listo para Darle un Impulso a tu Presencia Online?

Contáctame ahora para discutir cómo puedo ayudarte a alcanzar tus metas en línea. ¡Hagamos que tu sitio web refleje verdaderamente la identidad y valores de tu negocio!

¡TOMA ACCIÓN AHORA MISMO!