En este artículo, estamos creando una interfaz de modo oscuro utilizando la consulta de medios de esquema de color preferido .
El esquema de color preferido es una nueva consulta de medios que se utiliza para detectar el tema actual de su sistema y proporciona una función que ayuda a crear el tema de su página web de acuerdo con la preferencia de su sistema. Si su teléfono (o cualquier dispositivo) está actualmente en modo oscuro, esta consulta de medios lo detectará y podrá usar el CSS personalizado de su elección.
Sintaxis:
@media (prefer-color-scheme : your_color_scheme)
{
...
}
En el lugar de your_color_scheme , puede usar la opción oscura o clara . La oscuridad indica que el usuario ha notificado al sistema que prefiere una interfaz con un tema oscuro y la luz indica que el usuario ha notificado al sistema que prefiere una interfaz con un tema claro o que no ha expresado una preferencia activa.
@media (prefer-color-scheme : dark) { ... }
@media (prefer-color-scheme : light) { ... }
Ejemplo: hemos creado una página web ficticia usando HTML y CSS, y queremos crearla en modo oscuro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Creating dark mode</title>
<style>
.main {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<center>
<div class="main">
<h1>Geeksforgeeks</h1>
<p><i>A computer science portal for geeks</i></p>
<br /><br />
<p>Creating dark mode using prefers-color-scheme</p>
<br />
<img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"/>
</div>
</center>
</body>
</html>
Producción:
Creación de la interfaz de usuario del modo oscuro: ahora cree una consulta de medios de esquema de color preferido y configúrela en dark . Estamos creando todos los textos negros en blanco y todos los fondos blancos en negro si el sistema está usando el modo oscuro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Creating dark mode</title>
<style>
.main {
border: 1px solid black;
padding: 20px;
}
@media (prefers-color-scheme: dark) {
h1,
p,
div {
color: white;
}
div {
background-color: black;
}
}
@media (prefers-color-scheme: light) {
h1,
p,
div {
color: black;
}
div {
background-color: white;
}
}
</style>
</head>
<body>
<center>
<div class="main">
<h1>Geeksforgeeks</h1>
<p><i>A computer science portal for geeks</i></p>
<br /><br />
<p>Creating dark mode using prefers-color-scheme</p>
<br />
<img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"/>
</div>
</center>
</body>
</html>
Producción:
Detectar el modo actual del sistema usando JavaScript: A veces necesitamos detectar el modo actual del tema. Por ejemplo, si queremos usar dos imágenes separadas para el modo claro y el modo oscuro, entonces necesita detectar el modo de tema actual. Para detectar el modo, usamos el método matchMedia() . Este método toma una string (la consulta de medios que desea buscar) y devuelve el resultado de esa consulta de medios.
Ejemplo: en el siguiente fragmento de código, estamos buscando el resultado de la consulta de medios de esquema de color preferido.
Javascript
<script>
const a = window.matchMedia("(prefers-color-scheme: dark)");
console.log(a.matches);
</script>
Producción:
- Si el tema del sistema es oscuro, devuelve:
true
- Si el tema del sistema es ligero, devuelve:
false
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA