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 ⬇️
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
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 modo claro CSS3 + Javascript
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;
}
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 " + "?";
}
}
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/bootstrap@5.0.2/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">© 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:
ENJOY!
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.
Login con Google
Login con Microsoft
Login con GitHub