Genere una etiqueta meta color-scheme y su propiedad CSS

Elija claro si la página solo admite una interfaz clara, oscuro si solo admite una interfaz oscura o ambos si todos los componentes funcionan correctamente en las dos apariencias. Obtendrá un resultado determinista y normalizado para plantillas, hojas de estilo, sitios estáticos, bibliotecas de componentes o procesos de compilación.

Declare los esquemas que su interfaz admite realmente

La declaración color-scheme es una promesa sobre la página, no un conversor automático de temas. Seleccione claro únicamente cuando controles, fondos, texto, bordes, imágenes y estados de foco funcionen en una presentación clara. Seleccione oscuro cuando esos elementos estén preparados para una presentación oscura. Elija ambos cuando toda la interfaz funcione en cualquiera de los dos esquemas. El generador convierte esta opción en <code>light dark</code>, con el claro como preferido. La precisión importa porque el navegador puede usar la información para controles nativos, barras de desplazamiento y el lienzo del documento. Una declaración exagerada puede causar controles incoherentes o destellos ilegibles. Revise entradas desactivadas, autocompletado, mensajes de validación, selección de texto, bloques de código, widgets e iconos. El mejor valor es la descripción más limitada y veraz de la compatibilidad publicada. La herramienta da un formato coherente; el diseño y las pruebas determinan si la declaración es cierta.

Coloque el HTML y el CSS generados donde corresponde

Inserte el elemento meta en el <code>&lt;head&gt;</code> del documento, preferiblemente antes de que el navegador pinte una parte importante de la interfaz. La etiqueta devuelta está completa y puede pegarse en HTML estático, un diseño renderizado en servidor o la configuración de cabecera de un generador de sitios. Coloque la declaración CSS en una regla que represente el ámbito deseado. Para todo el documento suele ser <code>:root</code>; un componente puede aplicarla a su propia raíz. El resultado contiene la declaración sin selector para que funcione con CSS normal, preprocesadores, módulos CSS y objetos de estilo. Ambos resultados usan el mismo valor normalizado y evitan discrepancias entre metadatos y estilos. Puede usarlos juntos como indicación temprana y valor explícito de la cascada, o integrar solo el que requiera su arquitectura. Después, inspeccione el código final y el CSS compilado, ya que los frameworks, gestores de cabecera, minificadores o declaraciones duplicadas pueden alterar el valor que recibe el navegador.

Separe la compatibilidad de la selección del tema

Admitir dos esquemas y elegir el tema activo son tareas relacionadas, pero distintas. <code>light dark</code> afirma que ambas presentaciones son compatibles; no crea variables de color, un selector de tema, preferencias persistentes ni consultas de medios. Una implementación sólida define variables semánticas para superficies, texto, bordes y acentos, y las modifica con la estrategia elegida. Esta puede seguir la preferencia del sistema, respetar una opción de cuenta, responder a un atributo del documento o combinar métodos. Genere la declaración después de completar los estados visuales. Pruebe la página con configuraciones claras y oscuras, navegación por teclado, zoom y modos de contraste alto o colores forzados. Compruebe imágenes, iframes, formularios externos, resaltado de sintaxis y diálogos nativos. En automatización, guarde la entrada elegida junto a las cadenas generadas. Si deja de admitir un tema, regenere ambas declaraciones desde la nueva opción en vez de editar una manualmente. Una fuente única evita divergencias entre plantillas, paquetes y despliegues.