Cómo oscurecer una página con Javascript

El modo oscuro se ha vuelto cada vez más popular con el diseño de interfaz, trayendo comodidad visual y permitiendo a los usuarios elegir el tema que prefieren.

En este artículo, aprenderá cómo crear modo oscuro en una página usando JavaScript, HTML, CSS y técnicas web modernas.

Introducción del modo oscuro

El modo oscuro ha ganado importancia en el diseño digital, lo que refleja un cambio en las preferencias de los usuarios. Ayuda a reducir el esfuerzo ocular en entornos con poca luz, haciendo que la lectura sea más cómoda.

Además, los dispositivos móviles consumen menos batería cuando usan el modo oscuro, especialmente en las pantallas OLED. Esto beneficia a quienes usan el dispositivo durante largos períodos.

Con tantos beneficios, muchas aplicaciones y sitios web ya ofrecen esta opción, lo que permite a los usuarios personalizar sus experiencias. El modo oscuro no solo es visualmente atractivo, sino que también facilita la navegación, lo que lo hace más agradable.

¿Por qué adoptar el modo oscuro?

El uso del modo oscuro ofrece una experiencia visualmente más cómoda, especialmente en entornos de poca luz. También permite a los usuarios elegir el tema que los agrada, haciendo que la navegación sea más personalizada.

Ventajas de la vía oscura

La implementación del modo oscuro tiene varias ventajas. Lo principal es mejorar la experiencia del usuario, facilitando la lectura, especialmente en entornos oscuros.

El texto de fondo oscuro reduce el esfuerzo visual y aumenta el compromiso de los usuarios.

La investigación muestra que las personas pasan más tiempo en sitios web que ofrecen esta funcionalidad, lo que indica que las marcas que adoptan el modo oscuro están más alineados con las necesidades de sus clientes.

Otro beneficio significativo es el ahorro de la batería en dispositivos móviles con pantallas OLED, ya que consumen menos energía en modo oscuro.

Esta economía hace del modo oscuro una elección inteligente para usuarios y desarrolladores.

Ventajas del modo oscuro:

• Comodidad visual: Reduce el cansancio del ojo en ambientes con poca luz.
• Aumento de compromiso: Los usuarios siguen siendo más tiempo en las páginas con modo oscuro.
• Ahorro de batería: Reduce el consumo de dispositivos con pantallas OLED.
• Personalización: Ofrece a los usuarios una opción que se adapta a sus preferencias.

Uso de CSS y Variables LocalStorage

Las variables CSS son una forma práctica de almacenar valores y facilitar la adaptación del diseño. Por ejemplo, puedes usar -BG-ciy-light para definir el color de fondo claro y -S-text-dark para el texto oscuro. Estas variables hacen que el intercambio entre temas claros y oscuros sea más simple y más eficiente.

O local Es una herramienta poderosa para almacenar datos en el navegador. Permite que las preferencias del usuario, como elegir el tema, se guarden y apliquen automáticamente a futuras visitas al sitio.

Estructura básica html

Una estructura HTML bien organizada es esencial para implementar el modo oscuro. Elementos como los botones de intercambio de temas y los textos claros ayudan en la navegación y la usabilidad del sitio.

Elementos esenciales:

• : Botón para cambiar entre modos de luz y oscuridad.
• <h1>: Título de la página principal.
• <p>: Párrafos de texto que facilitan la lectura.
• <div>: Divisiones para contenido grupal y de estilo.

Estilización con CSS

Elegir los colores correctos es fundamental para hacer que el modo oscuro sea agradable. Use clases como .Luz e .Oscuro Facilita el intercambio entre temas.

Ejemplo de color:

• Texto principal: #000000 Sobre el tema transparente, #FFFFF en el tema oscuro.
• Abajo: #fffff en Claro Theme, #121212 Sobre el tema oscuro.
• Campo de golf: #007BFF en el tema transparente, #82B1FF en el tema oscuro.

Implementación del modo oscuro con JavaScript

Para crear el modo oscuro con JavaScript, es necesario manipular el regalo, agregando clases al elemento cuerpo de la página. El primer paso es verificar el estado del tema en el localAsegurar que el tema elegido por el usuario se mantenga después de la recarga de la página.

Un código básico para implementar el modo oscuro sería:

If (localsostorage.getite ('darkmode') === 'habilitado') {
    Document.body.classList.Add ('Dark-Mode');
} demás {
    document.body.classlist.remove ('Modo oscuro');
}

Eventos CSS y manipulación de clase

La funcionalidad del modo oscuro está habilitada con JavaScript utilizando los oyentes de eventos, que detectan las acciones del usuario, como los clics de los botones para cambiar el tema.

Pasos básicos:

1. Elija el botón de intercambio de temas.
2. Agregue un oyente de eventos para detectar clics.
3. Cambie la clase de clase en la página.

La manipulación de clases en JavaScript es fundamental para la implementación del modo oscuro. Usando lista de clases, puede cambiar entre temas fácilmente.

Document.body.classlist.toggle ('oscuro');

Prueba y mejora de la implementación

Es esencial probar la implementación del modo oscuro para garantizar que todo funcione correctamente. Asegúrese de que el tema seleccionado por el usuario se aplique correctamente al cargar la página y si el intercambio de temas ocurre sin problemas.

Posibles mejoras:

• Implemente transiciones suaves entre temas a una experiencia visual más agradable.
• Ofrezca opciones de personalización de color, lo que permite a los usuarios elegir entre varias paletas.
• Incluya características de accesibilidad como colorblinds o personas con dificultades visuales.

Beneficios de las mejoras:

• Transiciones suaves: Mejorar la usabilidad y reducir el desgaste visual.
• Paletas personalizables: Aumentar la satisfacción del usuario y la personalización de la interfaz.
• Accesibilidad: Hace que la experiencia sea más inclusiva, satisfaga las diversas necesidades visuales.

Conclusión

La adopción del modo oscuro va más allá del aspecto visual; Mejora la legibilidad, reduce la fatiga ocular y permite una personalización que satisface mejor las necesidades del usuario.

Usando HTML, CSS y JavaScript, puede realizar la experiencia de navegación ofreciendo un diseño más flexible y adaptado al futuro digital.