combinación de colores | Trucos CSS - Trucos CSS

¿Sabes cómo tenemos "modo oscuro" y "modo claro" en estos días? Los navegadores también tienen esquemas de colores "oscuros" y "claros" integrados en sus estilos predeterminados. CSS color-scheme permite que el navegador use (o elija) para mostrar ciertos elementos con su estilo oscuro o claro predeterminado.

:root {
  color-scheme: light dark;
}

Él color-scheme La propiedad se define en Módulo de ajuste de color CSS Nivel 1 especificación donde se llama a la propiedad "Incluir en esquema de color preferido".

Es un gran nombre para él porque al configurarlo se activa el navegador. light y dark esquemas de color para que surtan efecto cuando reconoce las preferencias del sistema del usuario. Si el usuario prefiere la luz, obtiene light esquema de colores. ¿Prefieres oscuro? Ellos recibieron dark esquema de color en su lugar.

Piense en ello como si le diera al navegador una pista sobre el color base de una página. Si el color base es light — como un fondo blanco — entonces es mejor que el color predeterminado de un elemento tenga un contraste más oscuro. Si el color primario es darkentonces los elementos son mejores con una apariencia más clara.

Y una vez que el navegador capta la pista, aplica su coincidencia color-scheme de su hoja de estilo automáticamente sin tener que escribir estilos adicionales o consultas de medios.

Él Nivel de especificación del módulo CSS de ajuste de color 1 actualmente se encuentra en estado de borrador del editor al momento de escribir este artículo. Esto significa que la característica puede cambiar entre ahora y cuando la especificación se convierta en una recomendación candidata. Los navegadores pueden implementar la función entre entonces y ahora, pero la función aún se considera experimental.

Sintaxis

color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?

• Valor inicial: normal
• Se refiere a: todos los elementos y textos
• Heredado: Sí
• Porcentajes: no hay
• Valor calculado: Como se indica
• Tipo de animación: apartado

Él color-scheme Las propiedades CSS se pueden aplicar a :root para que se herede globalmente o se pueda establecer en un elemento individual.

Valores

/* Keyword values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: dark light;
color-scheme: only light;
color-scheme: only dark;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

normal

Este valor evita que un elemento seleccione elementos en los esquemas de colores claros y oscuros del sistema operativo. En su lugar, se utiliza el esquema de colores predeterminado del navegador.

Esto se puede usar para restablecer el esquema de color heredado de un elemento. di que te pones color-scheme en :root elemento:

:root {
  color-scheme: dark;
}

Todos los elementos heredan este estilo. Si queremos que un elemento específico suelte este estilo, aquí es donde normal revierte las cosas a la configuración predeterminada del navegador.

:root {
  color-scheme: dark;
}

.some-element {
  color-scheme: normal;
}

light

Este valor incluye elementos en el esquema de colores claros del sistema operativo.

dark

Este valor incluye elementos en el esquema de color oscuro del sistema operativo.

only

Este valor se utiliza junto con light o dark valor:

:root {
  color-scheme: only light;
}

Cuando hacemos esto, le estamos diciendo al navegador que incluya un elemento solo el esquema de color claro, o solo la oscuridad. Entonces, si establecemos color-scheme: only light de un elemento, ese elemento puede obtener el esquema de color claro del sistema operativo, pero no puede usar su esquema de color oscuro... y viceversa.

eligiendo la luz y esquemas de colores oscuros al mismo tiempo

Totalmente podemos hacer esto:

/* Light and dark color schemes are supported,
   but `light` is my preferred option. */
:root {
  color-scheme: light dark;
}

Tenga en cuenta que el orden importa. Entonces, aunque se seleccione un elemento en ambos esquemas de color, el primero es el que obtiene la primera preferencia. Establezca los dos valores para :root es una buena manera de asegurarse de que todos sus elementos mantengan los esquemas de color mientras se construyen uno encima del otro.

Los colores exactos dependen del navegador

Los navegadores incluyen sus propias hojas de estilo. Llamamos a estos agentes de usuario (que es solo una palabra elegante para "navegador") estilos. Echemos un vistazo a uno de los CSS en La hoja de estilo de WebKit:

a:any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}

mira este -webkit-link ¿color? Este es un color con nombre que solo WebKit reconoce y aplica este color a todos los enlaces de forma predeterminada a menos que lo anulemos con nuestro propio CSS. Entonces, cuando un motor de renderizado como WebKit ve que hemos configurado color-scheme: light o color-scheme: dark Para un elemento determinado, decide qué versión de ese color funcionará mejor para la situación.

Él especial explica esto:

Los esquemas de colores claros y oscuros no son paletas de colores específicas. Por ejemplo, un esquema en blanco y negro brillante y un esquema en sepia oscuro sobre bronceado se considerarían esquemas de colores claros. Para proporcionar colores de primer plano o de fondo específicos, deben especificarse explícitamente.

Pero a veces el color depende del usuario.

Los sistemas operativos a menudo permiten a los usuarios reemplazar los colores del sistema con un esquema de color preferido.

Estas son las preferencias que comprueba el navegador, cuando ve color-scheme declarado en un elemento. Si el usuario selecciona un color de estas preferencias, los estilos predeterminados del navegador respetarán esta configuración del sistema operativo.

Hay un correspondiente <meta> etiqueta también

Podemos obtener los mismos beneficios agregando <meta name="color-scheme"> etiquetar a <head> en el HTML de una página web:

<head>
  <meta name="color-scheme" content="dark light">
</head>

No es necesario especificar el esquema de color tanto en HTML como en CSS, pero puede ser útil en situaciones en las que la hoja de estilo no se carga por algún motivo. De esta manera, la página aún se incluye en ambos esquemas de color, incluso si CSS no está disponible.

Si está tratando de elegir entre una metaetiqueta HTML y una propiedad CSS, puede optar por HTML. HTML está disponible al instante. El método CSS, por otro lado, requiere que se descargue la hoja de estilo antes de aplicar la propiedad, y el tiempo que toma hacerlo puede resultar en un tema de color incorrecto que parpadea levemente.

color-scheme se trata del aspecto predeterminado

Entonces, los elementos de página que tienen colores predeterminados de la hoja de estilo del agente de usuario, como background-color de los controles de formulario y color de texto: actualice de acuerdo con color-scheme Apple lo explica bien Vídeo "Cómo mantener el modo oscuro en su contenido web".:

[color-scheme] cambia el texto predeterminado de la página y el color de fondo para que coincida con la apariencia actual del sistema, los controles de formulario estándar, las barras de desplazamiento y otros colores del sistema con nombre también cambian su apariencia automáticamente.

Podemos ver esto con una demostración rápida y sucia donde tratamos solo tres elementos:

• El documento :root,
• a <h1>elemento y
• a <button>

Tenga en cuenta que la demostración no establece ningún color para los elementos. he puesto :root a un esquema de color claro, así que eso es lo que se representa de forma predeterminada :root a dark.

Vea lo que cambió al cambiar de light a dark?

• Los documentos background-color cambiar de blanco a negro.
• el titulo 1 color cambiar de negro a blanco.
• es el botón color También cambia de negro a blanco.
• es el botón background-color cambia de tono

Si abrimos DevTools, podemos ver que el Título 1 color proviene de la hoja de estilo del agente de usuario con un text valor.

Sinceramente, no estoy seguro de qué color. text en realidad corresponde a. Pero si vamos a la pestaña Calculado, veremos que es negro (rgb(0, 0, 0)).

Cuando cambiamos a color-scheme propiedad de light a darkeste valor calculado cambia a blanco (rgb(255, 255, 255)):

Estos colores nunca se establecieron en los estilos que escribí, provenían de la hoja de estilo del navegador. color-scheme la propiedad es lo que los controla.

color-scheme es diferente de prefers-color-scheme

Es fácil confundirlos, toman lo mismo light y dark valores después de todo!

¿La diferencia? otra vez, color-scheme se trata de apariencias predeterminadas.Le dice al navegador que actualice los colores en su hoja de estilo.

Mientras tanto, prefers-color-scheme se trata de aplicar los estilos que escribimos en nuestra propia hoja de estilos, y solo cuando se cumple esa condición. En otras palabras, se aplican las reglas de estilo que escribimos en la solicitud de medios; no tiene nada que ver con los estilos predeterminados del navegador.

Revisemos nuestro último ejemplo donde cambiamos color-scheme en una página que contiene :root documento, título y botón. De forma predeterminada, no cambié ninguno de los colores, pero sí declaré color-scheme: lightEsto significa que todos los colores provienen de la hoja de estilo del navegador.

:root {
  color-scheme: light;
}

Cuando cambiamos esto a:

:root {
  color-scheme: dark;
}

… todos estos colores predeterminados de la hoja de estilo del navegador han sido cambiados. ¡No se requieren solicitudes de medios!

Ahora digamos que nunca declaramos color-schemeusaríamos prefers-color-scheme petición de los medios de cambiar estos colores nosotros mismos. He aquí un ejemplo abreviado que cambia :root elementos background-color y color:

:root {
  background-color: white;
  color: black;
}

/* If user prefers a dark appearance */
@media (prefers-color-scheme: dark) {
  :root {
    background-color: black;
    color: white;
  }
}

La consulta de medios solo se aplica si el aspecto del sistema operativo del usuario está configurado como "Oscuro".

Si esta condición coincide, cualquier tipo los estilos que colocamos allí se aplican; no estamos limitados solo a los colores y estilos predeterminados del navegador. Por ejemplo, cambiemos background-color y color a colores completamente diferentes cuando prefers-color-scheme: dark:

Usando color-scheme y prefers-color-scheme juntos

La verdad es que es mejor usar los dos juntos. ¿Por qué? Hacen cosas diferentes pero se complementan bien. Podemos crear la interfaz de modo oscuro más hermosa del mundo usando prefers-color-schemepero algunos elementos, como controles de formulario y barras de desplazamiento: están fuera de nuestro control sin anular un montón de estilos de navegador predeterminados. Cuando usamos los dos juntos, obtenemos una manera fácil de alternar estas configuraciones predeterminadas sin costo adicional.

Compatibilidad con navegador

Soporte CSS color-scheme la propiedad es bastante sólida siempre y cuando uses light y dark Muchos navegadores no son compatibles only palabra clave en el momento de escribir este artículo, siendo Safari la única excepción.

Navegadores de escritorio	ES DECIR	Borde, final	Cromo	Firefox	Safari	ópera
color-scheme	no	81+	81+	96+	13+	68+
Palabra clave: only dark	no	no	no	no	13+	no
Palabra clave: only light	no	no	no	no	13+	no

Navegadores móviles	safari ios	cromo androide	FirefoxAndroid	Navegador para Android	Ópera Móvil
color-scheme	13+	108+	107+	108+	72+
Palabra clave: only light	13+	no	no	no	no
Palabra clave: only dark	13+	no	no	no	no

Más información

¡Trucos relacionados!

Conectado