¿La función CSS Light-Dark () admite más valores de luz y oscuridad?

Una de las nuevas características de CSS que me interesa: light-dark() Función. Lo he estado viendo de cerca desde entonces Se convierte en la línea de base en mayo de 2024.

este light-dark() Funcional, corto

Si no lo sabes light-dark() La función requiere dos parámetros de color: uno para modo de luz y otro para modo oscuro. Por lo tanto, el nombre light-dark(). Cambia entre dos valores de luz y oscuridad de acuerdo con la preferencia del usuario. Sara Joy tiene un gran artículo Puede obtener una explicación más detallada aquí.

La clave es que esta característica requiere que la use color-scheme Los atributos activan estos dos modos de color:

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(brown, black);
}

Además, según las preferencias del usuario, se aplica uno de estos dos modos.

¿Solo hay dos modos?

Dicho esto, me he estado preguntando por un tiempo: debería light-dark() ¿El soporte funcional no es solo modos ligeros y oscuros?

Lo he escrito light-dark() Para el anuario CSS-Tricks. En mi investigación, me encontré deseando que la característica hiciera más, especialmente porque carece de soporte para otros tipos de esquemas de color que los usuarios pueden preferir, como la escala de grises, el alto contraste y el bajo contraste.

Hacer light-dark() ¿Es necesario tener un modo de alto contraste?

Diré que sí y No. Volvamos a cuando light-dark() Originalmente propuesto en algún lugar alrededor de 2022. Emilio Cobos preguntar Para admitir los cambios funcionales de los modos de luz y oscuridady Agregado a las especificaciones.

Terminar y procesarlo, ¿verdad? No tan rápido. Las entradas están cerradas cuando Jacob Miller:

Solo de @bramusPublicado, sospecho que las cosas se han cerrado/que han cambiado ahora, pero creo que es una forma que en realidad no resuelve el problema que las personas enfrentan con temas y de una manera que crea trampas para ellos al buscar el apoyo del tema adecuado.

(…)

No debemos enviar herramientas de un solo propósito al navegador, sino que podemos extender y podemos estar basados ​​en el navegador.

Habló de cosas buenas porque eso provocó a Brams Reabrir el boleto:

Creo que esto está mal. El objetivo final es tener algo similar schemed-value()y light-dark() Es un paso mediador hacia la solución final.

¡Esto es muy importante! Brams dijo light-dark() La función es una solución intermediaria para un schemed-value() Función. En otras palabras, transporte light-dark() Nunca hay un objetivo final predeterminado. Este es otro paso más poderoso schemed-value() característica.

Esquema de color personalizado

Brams lo ha escrito acerca de schemed-value() concepto. Se parece a esto:

:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(
    light lightblue, /* Value used for light color-scheme */ 
    dark crimson, /* Value used for dark color-scheme */ 
    --custom green /* Value used for --custom color-scheme */
    );
}

está fuera de la cuestión light-dark(). De hecho, antes de que la función pueda admitir dos modos, color-scheme El alcance de la propiedad debe ampliarse más allá light y dark valor. Solo esto light-dark() Se expande porque, recuerda, light-dark() necesidad color-scheme Hacer lo tuyo.

Específicamente, necesitamos color-scheme Acepta algún tipo de valor de esquema de color «personalizado». La etiqueta Atkins proporciona un posible ejemplo En el boleto. La idea es registrar un esquema de color personalizado utilizando un @color-scheme Reglas del dispositivo que definen las propiedades del esquema, como mapear una palabra clave de color específica a la cual, y luego usar la identificación de ese esquema de color en él color-scheme Propiedades declaradas en el elemento raíz:

@color-scheme --high-contast {
  base-scheme: dark;
  canvascolor: black;
  canvastext: white;
  accentcolor: white;
  /* other properties set to specific colors */
}

html {
  color-scheme: --high-contrast;
}

Implementarlo, y los esquemas de color personalizados se pueden usar como su propio valor independiente schemed-value() Función:

@color-scheme --high-contast {
  /* ... */
}

html {
  color-scheme: --high-contrast light dark;
}

body {
  color: schemed-value(--high-contrast, black, white);
}

Solución a todo:

• Registramos un esquema de color personalizado (p. Ej. --high-contrast) @color-scheme Hay reglas.
• Definimos las propiedades del esquema de color en la especificación del dispositivo, como si su tema básico es light o dark y se asignan palabras clave de color para ciertos valores.
• Estamos en color-scheme Los atributos están a nivel de raíz (es decir, html { color-scheme: --high-contrast;}).
• Anunciamos esquemas de color personalizados en propiedades relacionadas con el color al declarar esquemas de color personalizados schemed-value() Función.

Entonces, no solo lo hará light-dark() Cambio, CSS color-scheme Las propiedades probablemente tengan su propio conjunto de reglas para permitir la personalización color-scheme valor.

Necesitamos más soporte de temas de color, pero no light-dark()

Esto lleva a mi pregunta anterior: light-dark() ¿La función realmente necesita admitir más de dos modos de esquema de color? Brams tiene una respuesta:

cuando schemed-value() Una vez fue una cosa, light-dark() Se convertirá en azúcar sintáctica.

¡Ah! Esto significa light-dark() No hay necesidad de admitir múltiples modos porque schemed-value() Capacidad para expandir light-dark() Con sus propias virtudes:

light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>);

Sí light-dark() ¿Pasos intermediarios? Sí. ¿Debería extenderse para admitir múltiples modos, incluidos los esquemas de color personalizados? Por supuesto, pero no necesariamente. En su lugar, podemos registrar y definir esquemas de color personalizados en la especificación del dispositivo y garantizar color-scheme Las propiedades se pueden leer. De esta manera, obtenemos la simplicidad de dos funciones de modo, que se pueden abstraer aún más para admitir otros modos personalizados (si es necesario).

De hecho, va más allá del esquema de color. Incluso hay un boleto abierto que se puede ampliar light-dark() Para imágenesy la discusión sobre ella parece ser consistente con las nuevas características para las que diseñó específicamente.

¿Qué pasa con las funciones personalizadas?

¡Pero espera! No parece que hemos estado escuchando sobre el trabajo que está sucediendo todo el tiempo. Características personalizadas? en efecto, Las etiquetas se devuelven utilizando posibles métodos if() Funcióny Chris Lilley relata los votos. Cuando fue eso Brams probados ¿Cómo lo copiamos razonablemente? light-dark() Características con funcionalidad CSS personalizada:

:root {
  /* ensures light mode comes first */
  --scheme: light;

  /* dark mode is set here */
  @media (prefers-color-scheme: dark) {
    --scheme: dark;
  }
}

/* custom function returns any two values depending on whether system is in light or dark mode */
@function --light-dark(--light-color, --dark-color) {
  result: if(style(--scheme: dark): var(--dark-color) ; else: var(--light-color));
}

p {
  font-size: --light-dark(
    2rem,
    2.5rem
  ); /* returns 2rem if system is in light mode and 2.5rem if system is in dark mode */
}

¡No hay piedras! Lo único que sabemos es que tenemos un trabajo light-dark() Las funciones y sus líneas de base son ampliamente utilizadas. La personalización está en progreso, solo Navegador basado en cromo Escribí este artículo en ese momento.

El camino a seguir

He estado explorando todo lo relacionado con el color por un tiempo.Quiero saber qué piensas: ¿estás entusiasmado con los cambios que están a punto de suceder? light-dark()? ¿Quieres? light-dark() ¿Se deben soportar más modos de color, como alto contraste?

Déjame saber lo que piensas en la sección de comentarios a continuación. Siéntase libre de comentar sobre cualquier hilo de comentarios W3C GitHub vinculado en este artículo para compartir sus pensamientos y preocupaciones sobre las nuevas características que vienen.

Más light-dark()