Thème sombre

La plupart des navigateurs Web modernes prennent en charge la possibilité d'exécuter des sites Web en mode sombre ou clair. Blocs dispose d'une gamme de fonctionnalités intégrées conçues pour faciliter le processus d'ajout de la prise en charge des thèmes sombres et clairs aux sites que vous créez.

Comment ça marche

Quand un Blocs site est affiché sur un appareil qui exécute le système d'exploitation en mode sombre, la classe Thème sombre sera ajouté à la balise body de la page. Ceci est utile car cela facilite le style de n'importe quel élément à l'aide d'une classe, en particulier en mode sombre.

Par exemple, si vous avez un bouton avec une classe appliquée .mon-bouton, pour donner au bouton une apparence différente en mode sombre, il vous suffit d'ajouter une nouvelle classe à l'aide de la Gestionnaire de classe et nommez-le .thème-dark .mon-bouton. Toutes les valeurs de style ajoutées à cette variante spéciale de la classe ne prendront effet que lorsque le site sera consulté sur un appareil fonctionnant en mode sombre.

Cours à thème sombre

Pour créer une version à thème sombre de n'importe quelle classe, faites simplement un clic droit sur la classe dans le Gestionnaire de classe et dans le menu contextuel sélectionnez Créer une version à thème sombre. Cela créera une classe avec le nom correct afin que ses valeurs de style ne prennent effet que lorsque le site est affiché en mode sombre.

Aperçu du mode sombre

Si vous souhaitez prévisualiser le style du thème sombre de votre site, vous pouvez simuler le mode sombre du système d'exploitation à l'aide de l'option de mode site sombre trouvée dans le paramètres du canevas.

Exemple rapide

Vous trouverez ci-dessous un exemple rapide qui couvre le processus de définition de la couleur d'arrière-plan d'un Bloc spécifiquement pour le mode sombre, en utilisant toutes les techniques mentionnées dans cet article.