A partir de 2020, es posible que haya descubierto que la mayoría de los sistemas operativos (como iOS y Windows), aplicaciones móviles (como Facebook , Twitter) e incluso algunos sitios web han implementado el modo oscuro.
¿Qué es el modo oscuro?
El modo oscuro (también conocido como tema oscuro o apariencia oscura) es un concepto de diseño popular ampliamente utilizado en el diseño de aplicaciones y sistemas operativos modernos.
Por lo general, proporciona un interruptor que permite a los usuarios alternar rápidamente entre el modo oscuro y el tema claro según sus preferencias o la hora actual.
Beneficios del modo oscuro
Como desarrollador, implementar el modo oscuro en su sitio web o aplicación web tiene al menos 3 beneficios:
- Ahorre consumo de energía en los dispositivos, ya que la pantalla demanda más energía cuando el fondo es blanco.
- Reduzca o evite la fatiga visual cuando mira las pantallas por la noche.
- Proporcione a los usuarios más opciones de combinación de colores.
La mejor solución de modo oscuro
En esta publicación, encontrará las 10 mejores soluciones de jаvascript que ayudan a los desarrolladores a implementar rápida y fácilmente el modo oscuro en sus sitios web, blogs o aplicaciones web. Divertirse (
Fuente).
1. Modo oscuro para Bootstrap - Interruptor de modo oscuro
Un complemento de jаvascript utiliza el componente de interruptores
Bootstrap para crear un botón de cambio que permite al usuario alternar entre el modo oscuro y el modo claro en su página web.
2. Agregue el modo oscuro a la página web usando CSS mix-blend-mode - Darkmode.js
Una biblioteca de jаvascript Dark Mode fácil de usar que convierte su página web en modo oscuro (nocturno). Altamente personalizable y con cookies habilitadas.
3. Conmutador automático de modo oscuro - darkmode.js
Un conmutador inteligente de modo oscuro que cambia automáticamente entre el tema oscuro o el tema claro de su página según la hora local del usuario y el esquema del sistema.
4. Alternador de modo oscuro mínimo con variables CSS - darken.js
Una biblioteca de jаvascript liviana (minificada de 2.5kb) que facilita la habilitación del modo oscuro en su página usando variables CSS.
5. Manejo del modo oscuro del navegador / sistema operativo con Darkmode.js
Un jаvascript nativo para verificar y configurar el modo oscuro del navegador / sistema operativo de una manera fácil.
6. Conmutador de modo oscuro para Bootstrap 4
Una pequeña implementación de jаvascript y CSS del tema del modo oscuro de tendencia para el marco Bootstrap 4 .
7. Alternar entre el modo Dard y el modo de luz con un botón de interruptor
Un sencillo conmutador de modo oscuro que permite al visitante alternar entre el tema oscuro y el tema claro con un botón de alternancia de CSS puro.
8. Cambiar de página entre modo nocturno y estilo normal - Nightly.js
Un complemento de jаvascript simple y simple que aplica el modo nocturno a su página web para mejorar la legibilidad de artículos y videos mientras lee / mira por la noche.
9. Alternar entre los modos oscuro / claro usando variables CSS - tema oscuro
Una biblioteca de modo oscuro realmente simple que permite a un conmutador alternar entre los modos oscuro y claro en la aplicación web.
10. Alternador mínimo de modo oscuro y claro para Bootstrap 4
Solo otro complemento Bootstrap 4 Dark Mode que permite al visitante alternar entre el modo oscuro y el modo claro utilizando las clases de utilidad de color de Bootstrap.
