- Reunión de equipo
- Gimnasio
Changement de thème en cercle
Un clic sur le soleil ou la lune fait grandir le nouveau thème en cercle depuis le bouton jusqu'à couvrir la carte.
Réglages
Code
<div class="uv-mth"><div class="sc"><header><div><small>Mardi 21 octobre</small><b>Bonjour</b></div><button type="button" class="tg" aria-pressed="false" aria-label="Mode sombre"><span class="su"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span><span class="mo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg></span></button></header><div class="wx"><b>22°</b><span>Ensoleillé à Madrid</span></div><ul><li><i style="--c:#6366f1"></i>Réunion d'équipe<time>10:00</time></li><li><i style="--c:#10b981"></i>Salle de sport<time>19:30</time></li></ul></div></div>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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Passer du clair au sombre devient un petit moment. Une copie de l'interface dans le nouveau thème grandit en cercle depuis le centre du bouton jusqu'à couvrir toute la carte, si bien que le changement ressemble à une lumière qui se répand plutôt qu'à un flash. Soleil et lune s'échangent et la carte météo passe de l'orange chaud à l'indigo profond.
Le cercle est un clip-path animé avec la Web Animations API depuis la position du bouton. L'interrupteur utilise aria-pressed, garde le focus après le changement et saute l'animation en mouvement réduit. L'accent et le fond sombre sont réglables.