#AJA Comment supporter le mode sombre en pur CSS

on

Aujourd’hui j’ai appris comment ajouter un mode sombre votre site web purement en CSS et comment l’activer automatiquement selon la préférence client.

Comme vous le savez, actuellement la mode des sites en mode sombre est devenu il est redevenu tendance. Ce qui est bizarre c’est que avant vers les années 2004-2006 le site avec un design sombre étaient communs. Mais bon c’est pas le sujet.

Actuellement à que ce soit sur Windows 10, Android 10 ou Mac OS X (et iOS)*, il est possible de paramètrer le mode sombre dans les préférences de votre appareil. Le problème c’est que les sites web ont des designs figés. Donc vous naviguez tranquillement vers un site et…

*Note: Ubuntu et plus généralement les systèmes Linux de tout genre supportent les thèmes sombres. Cependant, je n’arrive pas à trouver une ressource à propos de cette fonctionnalité. Faites-moi signe si vous pouvez me confirmer qu’activer un thème sombre active le mode sombre sur les sites.

Réjouissez-vous! Il est possible d’adapter votre site web selon les préférences de l’utilisateur. Un simple média query vous permet d’ajouter une les règles pour le mode sombre :

@media (prefers-color-scheme: dark) {
 // Vos règles CSS ici
}

Si vous êtes en train de visiter Beldy avec un appareil qui supporte le mode sombre et que c’est activé, vous devriez remarquer que le site est en mode sombre.

Tableau de compatibilité avec les navigateurs

Autres sources

Ci-dessous plus de ressources à propos du sujet :

Laisser un commentaire

Contenu non disponible.
Merci d’accepter les cookies en cliquant sur « Accepter » sur la bannière.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.

Fermer