Las instrucciones paso a paso para crear 2 versiones de su sitio web, para que sea perfecto tanto para uso diurno como nocturno.
Actualización: ahora uso consultas de medios de nivel 5:prefers-color-scheme
La especificación de consultas de medios de nivel 5 contiene una nueva prefers-color-schemefunción de medios.
Actualmente, esto es compatible con todos los navegadores principales: Chrome/Edge desde la versión 76, Firefox desde la 67 y Safari (desde la versión 12.1). Incluso Safari para iOS,
Podemos usarlo para saber si el usuario está navegando por la página en modo oscuro o claro:
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; }}@media (prefers-color-scheme: light) { body { background-color: white; color: black; }}Ahora lo uso para mostrar una versión clara del sitio de forma predeterminada y una versión oscura si el sistema está en modo oscuro.
Si el sistema no tiene modo oscuro incorporado (Windows / macOS antiguo, Linux), entonces mi sugerencia es usar una extensión como Night Eye o similar.
Cómo implementar el modo oscuro antes de que prefers-color-schemeestuviera disponible
Recientemente rediseñé mi sitio web. Aquí hay dos imágenes de cómo se veía, como referencia:
Diseñé este sitio web hace casi un año e hice muchos cambios a lo largo del camino, tal como hacemos con cualquier sitio web.
Con el tiempo me cansé del diseño: el título es demasiado grande, se pierde demasiado espacio en lugar de mostrar el contenido directamente, etc.
Me senté ayer por la tarde y comencé a reimaginar el sitio web, y terminé el rediseño esta mañana:
¡Mucho mejor! El contenido, lo más importante, tiene más protagonismo.
Utilicé una fuente monoespaciada (Inconsolata) porque, como blog de programación, es agradable, a pesar de la menor legibilidad y el mayor tamaño de página debido al uso de la fuente, porque quiero esa fuente en mi sitio. Me gusta más y, dado que mi sitio es una parte importante de mi actividad diaria, quería que fuera como yo quiero.
Me faltó una cosa: el modo oscuro . Como estaba en proceso de rediseño, tenía en mente la opción del modo oscuro.
¿Cómo lo hice? Primero, agrega el emoji de la luna en la barra lateral, como una forma de permitir que las personas cambien el modo de claro a oscuro.
Luego, agregue un fragmento de código JavaScript que se ejecuta cuando se hace clic en él. Lo agregué al onclickcontrolador de eventos en línea en el HTML, sin exagerar:
p a href="#"vertical-align: inherit;">Este es el JavaScript que se ejecuta al hacer clic:localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
Es un poco complicado, pero básicamente verifique si la modepropiedad en el almacenamiento local es 'oscura' (y el valor predeterminado es oscuro si aún no está configurado, usando el ||operador), y configuro lo opuesto en el almacenamiento local. Lavandes - Mejores productos de belleza
Luego asigna la darkclase al bodyelemento HTML, para que podamos usar CSS para diseñar la página en modo oscuro.
Otro script se ejecuta tan pronto como se carga el DOM y verifica si el modo está oscuro. Si es así, agrega la darkclase al bodyelemento HTML:
document.addEventListener('DOMContentLoaded', (event) = { ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')})
Ahora, si las personas cambian de modo, su elección se recordará la próxima vez que carguen la página.
Luego agregué muchas instrucciones CSS al CSS, todas con el prefijo body.dark. Como estas:
body.dark { background-color: rgb(14,20,10); color: #fff;}body.dark code[class*=language-],body.dark table tbodytr:nth-child(odd)td,body.dark table tbodytr:nth-child(odd)th { background: #282c34}
¡Ahora ya debería estar funcionando! Aquí está mi sitio en modo oscuro:
Agregué la darkclase al bodyelemento por defecto, para que el modo oscuro sea el predeterminado:
body .../body
¿Por qué? Primero, porque me gustó más. Luego hice una encuesta en Twitter ya la gente le gustó más.
Pero también por una razón técnica, una muy simple en realidad. No guarde la elección del usuario en el servidor, por lo que no tengo forma de saber el modo hasta que el almacenamiento local esté disponible.
Podría hacerlo si el sitio se generara en el servidor, pero es un sitio estático, por lo que siempre sirve la misma página a todos los que la solicitan. Incluso si recibiera una cookie, no tendría dónde procesarla (por otro lado, esto significa que mis páginas se cargan más rápido).
Por lo tanto, cuando alguien navega a otra página de mi sitio o carga la página por primera vez en una segunda visita, no quiero mostrar una página clara mientras determina el modo. Tal vez el visitante esté programando en medio de la noche en una habitación oscura.
Prefiero hacerlo en modo claro: mostrar una página oscura durante un par de milisegundos y luego volverla blanca nuevamente.
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo agregar el modo oscuro a mi sitio web
Las instrucciones paso a paso para crear 2 versiones de su sitio web, para que sea perfecto tanto para uso diurno como nocturno.
programar
es
https://aprendeprogramando.es/static/images/programar-como-agregar-el-modo-oscuro-a-mi-sitio-web-1853-0.jpg
2025-01-17
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente