Colores de CSS que dependen del esquema de colores con claro-oscuro()

Los colores del sistema tienen la capacidad de reaccionar al valor de color-scheme que se usa actualmente. La función light-dark() expone la misma función a los autores.

Bramus

Colores del sistema en CSS

En CSS, puedes usar muchos colores de uno de los muchos espacios de color. Por ejemplo, puedes usar colores nombrados, 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 combina muy bien con CanvasText, que representa el "texto en el contenido o los documentos de la aplicación", y también está diseñado para usarse junto con este atributo.

En CSS, los usas de la siguiente manera:

body {
  color: CanvasText;
  background-color: Canvas;
}

De forma predeterminada, CanvasText genera 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 especificó #1e1e1e, que es 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 tanto el modo claro como el oscuro. La elección del valor que se usa depende del valor de la condición de contenido multimedia prefers-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.
Una página que te permite cambiar el valor de color-scheme. Cuando se cambia, los colores de la página cambian cuando se pasa de claro a oscuro o viceversa, aunque las declaraciones en el elemento body siguen siendo las mismas.

Presentamos light-dark()

Navegadores compatibles

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5;

Origen

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 deben ser <color>. Se elige uno de los dos según el esquema de colores que se use.

  • Si el esquema de colores utilizado es light o es 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 que se usa es #333 en modo oscuro o #ccc en modo claro (o 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;
  }
}
Una página que responde al modo oscuro o claro mediante prefers-color-scheme.
Los valores de color se cambian en CSS mediante una consulta de medios.

Gracias a light-dark(), este código se puede simplificar. Debido a que color-scheme se establece en 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);
}
Una página que responde al modo oscuro o claro con prefers-color-scheme.
Los valores de color se cambian con light-dark().

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.

Una página que responde al modo claro o oscuro con prefers-color-scheme.
Los valores de color se cambian con light-dark().
Con una de las opciones, puedes forzar un modo claro o oscuro. Para ello, se debe manipular el valor color-scheme.