Générez la balise meta color-scheme et la propriété CSS

Choisissez le mode clair si la page ne gère qu'une interface claire, le mode sombre si elle ne gère qu'une interface sombre, ou les deux lorsque chaque composant fonctionne dans les deux apparences. Le résultat est déterministe, normalisé et utilisable dans un modèle, une feuille de style, un site statique, une bibliothèque de composants ou une chaîne de compilation.

Déclarez les thèmes réellement pris en charge

La déclaration color-scheme constitue une promesse sur la page, et non un convertisseur automatique de thème. Sélectionnez clair uniquement si les contrôles, arrière-plans, textes, bordures, images et états de focus restent utilisables dans une présentation claire. Sélectionnez sombre lorsque ces mêmes éléments sont conçus pour une présentation sombre. Choisissez les deux si toute l'interface fonctionne dans les deux cas. Le générateur traduit ce choix en <code>light dark</code>, avec une préférence pour le clair. La précision est essentielle : le navigateur peut exploiter cette information pour les contrôles natifs, les barres de défilement et le fond du document. Une déclaration trop large peut produire des contrôles incohérents ou des flashs illisibles. Vérifiez les champs désactivés, le remplissage automatique, les messages de validation, la sélection, les blocs de code, les widgets et les icônes. La meilleure valeur est la description la plus stricte et fidèle de la compatibilité livrée. Cet outil assure la mise en forme ; vos tests confirment sa véracité.

Placez correctement le HTML et le CSS générés

Insérez l'élément meta dans le <code>&lt;head&gt;</code>, assez tôt pour que le navigateur le lise avant d'afficher l'essentiel de l'interface. La balise renvoyée est complète et convient à un document HTML statique, une mise en page rendue côté serveur ou la configuration d'un générateur de sites. Placez la déclaration CSS dans la règle correspondant à la portée voulue. Pour tout le document, il s'agit généralement de <code>:root</code> ; un composant peut l'appliquer à sa propre racine. La déclaration est fournie sans sélecteur afin de fonctionner avec le CSS classique, les préprocesseurs, les modules CSS et les objets de style. Les sorties HTML et CSS emploient la même valeur normalisée et évitent toute contradiction. Vous pouvez les utiliser ensemble pour fournir une indication précoce et une valeur explicite dans la cascade, ou ne retenir que celle requise par votre architecture. Vérifiez ensuite la source finale et le CSS compilé, car les frameworks, gestionnaires d'en-tête, minificateurs ou doublons peuvent modifier la valeur reçue par le navigateur.

Distinguez la compatibilité de la sélection du thème

Prendre en charge deux thèmes et choisir le thème actif sont deux opérations liées, mais distinctes. <code>light dark</code> indique que les deux rendus sont compatibles ; il ne crée ni variables de couleur, ni commutateur, ni préférence persistante, ni requête média. Une réalisation robuste définit des variables sémantiques pour les surfaces, textes, bordures et accents, puis les adapte selon la stratégie du produit. Celle-ci peut suivre le système, respecter un réglage de compte, réagir à un attribut du document ou combiner ces méthodes. Ne générez la déclaration qu'après avoir finalisé les états visuels. Testez les réglages clair et sombre, le clavier, le zoom, le contraste élevé et les couleurs forcées. Contrôlez aussi images, iframes, formulaires tiers, coloration syntaxique et dialogues natifs. En automatisation, conservez l'entrée avec les chaînes générées. Si vous abandonnez un thème, régénérez les deux déclarations depuis le nouveau choix au lieu d'en modifier une seule. Une source commune empêche les divergences entre modèles, paquets et déploiements.