Bouton de mode sombre pour site

Bouton de mode sombre pour site: à quoi ça sert

Le mode sombre est devenu la norme sur les téléphones, et beaucoup de gens s’attendent à ce que les sites s’y adaptent. Ce générateur construit le thème clair et sombre avec des variables CSS et prefers-color-scheme, de sorte que le site suive le système tout seul, plus un bouton pour que la personne choisisse un autre thème uniquement sur votre site.

Le code comprend trois parties : une ligne pour le head qui applique le choix enregistré avant l’affichage de la page (sans le flash du mauvais thème), le CSS avec color-scheme pour que les champs et les barres de défilement suivent, et le bouton avec aria-pressed et des icônes de soleil et de lune.

Mode d’emploi

1. Choisissez les couleurs du thème clair et du thème sombre.
2. Testez le bouton dans l’aperçu.
3. Collez la ligne dans le head, le CSS et le bouton au bon endroit.

Quand l’utiliser

• Blogs et sites de contenu.
• Systèmes et tableaux de bord.
• Portfolio de développeur.

Questions fréquentes

Comment éviter le flash du thème clair au chargement ?

Le script qui lit le choix enregistré doit s’exécuter dans le head, avant l’affichage de la page. Le code est fourni en deux parties : une ligne pour le head et le bouton pour le corps de la page.

Que fait color-scheme ?

Il indique au navigateur si la page est claire ou sombre, pour qu’il adapte aussi les barres de défilement, les champs de formulaire et le fond par défaut. Sans lui, le mode sombre garde des champs blancs qui détonnent.

Faut-il un bouton si le site suit déjà le système ?

Ce n’est pas obligatoire : avec prefers-color-scheme seul, le site suit déjà le thème du téléphone ou de l’ordinateur. Le bouton est utile pour ceux qui veulent un thème différent de celui du système uniquement sur votre site.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires