HTML + CSSInterrupteurs

Toggle jour et nuit

Un interrupteur où le soleil traverse un ciel bleu et devient une lune dans une nuit étoilée.

Réglages

16px
1x

Code

<label class="uv-dn"><input type="checkbox"><span><i></i><b></b><b></b><b></b></span></label>

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 Interrupteurs

Où l’utiliser

Un toggle jour et nuit est la façon la plus sympathique de proposer le passage au mode sombre. Il trouve sa place dans l'en-tête d'un blog personnel, d'un portfolio ou d'un site de documentation où le choix du thème peut avoir du caractère. Le soleil glisse, devient une lune grise avec ses cratères, le ciel fonce et trois étoiles apparaissent.

Il ne change que sa propre apparence : c'est à vous de le relier aux styles clair et sombre de votre site. Il est un peu plus large qu'un interrupteur classique, laissez-lui de la place dans l'en-tête au lieu de le coincer entre deux liens du menu.