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

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

Bramus

Colores del sistema en CSS

En CSS, puedes usar muchos colores de uno de los distintos 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(), que es 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 que se describen como colores del sistema, especificados en el nivel de módulo de color de CSS 4. Estos colores del sistema son los que define el navegador y se representan a través de una palabra clave.

Por ejemplo, el color del sistema Canvas, que no debe confundirse con el elemento <canvas>, representa el "fondo del contenido o los documentos de la aplicación". Se sincroniza muy bien con CanvasText, que también está diseñado para usarse en conjunto, que representa el "texto en el contenido o los documentos de la aplicación".

En CSS, se usan 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 en Safari se especifica como #1e1e1e un poco más claro.

Un poder oculto de estos colores del sistema es que pueden responder al valor calculado de la propiedad color-scheme. Por ejemplo, los valores para CanvasText y Canvas se invierten cuando el color-scheme utilizado 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 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 oscuros.

Presentamos light-dark()

Hasta ahora, reaccionar al valor de color-scheme utilizado era algo reservado para los colores del sistema. Gracias a light-dark(), que se especifica en el nivel 5 de módulo de color de CSS, ahora también tienes la misma capacidad.

light-dark() es una función que acepta dos argumentos, que deben ser <color>. Uno de ambos se elige 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 una <color>. Se puede usar en CSS en cualquier lugar que 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 modo oscuro o #ccc en 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 una color-scheme. Como esa propiedad se hereda, generalmente la estableces en :root, pero si lo deseas, puedes elegir establecerla en un elemento específico.

Aplicación práctica

En el siguiente ejemplo, algunas propiedades personalizadas representan colores en la página. Para contemplar el modo oscuro, los valores de esas propiedades personalizadas se reemplazan por un valor diferente en una condición de medios 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. Debido a que color-scheme se estableció en light dark en :root, los valores de estos colores cambian automáticamente cuando se cambia 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 un subárbol determinado del DOM para que use solo el modo oscuro o claro. Para ello, se debe configurar color-scheme en dark o light. En el siguiente ejemplo, esto se aplica a :root.