Un guide pratique du mode clair et sombre dans Jekyll

Ajout d’un mode clair et sombre à mon projet parallèle www.fediverse.to était un voyage amusant. J’ai particulièrement aimé à quel point l’ensemble du processus était intuitif. Le préfère-color-schema La propriété CSS contient le jeu de couleurs de l’utilisateur (clair ou foncé). Je définis ensuite les styles SASS ou CSS pour les deux modes, et le navigateur applique le style souhaité par l’utilisateur. C’est ça! Le flux transparent du système d’exploitation au navigateur et au site Web est une énorme victoire pour les utilisateurs et les développeurs.

Après avoir bricoler www.fediverse.to J’ai également décidé d’ajouter des modes clair et sombre à ce site Web. J’ai commencé par quelques recherches sur Internet sur la meilleure façon d’aborder cela. Cette Fil de discussion GitHub affiche la progression actuelle de la fonctionnalité. Et ce POC approfondi montre à quel point le processus peut être difficile.

Le défi

Le plus grand défi est que parfois SASS et CSS ne fonctionnent pas bien ensemble.

Laisse-moi expliquer.

D’après mon article précédent sur les thèmes clairs et sombres, pour créer les deux styles, j’avais besoin de définir le CSS comme ceci :

/* Light mode */

:root {

   --body-bg: #FFFFFF;

   --body-color: #000000;

}
/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

C’est assez simple. Avec les styles définis, j’utilise var(–corps-bg) et var(–couleur-corps) dans notre CSS. Les couleurs à changer en fonction de la valeur de préfère-color-schema.

Bootstrap 5 utilise Sass pour définir les valeurs de couleur. Mon site Web jeu de couleurs dans _variables.scss ressemble à ça:

// User-defined colors
$my-link-color: #FFCCBB !default;
$my-text-color: #E2E8E4 !default;
$my-bg-color: #303C6C;

La solution semble évidente maintenant, non ? je peux combiner préfère-color-schema avec les variables ci-dessus, et boum !

// User-defined colors

:root {

 --my-link-color: #FFCCBB;

 --my-text-color: #E2E8E4;

 --my-bg-color: #303C6C;

}
/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --my-link-color: #FF0000;
 --my-text-color: #FFFFFF;
 --my-bg-color: #000000;
  }
}

De plus, je dois remplacer le $ valeurs avec leurs — variantes dans _variables.scss. Après avoir fait le changement et exécuté construction jekyllj’obtiens ceci :

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
                    Error: argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color on line 161:11 of _sass/_functions.scss, in function `mix` from line 161:11 of _sass/_functions.scss, in function `shade-color` from line 166:27 of _sass/_functions.scss, in function `if` from line 166:11 of _sass/_functions.scss, in function `shift-color` from line 309:43 of _sass/_variables.scss from line 11:9 of _sass/bootstrap.scss from line 1:9 of stdin >> @return mix(black, $color, $weight); ----------^ 
             Error: Error: argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color on line 161:11 of _sass/_functions.scss, in function `mix` from line 161:11 of _sass/_functions.scss, in function `shade-color` from line 166:27 of _sass/_functions.scss, in function `if` from line 166:11 of _sass/_functions.scss, in function `shift-color` from line 309:43 of _sass/_variables.scss from line 11:9 of _sass/bootstrap.scss from line 1:9 of stdin >> @return mix(black, $color, $weight); ----------^ 
             Error: Run jekyll build --trace for more information.

L’erreur signifie que les mixins Bootstrap s’attendent à ce que les valeurs de couleur soient, eh bien, des valeurs de couleur et non des variables CSS. À partir de là, creusez dans le code Bootstrap pour réécrire le mixin. Mais je dois réécrire la majeure partie de Bootstrap pour que cela fonctionne. Cette page décrit la plupart des options disponibles à ce stade. Mais j’ai pu me contenter d’une approche plus simple.

Comme je n’utilise pas toute la suite de fonctionnalités Bootstrap, j’ai pu ajouter le mode clair et sombre avec une combinaison de préfère-color-schemaquelques remplacements CSS et un peu de duplication de code.

Étape 1 : Séparer la présentation de la structure

Avant d’appliquer les nouveaux styles pour gérer les modes clair et sombre, j’ai effectué un nettoyage du HTML et du CSS.

La première étape consiste à s’assurer que tous les éléments de la couche de présentation se trouvent dans le CSS et non dans le HTML. Le balisage de présentation (CSS) doit toujours rester séparé de la structure de la page (HTML). Mais le code source d’un site Web peut se salir avec le temps. Vous pouvez ignorer cette étape si vos classes de couleurs sont déjà séparées en CSS.

J’ai trouvé mon code HTML parsemé de classes de couleurs Bootstrap. Certain div et bas de page balise utilisée texte clair, texte sombre, bg-lumièreet bg-sombre dans le HTML. Étant donné que la gestion du thème clair et sombre repose sur CSS, les classes de couleurs ont dû disparaître. Alors Je les ai tous déplacés du HTML vers mon fichier SASS personnalisé.

J’ai laissé les classes de couleurs contextuelles (bg-primaire, bg-avertissement, texte en sourdine, etc.) tel quel. Les couleurs que j’ai choisies pour mes thèmes clairs et sombres ne les interféreraient pas. Assurez-vous que les couleurs de votre thème fonctionnent bien avec les couleurs contextuelles. Sinon, vous devez également les déplacer dans le CSS.

Jusqu’à présent, j’ai écrit plus de 100 articles sur ce site. J’ai donc dû scanner tous mes messages sous le _posts/ annuaire traquant les classes de couleurs. Comme l’étape ci-dessus, assurez-vous de déplacer toutes les classes de couleurs dans le CSS. N’oubliez pas de vérifier le Jekyll collections et pages aussi bien.

Étape 2 : Consolidez les styles dans la mesure du possible

La consolidation et la réutilisation des éléments de style vous permettent de moins vous inquiéter. Mon Projets et Écriture en vedette les sections de la page d’accueil affichaient des mises en page semblables à des cartes. Ceux-ci utilisaient leur propre style CSS personnalisé. je les a relookés pour correspondre aux liens des articles et maintenant j’ai moins de soucis à me faire.

Il y avait plusieurs autres éléments utilisant leurs propres styles. Au lieu de les relooker, j’ai choisi de les supprimer.

Le pied de page, par exemple, utilisait sa propre couleur d’arrière-plan. Cela aurait nécessité deux couleurs différentes pour les thèmes clairs et sombres. J’ai choisi de supprimer l’arrière-plan du pied de page pour simplifier la migration. Le le pied de page prend maintenant la couleur du fond.

Si votre site Web utilise trop de styles, il peut être prudent de les supprimer pour la migration. Une fois le passage aux thèmes clairs/sombres terminé, vous pouvez les rajouter.

L’objectif est de garder la migration simple et d’ajouter de nouveaux styles ultérieurement si nécessaire.

Étape 3 : Ajouter les combinaisons de couleurs claires et foncées

Une fois le nettoyage terminé, je peux maintenant me concentrer sur l’ajout des éléments de style pour les thèmes clairs et sombres. Je définis les nouveaux styles de couleurs et les applique aux éléments HTML. J’ai choisi de commencer par ceci :

1. –corps-bg pour la couleur de fond.
2. –Couleur du corps pour la couleur principale du corps/du texte.
3. –body-link-color pour les liens.
4. –card-bg pour les couleurs d’arrière-plan de la carte Bootstrap.

:root {

 --body-bg: #EEE2DC;

 --body-color: #AC3B61;

 --body-link-color: #AC3B61;

 --card-bg: #EDC7B7;

}
/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --body-bg: #303C6C;
 --body-color: #E2E8E4;
 --body-link-color: #FFCCBB;
 --card-bg: #212529;
  }
}

Avec les couleurs définies, j’ai changé le CSS pour utiliser les nouvelles couleurs. Par exemple, le corps l’élément ressemble maintenant à ceci :

body {
 background-color: var(--body-bg);
 color: var(--body-color) !important;
}

Tu peux voir le reste des changements CSS sur GitLab.

Vous pouvez remplacer les valeurs par défaut de Bootstrap 5 s’il est compilé avec votre source Jekyll et non à partir du CDN. Cela peut être utile pour simplifier le style personnalisé que vous devez gérer. Par example, désactiver la décoration des liens m’a rendu la vie un peu plus facile.

$link-hover-decoration: none !default;

Étape 4 : Le basculeur de la barre de navigation

Dernier point mais non le moindre : Le barre de navigation bascule. Dans Bootstrap 5, navbar-lumière et barre de navigation sombre contrôler la couleur de la bascule. Celles-ci sont définies dans l’essentiel navigation élément et .barre de navigation. Comme je ne code plus en dur les classes de couleurs dans le HTML, je dois dupliquer le CSS. je étendu le Sass par défaut et ajouté les couleurs de mon thème.

.navbar-toggler {

  @extend .navbar-toggler;

  color: var(--text-color);

  border-color: var(--text-color);

}
.navbar-toggler-icon {
  @extend .navbar-toggler-icon;
  background-image: escape-svg(url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 30 30'><path stroke="#000000" stroke-linecap='round' stroke-miterlimit="10" stroke-width="2" d='M4 7h22M4 15h22M4 23h22'/></svg>"));
}

Le code ci-dessus est le code CSS par défaut du basculeur Bootstrap 5, avec quelques modifications mineures. Une chose à noter ici : pour l’icône de basculement, j’ai codé en dur trait= #000000 puisque le noir fonctionne avec les couleurs de mon thème. Vous devrez peut-être faire preuve de plus de créativité pour choisir des schémas de couleurs qui fonctionnent bien dans tous les domaines.

Et c’est tout ! Les modes clair et sombre fonctionnent maintenant comme prévu !

Conclure

Bootstrap 5 est complexe, c’est le moins qu’on puisse dire. Il y a beaucoup à penser lorsque vous le remplacez par votre style personnalisé. Fournir des variantes claires et sombres pour chaque composant Bootstrap 5 est difficile, mais c’est possible si vous n’avez pas trop de composants à gérer.

En veillant à ce que le balisage reste dans Sass/CSS, en réutilisant les styles et en remplaçant certaines valeurs par défaut de Bootstrap 5, il est possible d’obtenir des modes clair et sombre. Ce n’est pas une approche complète, mais elle est pratique et utilisable jusqu’à ce que Bootstrap 5 décide de fournir cette fonctionnalité prête à l’emploi.

J’espère que cela vous donnera des idées plus pratiques sur la façon d’ajouter des thèmes clairs et sombres à votre propre site Web. Si vous trouvez une meilleure façon d’utiliser votre propre magie CSS, n’oubliez pas de la partager avec la communauté.

Bon codage 🙂

Cet article est paru à l’origine sur le site de l’auteur Blog et a été republié avec autorisation.