CSS
Controles, temas y preferencias visuales
Adapta controles y estilos a color-scheme, forced colors, contraste, movimiento reducido y otras preferencias o capacidades del usuario.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Adapta controles y estilos a color-scheme, forced colors, contraste, movimiento reducido y otras preferencias o capacidades del usuario.
:root {
color-scheme: light dark;
}Permite que controles, canvas, scrollbars y colores del navegador usen un esquema compatible.
:root {
--surface: white;
--text: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--surface: #171717;
--text: white;
}
}La preferencia puede ser default. Si el usuario elige un tema explícito, una clase o atributo debe tener prioridad clara.
[data-theme="dark"] {
color-scheme: dark;
--surface: #171717;
--text: white;
}El valor debe persistirse mediante lógica de aplicación y aplicarse temprano para evitar flash de tema incorrecto.
:root {
accent-color: var(--brand);
}Afecta controles como checkboxes, radios, range y progress según plataforma. Conserva contraste en light/dark/forced colors.
select {
appearance: none;
}Elimina partes de apariencia nativa y puede obligarte a reconstruir indicadores, padding, estados y compatibilidad.
No la uses por rutina en todos los controles.
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}Mantén:
input {
caret-color: var(--brand);
}
::selection {
background: var(--selection-bg);
color: var(--selection-text);
}Comprueba contraste y no ocultes el caret.
@media (forced-colors: active) {
.icon-button {
border: 1px solid ButtonText;
}
}Utiliza system colors como Canvas, CanvasText, ButtonFace, ButtonText, Highlight.
Evita forced-color-adjust: none salvo elementos que realmente necesitan conservar su representación, como una muestra de color.
@media (prefers-contrast: more) {
.card {
border-width: 2px;
}
}El soporte y el valor exacto de la preferencia varían; úsalo como mejora, no como única forma de obtener contraste correcto.
@media (prefers-reduced-transparency: reduce) {
.glass {
backdrop-filter: none;
background: Canvas;
}
}Esta preferencia es más reciente y requiere fallback. Reduced motion sigue siendo el mecanismo principal para movimiento.
@media print {
:root {
color-scheme: light;
}
a[href]::after {
content: " (" attr(href) ")";
}
}No imprimas URLs internas o controles irrelevantes sin criterio.
¿Por qué appearance: none sobre un select puede ser más trabajo del esperado?
Porque elimina indicadores y apariencia nativa, obligando a reconstruir visualmente estados, flecha, padding, foco y compatibilidad sin perder el comportamiento.
Design tokens y theming convierte decisiones visuales en contratos reutilizables.