El modo oscuro se ha convertido en una preferencia popular, por lo que debería buscar admitirlo en sus sitios y aplicaciones web.
En los últimos años, el modo oscuro ha ganado una gran popularidad como opción de interfaz de usuario. Ofrece un fondo más oscuro complementado con texto más claro, lo que no sólo reduce la fatiga visual sino que también conserva la duración de la batería, especialmente en pantallas OLED.
Descubra cómo puede agregar una opción de modo oscuro a sus sitios web y aplicaciones web, utilizando una combinación de CSS y JavaScript.
Entendiendo el modo oscuro
El modo oscuro es una combinación de colores alternativa para tu sitio web que cambia el tradicional fondo claro por uno oscuro. Hace que sus páginas sean más agradables a la vista, especialmente en condiciones de poca luz. El modo oscuro se ha convertido en una característica estándar en muchos sitios web y aplicaciones debido a su facilidad de uso.
Configurando su proyecto
Antes de implementar esto, asegúrese de tener un proyecto configurado y listo para trabajar. Debes tener tus archivos HTML, CSS y JavaScript organizados de forma estructurada.
El código HTML
Comience con el siguiente marcado para el contenido de su página. Un visitante podrá utilizar el cambiador de tema elemento para alternar entre el modo oscuro y claro.
<body>
<navclass="navbar">
<spanclass="logo">Company Logospan><ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul><divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav><main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
main>
<scriptsrc="./script.js">script>
body>
El código CSS
Agregue el siguiente CSS para darle estilo al ejemplo. Esto actuará como el modo de luz predeterminado que luego aumentará con nuevos estilos para una vista en modo oscuro.
@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbarspan { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}
Por el momento, tu interfaz debería verse así:
Implementación del modo oscuro usando CSS y JavaScript
Para implementar el modo oscuro, definirás su apariencia usando CSS. Luego usará JavaScript para manejar el cambio entre el modo oscuro y claro.
Creando las clases temáticas
Utilice una clase para cada tema para que pueda cambiar fácilmente entre los dos modos. Para un proyecto más completo, debes considerar cómo El modo oscuro puede afectar todos los aspectos de su diseño..
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Seleccionar los elementos interactivos
Agregue el siguiente JavaScript a su script.js archivo. El primer fragmento de código simplemente selecciona los elementos que utilizará para manejar la alternancia.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Agregar la funcionalidad de alternar
A continuación, utilice el siguiente JavaScript para alternar entre el modo de luz (luz) y modo oscuro (oscuro) clases. Tenga en cuenta que también es una buena idea modificar el interruptor de palanca para indicar el modo actual. Este código lo hace con un filtro CSS.
// Function to set the themefunctionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}
// Function to toggle the theme between light and dark
functiontoggleTheme() {
setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}
themeToggle.addEventListener("click", toggleTheme);
Esto hace que su página cambie de tema con un clic en el contenedor de alternancia.
Mejora del modo oscuro con JavaScript
Considere las siguientes dos mejoras que pueden hacer que sus sitios en modo oscuro sean más agradables de usar para sus visitantes.
Detectar preferencias de usuario
Esto implica verificar el tema del sistema del usuario antes de que se cargue el sitio web y ajustar su sitio para que coincida. Así es como puedes hacerlo usando el partidoMedia función:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
Ahora, cualquier usuario que visite su sitio verá un diseño que coincide con el tema actual de su dispositivo.
Preferencia de usuario persistente con almacenamiento local
Para mejorar aún más la experiencia del usuario, usar almacenamiento local para recordar el modo elegido por el usuario en todas las sesiones. Esto garantiza que no tengan que seleccionar repetidamente su modo preferido.
functionsetTheme(theme) {
bodyEl.classList.toggle("dark", theme "dark");
bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}
Adoptar el diseño centrado en el usuario
El modo oscuro va más allá de la apariencia; se trata de anteponer la comodidad y las preferencias del usuario. Siguiendo este enfoque, puede crear interfaces fáciles de usar y fomentar visitas repetidas. Mientras codifica y diseña, priorice el bienestar del usuario y ofrezca una mejor experiencia digital a sus lectores.
