Card Theme
Une carte de profil qui change de thème toute seule, pièce par pièce : fond, avatar, nom, texte, bouton de bascule et deux boutons d'action portent chacun leur couleur claire sous .active et leur transition de 0,5 s. Le reste de la page ne bouge pas et la carte ne lit aucune variable du site ; 0,45 Ko de JavaScript, 150 ms si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La carte .th-card-wrap (260 px, 20 px de marge intérieure, coins de 16 px) part en sombre : fond #1e293b, bordure blanche à 8 %. Elle contient un en-tête (avatar rond de 36 px, nom, bouton de bascule de 30 px poussé à droite par margin-left: auto), un paragraphe et deux boutons d'action, « Suivre » en violet #8b5cf6 et « Message » en blanc à 6 %. Rien n'est hérité d'ailleurs : chaque pièce déclare sa couleur sombre, puis une règle .th-card-wrap.active … qui donne sa couleur claire — #fff et une ombre légère pour la carte, #0f172a pour le nom, #64748b pour le texte, #6366f1 pour l'action principale, #f1f5f9 pour la secondaire.
Chaque pièce porte aussi sa propre transition, limitée aux propriétés qui changent : background-color .5s, border-color .5s, box-shadow .5s sur la carte, background-color .5s sur l'avatar et le bouton de bascule, color .5s sur le nom et le texte, background-color .5s, color .5s sur les actions. Tout part au même instant et arrive en même temps. Mesuré 300 ms après le clic : fond de carte rgb(229, 231, 233) dans Chromium 151, rgb(223, 225, 227) dans Firefox 153, rgb(228, 229, 231) dans WebKit 26, blanc exact à 1,5 s ; le second clic rejoue le chemin à l'envers. L'icône du bouton (soleil sur le sombre, lune sur le clair) change d'un coup, elle : c'est un repère d'état, pas une couleur.
Le script (0,45 Ko) arme chaque .th-card-toggle de la page et bascule .active sur la .th-card-wrap qui le contient (closest()), avec aria-pressed : plusieurs cartes cohabitent, chacune avec son état. Les boutons d'action sont de vrais <button> sans comportement, prêts à recevoir le vôtre, et prennent la police de la page (font-family: inherit). Ce découpage pièce par pièce est le choix d'un composant autonome : la carte se pose dans n'importe quel site sans dépendre de ses variables ni les modifier. Elle ne lit pas prefers-color-scheme et ne mémorise rien ; un site hôte peut aussi poser .active lui-même pour que la carte suive son thème.
Accessibilité
- Bouton de bascule : un
<button type="button">nommé « Carte en thème clair » avecaria-pressed; ses icônes sontaria-hidden. Mesuré : atteint à la touche Tab dans Chromium, basculé par Entrée et Espace dans Chromium, Firefox et WebKit ; contour violet de 2 px au focus clavier, comme sur les deux boutons d'action. - Mouvement réduit : rien ne se déplace ; sous
prefers-reduced-motion: reduce, toutes les transitions de la carte tombent à 150 ms. Mesuré : fond déjà àrgb(180, 183, 190)à 60 ms dans Chromium, final à 300 ms. - Contraste : texte à 4,8:1 sur le sombre comme sur le clair. Les libellés des boutons, en 11,5 px gras, sont juste sous 4,5:1 (blanc sur
#8b5cf6à 4,2:1,#64748bsur#f1f5f9à 4,3:1) : pour du texte important, passez l'action principale à#7c3aed(5,7:1) et le texte secondaire clair à#475569(6,9:1).
Compatibilité navigateur
CSS (transitions de couleur et d'ombre, :focus-visible) + 0,45 Ko de JavaScript (closest()), aucune dépendance, aucune variable CSS. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes couleurs intermédiaires à quelques unités près, même retour, mêmes touches. closest() existe depuis Chrome 41, Firefox 35 et Safari 6 ; avant Chrome 86, Firefox 85 et Safari 15.4, le contour de focus est celui du navigateur. Le plancher vient de gap dans des boîtes flex : Chrome et Edge 84, Firefox 63, Safari 14.1 (iOS 14.5) ; avant, les éléments se touchent.
Sans JavaScript, la carte reste sombre et le bouton de bascule ne fait rien ; poser active dans le HTML la sert directement en clair.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="th-card-root">
<div class="th-card-scene">
<div class="th-card-wrap">
<div class="th-card-header">
<div class="th-card-avatar"></div>
<span class="th-card-name">…</span>
<button class="th-card-toggle" type="button" aria-pressed="false" aria-label="Carte en thème clair">…</button>
</div>
<p class="th-card-text">…</p>
<div class="th-card-actions">
<button class="th-card-action th-card-action--primary" type="button">…</button>
<button class="th-card-action th-card-action--secondary" type="button">…</button>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Card Theme, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleurs claires (CSS — chaque règle .th-card-wrap.active …) |
carte #fff, nom #0f172a, texte #64748b, action #6366f1 |
Une règle par pièce : changez-les ensemble. Toute pièce ajoutée à la carte demande sa couleur sombre, sa règle .active et sa transition, sinon elle ne change pas ou saute. |
Durée (CSS — .5s sur chaque transition) |
0,5 s | Gardez la même durée partout pour que le texte et son fond arrivent ensemble ; 0,3 s pour un widget discret. |
Bouton de bascule (HTML — .th-card-toggle) |
30 px, en haut à droite | Supprimez-le si la carte suit son hôte, et posez .active depuis le site ; le script ne fait rien quand il n'y a pas de bouton. |
Ombre du thème clair (CSS — box-shadow de .th-card-wrap.active) |
0 4px 16px noir à 8 % |
Sur une page claire, l'ombre détache la carte blanche ; montez à 12 % sur un fond blanc pur. |
Mouvement réduit (CSS — transition-duration: .15s) |
150 ms | 0s pour un changement instantané. |
FAQ
document.querySelectorAll('.th-card-wrap').forEach(function (c) { c.classList.toggle('active', siteEnClair); }); et retirez le bouton de la carte. La carte ne lit pas prefers-color-scheme et ne mémorise rien ; si votre site le fait, il lui suffit de poser active au chargement, avant l'affichage, sinon la transition se joue à l'ouverture de la page.var(--text) prendrait les couleurs d'un site qui définit déjà --text, ou en imposerait. Ici chaque couleur est écrite en dur dans la carte, ce qui la rend sûre à coller n'importe où. Le prix est la maintenance : sept pièces, sept paires de règles. Pour un thème partagé entre plusieurs composants, CSS Variables (fx-0708) est plus économe..th-card-toggle et ne bascule que la carte qui le contient, sans id. Une liste de profils peut mélanger cartes sombres et claires ; chaque bouton annonce l'état de sa carte avec aria-pressed.
