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>