Los colores del sistema pueden reaccionar al valor color-scheme
que se usa actualmente. La función light-dark()
expone la misma función a los autores.
Colores del sistema en CSS
En CSS, puedes usar muchos colores de uno de los muchos espacios de color. Por ejemplo, puedes usar colores con nombre, colores hexadecimales, funciones de color vinculadas a un espacio de color específico o la función color()
más genérica.
Por ejemplo, el color con nombre cornflowerblue
también se puede representar como #6495ED
, hsl(218.54deg 79.19% 66.08%)
o color(display-p3 0.43 0.58 0.9)
.
Además de estos diversos nombres y formatos, CSS incluye colores descritos como colores del sistema, especificados en el nivel 4 del módulo de color de CSS. Estos colores del sistema son colores definidos por el navegador y se representan con una palabra clave.
Por ejemplo, el color del sistema Canvas
(no debe confundirse con el elemento <canvas>
) representa el "fondo del contenido o los documentos de la aplicación". Se vincula a la perfección con CanvasText
, que representa el "texto en el contenido o los documentos de la aplicación", y también debe usarse en conjunto con este.
En CSS, los usas de la siguiente manera:
body {
color: CanvasText;
background-color: Canvas;
}
De forma predeterminada, CanvasText
da como resultado un color cercano a black
y Canvas
es un color cercano a white
. La implementación real depende del navegador. Por ejemplo, CanvasText
en Chrome da como resultado #121212
, mientras que Safari lo especifica como #1e1e1e
, un poco más claro.
Una potencia oculta de estos colores del sistema es que pueden responder al valor calculado de la propiedad color-scheme
. Por ejemplo, los valores de CanvasText
y Canvas
se invierten cuando el color-scheme
usado es dark
.
:root {
color-scheme: dark;
}
body {
color: CanvasText;
background-color: Canvas;
}
En la siguiente demostración, puedes cambiar el valor de color-scheme
establecido en :root
y ver cómo responde la página.
- Cuando se establece en
light dark
, indica que el elemento admite el modo claro y oscuro. La elección del valor que se usa depende del valor de la condición de contenido multimediaprefers-color-scheme
. - Cuando se establece en
light
, indica que el elemento admite un esquema de colores claros. - Cuando se establece en
dark
, indica que el elemento admite un esquema de colores oscuro.
Presentamos light-dark()
Hasta ahora, reaccionar al valor de color-scheme
usado era algo reservado para los colores del sistema. Gracias a light-dark()
, especificado en el nivel 5 del módulo de colores de CSS, ahora también tienes la misma capacidad.
light-dark()
es una función que acepta dos argumentos, ambos de los cuales deben ser <color>
. Se elige una de ambas opciones según el esquema de colores utilizado.
- Si el esquema de colores utilizado es
light
o desconocido, se muestra el valor calculado del primer valor. - Si el esquema de colores utilizado es
dark
, se muestra el valor calculado del segundo color.
El resultado de light-dark()
es un <color>
. Se puede usar en CSS en cualquier lugar donde se acepte un <color>
. Por ejemplo, en las propiedades color
y background-color
, pero también en una función como linear-gradient()
.
En el siguiente ejemplo, el color de fondo utilizado es #333
en el modo oscuro o #ccc
en el modo claro (o un modo desconocido).
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#ccc, #333);
}
Ten en cuenta que, para que light-dark()
funcione correctamente, debes especificar un color-scheme
. Dado que esa propiedad hereda, por lo general, se establece en :root
, pero si lo deseas, puedes establecerla en un elemento específico.
Aplicación práctica
En el siguiente ejemplo, algunas propiedades personalizadas representan colores en la página. Para admitir el modo oscuro, los valores de esas propiedades personalizadas se reemplazan por un valor diferente en una condición de contenido multimedia prefers-color-scheme
.
:root {
--primary-color: #333;
--primary-background: #e4e4e4;
--highlight-color: hotpink;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fafafa;
--primary-background: #121212;
--highlight-color: lime;
}
}
Gracias a light-dark()
, este código se puede simplificar. Como color-scheme
se configura como light dark
en :root
, los valores de estos colores cambian automáticamente cuando cambias el SO del modo claro al oscuro y viceversa.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
Como beneficio adicional, es posible forzar a un subárbol determinado del DOM a usar solo el modo oscuro o claro configurando color-scheme
como dark
o light
. En el siguiente ejemplo, esto se aplica a :root
.