Choix du thème avec aperçu
Trois miniatures d'interface pour l'apparence claire, sombre et système, avec une coche sur celle choisie.
Réglages
Code
<fieldset class="uv-rth"><legend>Apparence</legend><div class="gr"><label><input type="radio" name="uv-rth"><span class="pv lt" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Clair</span></label><label><input type="radio" name="uv-rth"><span class="pv dk" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Sombre</span></label><label><input type="radio" name="uv-rth" checked><span class="pv au" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Système</span></label></div></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Montrer vaut mieux qu'expliquer quand on choisit une apparence. Chaque option est une fenêtre miniature avec barre latérale, lignes de texte et bouton d'accent dessinés en CSS : une claire, une sombre et une coupée en diagonale pour le système. La miniature choisie reçoit un double anneau, se soulève et affiche une coche ronde dans le coin.
Elle convient aux pages de réglages d'applis, d'éditeurs et de tableaux de bord. Le bouton d'accent de chaque aperçu utilise ta couleur principale, on voit donc comment la marque rend dans les deux thèmes.