So wechseln Sie in Drupal 8 (oder 9) je nach Benutzerpräferenz zwischen Dunkel- und Hellmodus

Wie großartig wäre es, Ihren Benutzern die Freiheit zu geben, ihre Benutzeroberfläche nach ihren Wünschen anzupassen? Während viele Benutzer eine helle Oberfläche bevorzugen (heller Hintergrund mit dunklem Text), wählen einige Benutzer eine dunkle Oberfläche (dunkler Hintergrund mit hellem Text). Dunklere Oberflächen werden als cool und trendy empfunden, einige glauben auch, dass sie die Augen entlasten, insbesondere für Entwickler, die viel Zeit vor dem Bildschirm verbringen. Ich glaube, dass die Bereitstellung einer Option für Ihre Benutzer ein enormer Gewinn in Bezug auf Zugänglichkeit und Benutzererfahrung ist. Es gibt ein paar Möglichkeiten, mit denen man dies erreichen kann. In diesem Artikel werden wir diskutieren, wie man zwischen dunklen/hellen Webdesign-Modi umschaltet und dies in Drupal 8 oder Drupal 9 implementiert.

Wir werden uns auf zwei Methoden konzentrieren, um dies zu implementieren -
1. Nur CSS verwenden.
2. Implementierung des CSS- und JS-Kippschalters

Nur CSS verwenden

Um den Dark-Modus auf einer Website nur mit CSS zu erreichen, müssen Sie einige der Systemanforderungen beachten. Eine solche wichtige Voraussetzung ist der systemweite Dunkelmodus . Wenn ein Benutzer den Dark Mode auf seinem PC bevorzugt, wird dem Benutzer eine Website serviert, die einen dunklen Hintergrund mit hellem Text zeigt. Das bevorzugte Farbschema (Medienabfrage) wird verwendet, um festzustellen, ob der Benutzer das System aufgefordert hat, ein helles oder dunkles Farbschema zu verwenden.

Implementierung:

1. Deklarieren Sie die CSS-Variablen.
2. Verwenden Sie die Variablen, wo immer es erforderlich ist.

Das Ergebnis:

Hinweis: Um das Ergebnis auf einigen nicht unterstützten Geräten zu emulieren, geben Sie einfach DevTool ein, indem Sie F12 drücken. Drücken Sie als nächstes STRG+UMSCHALT+P, suchen Sie dann nach Preferred-Color-Schema: dark und drücken Sie die Eingabetaste.

Implementieren des CSS- und JS-Kippschalters

Wenn wir diesen Ansatz verfolgen, brauchen wir uns nicht um die Systemanforderungen zu kümmern. Schreiben Sie einfach ein paar Zeilen CSS und JS und Sie sollten bereit sein. Nachdem wir die Variablen initialisiert haben, können wir diese Variablen in unseren Stylesheets referenzieren. Dies ist die HTML-Struktur zum Umschalten zwischen dunklem und hellem Modus.

Und einige CSS-Zeilen sollten zu diesem Schalter führen.

Der letzte Teil besteht darin, ein wenig JavaScript hinzuzufügen, um alles zusammenzufügen.
● Speichern Sie die Benutzereinstellungen für zukünftige Besuche
● Überprüfen Sie beim Laden der Website, ob gespeicherte Benutzereinstellungen vorhanden sind

Das ist es! Sehen Sie sich unten die vollständige Demo an.

Oder klicken Sie hier, um die Demo anzuzeigen.

Implementieren der Dunkel-/Hell-Umschaltung in Drupal 8 (oder Drupal 9)

Um mit der Erstellung eines benutzerdefinierten Drupal 8-Themes zu beginnen, lesen Sie bitte den tollen Artikel hier. Beginnen wir nun mit der Erstellung eines Themas, um zu zeigen, wie man dunkles Thema/ helles Thema in Drupal 8 oder Drupal 9 verwendet.

Die Dateistruktur sieht wie folgt aus:

Aktualisieren Sie nun den Header-Abschnitt in page.html.twig mit dem folgenden Code.

 <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>

Der Rest der HTML-Struktur hängt von Ihrem Design oder Ihren Anforderungen ab.
Sobald Sie mit der HTML-Struktur fertig sind, ist es an der Zeit, sie schön aussehen zu lassen, indem Sie die Elemente in CSS stylen.
Zuerst müssen Sie alle Standardvariablen erstellen, die für die Farben im Hell-/Dunkelmodus verantwortlich sind.

 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; }

Nachdem Sie die Variablen definiert haben, ist es an der Zeit, dem Header-Abschnitt einen Stil hinzuzufügen, um das erforderliche Ergebnis zu erhalten.

 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%; }

Bitte beachten Sie, dass das Styling je nach Ihren Anforderungen variieren kann. Nach all dem Styling ist es jetzt an der Zeit, einige Funktionen in Jquery-Code zu schreiben. Der Jquery-Code sieht ungefähr so ​​​​aus (script.js in unserem Fall)

 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);

Und vergessen Sie nicht, Ihre JS- und CSS-Dateien in die Datei theme_name.libraries.yml aufzunehmen.

 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

Löschen Sie nun den Site-Cache, um das Ergebnis zu sehen. Ihr Endergebnis sollte so aussehen: