Mi Blog
Cómo crear el modo oscuro y claro con CSS3 y Javascript

Cómo crear el modo oscuro y claro con CSS3 y Javascript

(11 votos)

En la actualidad, y sobre todo desde la llegada de los smartphones a nuestra vida, muchas aplicaciones y webs conocidas, como Twitter y Facebook, cuentan con modo nocturno que se cambia manualmente por el usuario o a una cierta hora del día, para aliviar la fatiga de la vista y ahorrar batería. 

Seguid leyendo y os enseñaré a crear el modo oscuro/noche y claro/día utilizando CSS3 y Javascript...

⬇️ Compra en Amazon el hardware que utilizo ⬇️

🔥 ¡DESCÚBRELOS! 🔥

 

 

¿QUÉ ES EL MODO OSCURO/NOCHE Y CLARO/DÍA?

Las páginas web se han diseñado tradicionalmente utilizando una tipografía oscura sobre un fondo claro o blanco. En los últimos años se ha popularizado el uso de temas con una tonalidad "oscura". Estos estilos/templates/themes son los llamados "dark themes". El uso de los "dark themes" supone principalmente dos grandes ventajas: los beneficios para la vista cuando la luz ambiente es baja y el ahorro de batería en los dispositivos móviles.

De esta forma, los usuarios de una web podrán elegir entre tema claro y un tema oscuro, lo que mejorará notablemente la usabilidad de la página web.

 

 

El modo oscuro es bueno con baja luz ambiente, el modo día cuando hay mucha luz ambiente

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un PC con cualquier editor de texto o IDE
  • Internet (recomendado si queremos usar Bootstrap)

 

 

2.- ¿QUÉ QUEREMOS HACER EXACTAMENTE?

Lo que queremos conseguir es una Web que tenga la opción de activar/desactivar el modo oscuro/claro y que guarde la configuración para recordar el modo preferido para futuras visitas. En la siguiente imagen se puede ver, en el lado izquierdo el modo noche/oscuro y a la derecha el modo día/claro.

Modo oscuro y claro CSS3 y JavascriptModo oscuro y modo claro CSS3 + Javascript

 

 

3.- CÓDIGO CSS

Crearemos un fichero llamado darklightmode.css e incluiremos el siguiente código CSS3. En el código se pueden ver 2 clases que cambiarán el color del fondo y del texto en función de cuando seleccionemos el modo oscuro o el modo claro:

.dark{ 
background-color: #1f1f1f;
color: #8e8e8e;
}
.light{
background-color: #ffffff;
color: #000000;
}

4.- CÓDIGO JAVASCRIPT

Crearemos un fichero llamado darklightmode.js en el cual escribiremos las siguientes tres funciones de java script.

La primera función la llamaremos "loadColor()" y se encargará de recoger (si existe) el valor de la variable "colorvar" almacenada en el localStorage. La función se llama cada vez que la web se carga/recarga y se le llama desde el "<body>":

// Función que se carga cuando se carga el <body> de la Web
function loadColor() {
var color = localStorage.getItem("colorvar");
if (color === null) {
document.body.classList.add("light");
} else {
if (color === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
}
printValue();
}

 

 

La siguiente función, llamada "changeColor()" se ejecutará cuando el usuario pulse el botón de oscuro/claro. Se encargará de leer la variable "colorvar" y si está el modo oscuro (dark) activado lo desactivará y activará el modo claro (light) y viceversa:

// Función para cambiar el color al pulsar el botón
function changeColor() {
var color = localStorage.getItem("colorvar");
if (color === "dark") {
document.body.classList.remove("dark");
document.body.classList.add("light");
localStorage.setItem("colorvar", "light");
} else {
document.body.classList.remove("light");
document.body.classList.add("dark");
localStorage.setItem("colorvar", "dark");
}
printValue();
}

 

 

La tercera y última función "printValue()" es opcional. No es necesaria para el funcionamiento y solamente es a modo informativo. La función muestra, dentro de una caja informativa, el valor de la variable "colorvar", que tomará los valores de: dark o light.

// Función para mostrar el valor del color en un DIV y cambiar el texto del botón
function printValue() {
var color = localStorage.getItem("colorvar");
document.getElementById("valorColor").innerHTML = "El valor de color es: " + "<strong>" + color + "</strong>";
if (color === "dark"){
document.getElementById("changeBtn").innerHTML = "Cambiar a modo " + "?";
} else {
document.getElementById("changeBtn").innerHTML = "Cambiar a modo " + "?";
}
}

 

 

Por tanto, el código JS completo que debemos poner en el fichero darklightmode.js es el siguiente:

// Función que se carga cuando se carga el <body> de la Web
function loadColor() {
var color = localStorage.getItem("colorvar");
if (color === null) {
document.body.classList.add("light");
} else {
if (color === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
}
printValue();
}

// Función para cambiar el color al pulsar el botón
function changeColor() {
var color = localStorage.getItem("colorvar");
if (color === "dark") {
document.body.classList.remove("dark");
document.body.classList.add("light");
localStorage.setItem("colorvar", "light");
} else {
document.body.classList.remove("light");
document.body.classList.add("dark");
localStorage.setItem("colorvar", "dark");
}
printValue();
}

// Función para mostrar el valor del color en un DIV y cambiar el texto del botón
function printValue() {
var color = localStorage.getItem("colorvar");
document.getElementById("valorColor").innerHTML = "El valor de color es: " + "<strong>" + color + "</strong>";
if (color === "dark"){
document.getElementById("changeBtn").innerHTML = "Cambiar a modo " + "?";
} else {
document.getElementById("changeBtn").innerHTML = "Cambiar a modo " + "?";
}
}

 

 

5.- CÓDIGO HTML

El código HTML más sencillo es el siguiente. Debemos incluir la llamada a los ficheros javascript, css y crear el botón para cambiar el color a modo oscuro/claro:

<html>
<head>
<title>Modo oscuro y claro con CSS3 y Javascript - Raúl prieto Fernández</title>
<script src="/darklightmode.js" async></script>
<link href="/darklightmode.css" rel="stylesheet" />
</head>
<body onload="loadColor();">
<h1>Modo oscuro y claro con CSS3 y Javascript</h1>
<button id="changeBtn" type="button" onclick="changeColor();"></button>
<div id="valorColor"></div>
</body>
</html>

 

 

Pero, si queremos adornar un poco más la Web, como en la imagen de los primeros apartados, haremos uso de bootstrap e incluiremos un pequeño formulario de login a modo de ejemplo. El código completo del HTML "bonito" es el siguiente:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8" />
<meta name="keywords" content="css3,dark,light,oscuro,noche"/>
<meta name="author" content="Raúl Prieto Fernández">
<link href="https://www.raulprietofernandez.net/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<title>Modo oscuro y claro con CSS3 y Javascript - Raúl prieto Fernández</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="/darklightmode.js" async></script>
<link href="/darklightmode.css" rel="stylesheet" />
</head>
<body class="text-center" onload="loadColor();">
<h1>Modo oscuro y claro con CSS3 y Javascript</h1>
<!-- Main Form -->
<main class="form-signin w-50 mt-4 m-auto">
<form>
<img class="mb-4" src="/rpf_logo_box.png" alt="" width="125">
<h2 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating mb-2">
<input type="email" class="form-control" id="floatingInput" placeholder="Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-50 btn btn-lg btn-primary mb-4" type="submit">Sign in</button>
<button id="changeBtn" type="button" class="w-50 btn btn-lg btn-secondary mb-4" onclick="changeColor();"></button>
<div id="valorColor" class="alert alert-info" role="alert"></div>
</form>
</main>
<!-- Footer -->
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">&copy; Copyright <script>document.write( new Date().getFullYear() );</script> Raúl Prieto Fernández</span>
</div>
</footer>
</body>
</html>

 

 

En el siguiente enlace se puede ver una demostración del código arriba mostrado:

DEMO ONLINE

 

 

ENJOY!


Acerca de Mi

RPF

Soy Ingeniero Téc. Industrial Mecánico, Administrador de Sistemas Informáticos, Desarrollador de Aplicaciones Informaticas Web, Técnico Superior en PRL, Experto en Energías Renovables... y trabajo actualmente como Senior DevOPS en HP SCDS.

Contactar conmigo

Dirección: León, España

E-Mail: Contactar

Web: https://www.raulprietofernandez.net

Skype: raul.lnx

APÚNTATE GRATIS

VIP RPF
Entra en la Comunidad VIP y consigue acceso a las descargas en PDF, Trucos y Videotutoriales ocultos y mucho más... ¡Muy Pronto!