Détecter le Dark Mode de l'OS
Détecter le Dark Mode de l'OS

Détecter le Dark Mode de l'OS

Sommaire

Introduction

La grande mode, c'est le DarkMode. Il y a à la fois un intérêt UX mais également un intérêt UI. C'est plus simple à lire, ça fatigue moins les yeux et c'est quand même bien cool visuellement.

Bref, je te montre un Custom Code rapide qui te permet de changer en CSS les couleurs selon le Mode (Light ou Dark) de ton OS (Windows ou MacOS).

Étapes

  • Ajouter dans les Custom Code (à l'échelle de la page ou des Projets Settings) le morceau de code ci-dessous.
  • Tu vas donc concevoir dans Webflow la version Light de ton site.
  • Et tu vas définir en CSS, la version Dark de ton site. Pour cela, tu vas ajouter les .class ainsi que leurs propriétés entre ces accolades {} dans le Custom Code.
  • Sauvegarde. Publie. Change le mode de ton OS et tu verras que ton site s'adapte automatiquement.
  • Bingo ! 👌

Vidéo

Code Nécessaire

<style>

@media (prefers-color-scheme: dark) {
  
}

</style>

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)