Comment basculer entre les modes sombre et clair dans Drupal 8 (ou 9) en fonction des préférences de l'utilisateur

Ne serait-il pas formidable de donner à vos utilisateurs la liberté de personnaliser leur interface selon leurs préférences ? Alors que de nombreux utilisateurs préfèrent une interface claire (fond clair avec du texte sombre), certains utilisateurs choisissent une interface sombre (fond sombre avec du texte clair). Les interfaces plus sombres sont perçues comme cool et tendance, tandis que certains pensent également que cela réduit la fatigue oculaire, en particulier pour les développeurs qui passent beaucoup de temps devant l'écran. Je pense que fournir une option à vos utilisateurs est une énorme victoire en termes d'accessibilité et d'expérience utilisateur. Il existe plusieurs façons d'y parvenir. Dans cet article, nous verrons comment basculer entre les modes de conception Web sombre/clair et implémenter cela dans Drupal 8 ou Drupal 9.

Nous allons nous concentrer sur deux méthodes pour mettre en œuvre cela -
1. En utilisant uniquement CSS.
2. Implémentation du commutateur à bascule CSS & JS

Utiliser uniquement CSS

Pour atteindre le mode sombre sur n'importe quel site Web avec uniquement CSS, il faut garder à l'esprit certaines des exigences du système. L'une de ces exigences importantes est le mode sombre à l'échelle du système . Si un utilisateur préfère utiliser le mode sombre sur son PC, alors l'utilisateur est servi avec un site Web qui affiche un arrière-plan de couleur sombre avec du texte clair dessus. Le schéma de couleurs préférée (requête média) est utilisé pour identifier si l'utilisateur a demandé au système d'utiliser un thème de couleur claire ou foncée.

Mise en œuvre:

1. Déclarez les variables CSS.
2. Utilisez les variables partout où cela est nécessaire.

Le résultat:

Remarque : pour émuler le résultat sur certains appareils non pris en charge, entrez simplement DevTool en appuyant sur F12. Ensuite, appuyez sur CTRL + MAJ + P, puis recherchez le schéma de couleurs préféré : sombre et appuyez sur Entrée.

Implémentation du commutateur à bascule CSS et JS

Si nous optons pour cette approche, nous n'avons pas besoin de nous soucier de la configuration système requise. Écrivez juste quelques lignes de CSS et JS et vous devriez être prêt. Une fois que nous avons initialisé les variables, nous pouvons référencer ces variables dans nos feuilles de style. Ce sera la structure HTML pour basculer entre les modes sombre et clair.

Et certaines lignes de CSS devraient entraîner ce changement.

La dernière partie consiste à ajouter un peu de JavaScript pour tout lier ensemble.
● Stocker les préférences de l'utilisateur pour les futures visites
● Vérifiez les préférences de l'utilisateur enregistrées, le cas échéant, lors du chargement du site Web

C'est ça! Découvrez la démo complète ci-dessous.

Ou cliquez ici pour voir la démo.

Implémentation du basculement sombre / clair dans Drupal 8 (ou Drupal 9)

Pour commencer à créer un thème Drupal 8 personnalisé, veuillez consulter l'article génial ici. Commençons maintenant à créer un thème pour montrer comment utiliser le thème sombre/le thème clair dans Drupal 8 ou Drupal 9.

La structure du fichier ressemblera à ceci :

Maintenant, mettez à jour la section d'en-tête à l'intérieur de page.html.twig avec le code suivant.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

Le reste de la structure HTML dépendra de votre conception ou de vos exigences.
Une fois que vous avez terminé avec la structure HTML, il est temps de leur donner une belle apparence en stylisant les éléments en CSS.
Tout d'abord, vous devez créer toutes les variables par défaut qui seront responsables des couleurs en mode clair/foncé.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

Maintenant que vous avez fini de définir les variables, il est temps d'ajouter du style à la section En-tête pour obtenir le résultat souhaité.

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

Veuillez noter que le style peut varier en fonction de vos besoins. Après tout le style, il est maintenant temps d'écrire quelques fonctionnalités dans le code Jquery. Le code Jquery ressemblera à ceci (script.js dans notre cas)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

Et n'oubliez pas d'inclure vos fichiers JS et CSS dans votre fichier theme_name.libraries.yml.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

Videz maintenant le cache du site pour voir le résultat. Votre résultat final devrait ressembler à ceci :