Variables CSS para cambiar de tema

Las propiedades personalizadas de CSS (variables) definidas en :root están disponibles globalmente en toda la hoja de estilos. Defina una paleta de colores completa una sola vez —fondos, colores de texto, superficies y bordes— y haga referencia a ella en todas partes. Esta única fuente de verdad hace que cambiar de tema sea trivial.

Cuando se establece un atributo data-theme="dark" en document.documentElement, un selector CSS como [data-theme='dark'] sobrescribe las variables raíz con valores oscuros. Los componentes hacen referencia a var(--color-bg) y adoptan automáticamente los nuevos valores sin cambios en el código.

Como mínimo, defina: --color-bg (fondo de la página), --color-text (texto principal), --color-primary (color de marca), --color-surface (fondo de tarjetas o paneles) y --color-border (separadores). Un conjunto coherente de tokens evita que aparezcan valores de color ad hoc en los componentes.

En el CSS de sus componentes, haga referencia a variables como background: var(--color-bg) y color: var(--color-text). También puede proporcionar un valor de respaldo: var(--color-bg, #ffffff). El navegador resuelve la variable al pintar, por lo que una sola clase funciona tanto para temas claros como oscuros.

Añada transition: background-color 200ms, color 200ms al selector :root. Cuando cambia el atributo data-theme, todos los elementos que usan variables CSS se animan simultáneamente hacia sus nuevos valores. Esto proporciona un acabado pulido sin código de animación en JS.

Gestionar el tema mediante variables CSS es mejor que establecer estilos en línea desde JavaScript. El navegador gestiona todas las recalculaciones de estilos de forma nativa, no se producen renderizados adicionales de React por cada componente hijo tematizado y la cascada de CSS gestiona la herencia automáticamente. JS solo necesita alternar un atributo en el elemento raíz.

Puede combinar variables CSS con la consulta @media (prefers-color-scheme: dark) como alternativa que solo usa CSS. Defina las anulaciones oscuras dentro de la consulta de medios, además del selector data-theme o en su lugar. Esto garantiza que el modo oscuro funcione incluso si JavaScript aún no se ha ejecutado.

El enfoque más sólido combina ambos mecanismos: la consulta @media proporciona el valor predeterminado del sistema operativo, mientras que un atributo data-theme permite que el usuario lo anule mediante JavaScript. Cuando el atributo está presente, prevalece por su especificidad; cuando está ausente, se aplica la consulta de medios.

Para las imágenes que se ven mal sobre fondos oscuros, use el elemento HTML picture con un elemento hijo source media="(prefers-color-scheme: dark)". El navegador selecciona automáticamente la variante oscura. Para los iconos SVG en CSS, puede usar filter: invert(1) como aproximación rápida.

Las variables CSS también pueden limitarse a componentes individuales definiéndolas en el elemento raíz de un componente en lugar de :root. Esto permite aplicar temas por componente, como una barra lateral con su propio token de fondo, diferente del fondo de la página, que aun así cambia correctamente con el control global del tema.

Chrome DevTools muestra los valores resueltos de las variables CSS en el panel Styles. Haga clic en la referencia de la variable para ir a su definición. Así resulta fácil verificar que se está aplicando el token oscuro o claro correcto a cualquier elemento. También puede editar los valores de las variables directamente en el panel.

¿Qué selector CSS se usa para definir propiedades personalizadas globales de CSS que se aplican a todo el documento?

Las propiedades personalizadas de CSS en :root proporcionan un sistema centralizado de tokens para los temas. Alterne un atributo data-theme en el elemento html para cambiar de tema al instante. Añada transiciones CSS para una animación fluida, use la consulta de medios prefers-color-scheme como alternativa que solo usa CSS y evite las anulaciones de estilos en JS por componente.