El esquema de color claro sobre oscuro, también llamado modo oscuro, es un modo complementario que utiliza un esquema de color en el que el contenido de una página web se muestra sobre un fondo oscuro. Tal combinación de colores reduce la luz emitida por las pantallas y mejora la legibilidad. Cambiar al modo oscuro permite a los usuarios del sitio web pasar a un diseño agradable a la vista y que ahorra recursos cuando lo deseen.
Pasos para crear el modo oscuro/claro:
- Crear un documento HTML.
- Cree CSS para el archivo del documento y para el modo oscuro.
- Agregue un interruptor/alternador para alternar entre el modo claro y oscuro.
- Agregue funcionalidad al interruptor/alternador para alternar entre el modo claro y el oscuro usando código javascript o jQuery.
Ejemplo 1: El siguiente ejemplo demuestra el cambio entre el modo claro y oscuro usando el código JQuery. Básicamente funciona usando las funciones hasClass(), addClass() y el método removeClass().
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Dark Mode</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
body{
padding:10% 3% 10% 3%;
text-align:center;
}
img{
height:140px;
width:140px;
}
h1{
color: #32a852;
}
.mode {
float:right;
}
.change {
cursor: pointer;
border: 1px solid #555;
border-radius: 40%;
width: 20px;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark{
background-color: #222;
color: #e6e6e6;
}
</style>
</head>
<body>
<div class="mode">
Dark mode:
<span class="change">OFF</span>
</div>
<div>
<h1>GeeksforGeeks</h1>
<p><i>A Computer Science Portal for Geeks</i></p>
<h3>Light and Dark Mode</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png">
<p>
Click on the switch on top-right
to move to dark mode.
</p>
</div>
<script>
$( ".change" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "body" ).removeClass( "dark" );
$( ".change" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark" );
$( ".change" ).text( "ON" );
}
});
</script>
</body>
</html>
Producción:
- Modo de luz:
- Modo oscuro:
Ejemplo 2: El siguiente ejemplo muestra el cambio entre el modo claro y el oscuro usando la función toggle() en el código javascript.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Dark Mode</title>
<style>
body{
padding:0% 3% 10% 3%;
text-align:center;
}
h1{
color: #32a852;
margin-top:30px;
}
button{
cursor: pointer;
border: 1px solid #555;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark{
background-color: #222;
color: #e6e6e6;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p><i>A Computer Science Portal for Geeks</i></p>
<h3>Light and Dark Mode</h3>
<button onclick="myFunction()">Switch mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark");
}
</script>
</body>
</html>
Producción:
- Modo de luz:
- Modo oscuro:
El modo nocturno/modo oscuro además de agregar funcionalidad adicional al sitio web también mejora la experiencia del usuario y la accesibilidad. Es útil para sitios web que publican contenido largo y requiere que los usuarios se concentren en la pantalla durante un período de tiempo más largo.