Propiedad color-scheme
Use la propiedad color-scheme para informar al navegador de los temas que admite un elemento.
Propiedad color-scheme es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es color-scheme?
La propiedad color-scheme indica al navegador qué esquemas de color admite un elemento (o la página). A continuación, el navegador utiliza esta información para aplicar estilos a sus propios elementos de interfaz —barras de desplazamiento, controles de formulario, casillas de verificación y bordes de campos de entrada— de modo que coincidan con el esquema solicitado.
Valores de color-scheme
Valores aceptados:
normal: el elemento utiliza el valor predeterminado del documentolight: el elemento solo admite el esquema clarodark: el elemento solo admite el esquema oscurolight dark: admite ambos; el navegador elige según la preferenciadark light: prefiere el oscuro y usa el claro como alternativa
Elementos de la interfaz del navegador
El navegador aplica automáticamente estilos a estos elementos según color-scheme:
- Barras de desplazamiento
- Campos de entrada, áreas de texto y menús desplegables select
- Casillas de verificación y botones de opción
- Controles deslizantes de rango
- Selectores de fecha y hora
Configuración en el elemento html
Configurar color-scheme en el elemento raíz cambia la representación de toda la interfaz del sistema de la página:
<input type="checkbox" /> <select><option>A</option><option>B</option></select>
Equivalente mediante etiqueta meta
También puede declarar color-scheme en HTML mediante una etiqueta meta para aplicarlo antes (antes de que se cargue CSS):
<pre class="code-sample"><meta name="color-scheme" content="light dark"></pre>
Modo oscuro sin colores personalizados
Un modo oscuro mínimo: establezca color-scheme: dark y deje que el navegador gestione automáticamente los elementos de formulario y las barras de desplazamiento:
<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />
Combinación con prefers-color-scheme
Utilice prefers-color-scheme para detectar la preferencia y establecer conjuntamente sus tokens personalizados Y la propiedad color-scheme:
<div class="demo">Themed via variables + color-scheme</div>
color-scheme con ámbito
Aplique color-scheme a elementos específicos para crear islas claras aisladas dentro de una página oscura:
<div class="light-widget">Always-light widget<br/><input type="date" /></div>
Colores forzados / Alto contraste de Windows
La media query forced-colors detecta el modo de alto contraste de Windows. Utilice color-scheme y forced-colors conjuntamente para ofrecer una compatibilidad integral con la accesibilidad.
<div class="card">Card respects forced-colors mode</div>
Palabras clave system-color
Cuando forced-colors está activo, utilice palabras clave de colores del sistema CSS que se asignan a la paleta de colores accesible del usuario:
<button>System-styled button</button>
Comprobación rápida
¿Qué comportamiento de CSS habilita establecer color-scheme: dark en el elemento html?
Resumen
color-scheme indica al navegador cómo debe aplicar estilos a sus propios controles de interfaz para un elemento o una página. Utilice color-scheme: light dark globalmente para habilitar la adaptación automática de la interfaz nativa. Combínelo con propiedades personalizadas de CSS para implementar un modo oscuro completo. Utilice la etiqueta meta para aplicarlo anticipadamente, antes de que se cargue CSS.
Preguntas frecuentes
¿La lección «Propiedad color-scheme» es gratis?
Sí — el texto completo de «Propiedad color-scheme» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Propiedad color-scheme»?
Use la propiedad color-scheme para informar al navegador de los temas que admite un elemento. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Propiedad color-scheme»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Media query prefers-color-scheme
- Variables CSS para temas
- Propiedad color-scheme
- Alternancia automática y manual del modo oscuro