El dark mode es un cambio temporal en la paleta de colores en la que se invierten los colores de los elementos de la interfaz para utilizar unos claros sobre un fondo oscuro. También se reduce el brillo, lo que evita que la vista se canse y aumenta así el ahorro de la batería.

Desde que se hizo popular el diseño en dark mode tanto para sistemas operativos como iOS, Android o Windows, han lanzado documentación sobre cómo diseñar y crear con su modo oscuro (eso significa Dark Mode). Una forma de diseño “ecológica”, ya que te permite ahorrar la batería de los dispositivos.

Agrega la Hoja de Estilo(CSS)

El primer paso es darle el estilo en Modo Dark a nuestro sitio agregando el código CSS necesario para cada elemento, este lo colocas antes del tag </head>. Copia el siguiente código:

<link rel="stylesheet" type="text/css" href=" dark_web.css" />

O lo agregas desde tu hoja de estilo principal

@import "dark_web.css";

A la  hoja de estilo “dark_web.css “ podras ir incorporando el  color alternativo que elijas para la clase ‘dark’ del cuerpo, que reemplazara los colores de la hoja de estilo principal

 
body.dark {   background:  #333; }
body.dark h2 {   color:#fff}
......
......
......
......
etc

Agrega JavaScript(JS)

Lo segundo que debemos hacer, es colocar el JavaScript justo antes de cerrar la etiqueta del cuerpo  </ body>.  .

<script type="text/javascript" src”dark_web.js"></script>

const switchButton = document.getElementById('switch');
 
switchButton.addEventListener('click', () => {
    document.body.classList.toggle('dark'); //toggle the HTML body the class 'dark'
    switchButton.classList.toggle('active');//toggle the HTML button with the id='switch' with the class 'active'
});

En el archivo JS ponemos este código que munipulara el elemento llamado ‘switch’ . Esta será una función que añade o elimina la clase con el atributo «dark» en el elemento HTML «body».

También queremos hacer que cuando se hace clic en el botón, la clase «activa» se agregue al botón y así cambiamos la apariencia del propio botón.

Colocando botón Activador

Agregar donde deseas visualizarlo – Dentro del código para el botón vamos a colocar dos iconos, y vamos a utilizar FontAwesome – la fuente de iconos, donde se puede encontrar la mayoría de los iconos que desee.

 <button class="darkModeSwitch ms-2" id="switch">
<span><i class="fas fa-sun"></i></span>
<span><i class="fas fa-moon"></i></span> 
</button>

.darkModeSwitch{
    background: #113528;
    display:flex;
    position: relative;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 1rem;
    align-items: center;
    justify-content: space-between;
}
.darkModeSwitch span{
    width:30px;
    height:15px;
    line-height:30px;
    display:block;
    color:#fff;

    background: none;
}
.darkModeSwitch::after{
    display:block;
    background: #042d26de;
    width: 1.9rem;
    height: 1.9rem;
    position: absolute;
    top:0;
    left:0;
    right:unset;
    border-radius: 3rem;
    transition: all .5s ease;

    content: "";
}
.darkModeSwitch.active{
  background: #030e2a;
}
.darkModeSwitch.active::after{
  left:unset;
  right:0;
}