Atributo color-scheme de CSS

Definición y uso

color-scheme El atributo indica qué esquema de color del sistema operativo debe usar el elemento para la renderización.

Las selecciones comunes del esquema de color del sistema operativo son "claro" (claro) y "oscuro" (oscuro), o "modo día" (modo diurno) y "modo noche" (modo nocturno).

Ejemplo

Establecer toda la página con el esquema de color oscuro:

:root {
  color-scheme: oscuro;
}

Prueba por tu cuenta

Sintaxis CSS

color-scheme: normal|claro|oscuro|solo claro|solo oscuro|claro oscuro;

Valor del atributo

Valor Descripción
normal El elemento puede renderizarse utilizando el esquema de color predeterminado del sistema operativo
claro El elemento puede renderizarse utilizando el esquema de color claro del sistema operativo
oscuro El elemento puede renderizarse utilizando el esquema de color oscuro del sistema operativo
solo claro

El elemento debe renderizarse utilizando únicamente el esquema de color claro del sistema operativo.

Prohibir que el navegador sobrescriba el esquema de color del elemento.
solo oscuro

El elemento debe renderizarse utilizando únicamente el esquema de color oscuro del sistema operativo.

Prohibir que el navegador sobrescriba el esquema de color del elemento.
claro oscuro El elemento puede renderizarse con el esquema de color claro o oscuro del sistema operativo (dependiendo de la configuración del usuario)

Detalles técnicos

Valor predeterminado: normal
Herencia: sí
Versión: Módulo de Ajuste de Color CSS Nivel 1
Sintaxis de JavaScript:

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que completamente admite esa propiedad.

Chrome Edge Firefox Safari Opera
81 81 96 13 68