Que tal blogueros, nuevamente en un tutorial nuevo para ponerlo en practica en tu blog y se trata de cómo puedes agregar el tema modo dark en tu página con unas simples líneas de código JavaScript(JS) y usando hojas de estilo CSS en HTML.
Sin mas dilación, te voy a desvelar la mejor forma de aplicar el tema modo dark en tu blog. Empecemos y te muestro la guía completa.
{getToc} $title={Tabla de Contenido}
Para que funciona el Dark Mode
Muchos pensaran que solo se trata de un estilo para poner a nuestro sitio para que tenga una mejor impresión cuando los usuarios llegan a revisar el blog. Ya que el usuario podrá contar con la opción de encender el Dark Mode o apagarlo(light mode) para que este con sus colores por defecto.
Déjame decirte que el tema en Modo Dark de un sitio es para ofrecer una mejor experiencia a los usuarios porque hay ocasiones en que los usuarios revisan tu contenido en la noche y a través de este modo mejora la visibilidad en el texto, imágenes o incluso en videos. Se torna agradable a la vista del usuario.
Tutorial para Agregar el Tema Modo Oscuro en Sitio Web
Aquí, entraremos en el paso a paso para hacer funcionar nuestro Dark mode en nuestro sitio, siguiendo las instrucciones paso a paso:
Agrega la Hoja de Estilo(CSS)
El primer paso es darle el estilo en Modo Dark a nuestro blog agregando el código CSS, este lo colocas antes del tag </head>. Copia el siguiente código:
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/71oqhteef1ctf5x/CSS_Dark_Mode.css">
Agrega JavaScript(JS)
Lo segundo que debemos hacer es poner el codigo JavaScript al final de blog, antes del tag </body>. Para dar la función a nuestro modo dark en Html.
Copia los siguientes Script en nuestro blog:
<script src="https://dl.dropboxusercontent.com/s/pc4op1cqf98vsru/lax_dark_mode.js"></script>
<script src="https://dl.dropboxusercontent.com/s/1g63ws5huvl1o3d/script_night_light_mode.js"></script>
Agregar DIV en el cuerpo de la página
En este paso vamos a poner el botón para cambiar a modo oscuro o modo light. Para eso, colocaremos el siguiente código Div en el cuerpo del HTML. Preferible antes del tag </body>. Aunque, se puede colocar en cualquier parte del HTML.
Copia la siguiente línea de código para cambiar a Modo dark:
<div class="gn-button-wrapper fixed btn-3">
<div class="gn-button-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="moon-clear-line" transform="translate(-2.000000, 0.000000)">
<polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
<path d="M10,6 C9.99928403,8.84922088 11.5140071,11.4837947 13.976694,12.9167056 C16.4393808,14.3496165 19.4783183,14.3645837 21.955,12.956 C21.474,18.03 17.2,22 12,22 C6.477,22 2,17.523 2,12 C2,6.8 5.97,2.526 11.044,2.045 C10.3575564,3.24993728 9.99768299,4.61325082 10,6 Z M4,12 C4,16.418278 7.581722,20 12,20 C14.8774004,19.9998278 17.5333948,18.4555562 18.957,15.955 C18.641,15.985 18.321,16 18,16 C12.477,16 8,11.523 8,6 C8,5.679 8.015,5.36 8.045,5.043 C5.54444377,6.46660517 4.00017218,9.12259959 4,12 Z" id="Shape" fill="#000000" fill-rule="nonzero">
</path>
<path d="M18.164,2.291 L19,2.5 L19,3.5 L18.164,3.709 C17.4475681,3.88817506 16.8881751,4.44756809 16.709,5.164 L16.5,6 L15.5,6 L15.291,5.164 C15.1118249,4.44756809 14.5524319,3.88817506 13.836,3.709 L13,3.5 L13,2.5 L13.836,2.291 C14.5520463,2.11150297 15.1109953,1.55216954 15.29,0.836 L15.5,0 L16.5,0 L16.709,0.836 C16.8881751,1.55243191 17.4475681,2.11182494 18.164,2.291 Z" id="star1" class="moon-star" fill="#000000">
</path>
<path d="M23.164,7.291 L24,7.5 L24,8.5 L23.164,8.709 C22.4475681,8.88817506 21.8881751,9.44756809 21.709,10.164 L21.5,11 L20.5,11 L20.291,10.164 C20.1118249,9.44756809 19.5524319,8.88817506 18.836,8.709 L18,8.5 L18,7.5 L18.836,7.291 C19.5524319,7.11182494 20.1118249,6.55243191 20.291,5.836 L20.5,5 L21.5,5 L21.709,5.836 C21.8881751,6.55243191 22.4475681,7.11182494 23.164,7.291 Z" id="star2" class="moon-star" fill="#000000">
</path>
</g>
</g>
</svg>
</div>
</div>
Agrega JQuery
Para que funcione correctamente se debe agregar la versión JQuery que tengas, si es preferible de la versión 3.4.1 en adelante. También, puedes probar con una version anterior. Si no funciona, entonces, pruebas con las que mencione.
Lo colocas antes del tag </body>
Guía de Instalación Modo Nocturno HTML
Descargar Modo Nocturno CSS, JS y HTML
En el siguiente enlace podrás adquirir los documentos para poner a funcionar el modo nocturno en HTML.
https://dl.dropboxusercontent.com/s/0l8gudf1tik91ix/Night%20Light%20Mode%20HTML.rar