Jak przełączać się między trybem ciemnym i jasnym w Drupal 8 (lub 9) w zależności od preferencji użytkownika?

Jak wspaniale byłoby dać użytkownikom swobodę dostosowywania interfejsu zgodnie z ich preferencjami? Podczas gdy wielu użytkowników preferuje jasny interfejs (jasne tło z ciemnym tekstem), niektórzy użytkownicy wybierają ciemny interfejs (ciemne tło z jasnym tekstem). Ciemniejsze interfejsy są postrzegane jako fajne i modne, podczas gdy niektórzy uważają również, że zmniejszają zmęczenie oczu, szczególnie w przypadku programistów, którzy spędzają dużo czasu przed ekranem. Uważam, że udostępnienie opcji Twoim użytkownikom to ogromna korzyść pod względem dostępności i doświadczenia użytkownika. Można to osiągnąć na kilka sposobów. W tym artykule omówimy, jak przełączać się między ciemnymi i jasnymi trybami projektowania stron internetowych i zaimplementować to w Drupal 8 lub Drupal 9.

Skoncentrujemy się na dwóch metodach realizacji tego -
1. Korzystanie wyłącznie z CSS.
2. Implementacja przełącznika CSS i JS

Korzystanie tylko z CSS

Aby uzyskać tryb ciemny na dowolnej stronie internetowej z samym CSS, należy pamiętać o niektórych wymaganiach systemowych. Jednym z takich ważnych wymagań jest ogólnosystemowy tryb ciemny . Jeśli użytkownik woli korzystać z trybu ciemnego na swoim komputerze, otrzymuje stronę internetową, która pokazuje ciemne tło z jasnym tekstem. Schemat preferowanych kolorów (zapytanie o media) służy do określenia, czy użytkownik zażądał od systemu użycia jasnego czy ciemnego motywu kolorystycznego.

Realizacja:

1. Zadeklaruj zmienne CSS.
2. Używaj zmiennych tam, gdzie jest to konieczne.

Wynik:

Uwaga: Aby emulować wynik na niektórych nieobsługiwanych urządzeniach, po prostu wejdź do DevTool, naciskając F12. Następnie naciśnij CTRL+SHIFT+P, a następnie wyszukaj prefers-color-scheme: dark i naciśnij enter.

Implementacja przełącznika CSS i JS

Jeśli idziemy z takim podejściem, nie musimy przejmować się wymaganiami systemowymi. Po prostu napisz kilka linijek CSS i JS i powinieneś być gotowy. Po zainicjowaniu zmiennych możemy odwoływać się do tych zmiennych w naszych arkuszach stylów. Będzie to struktura HTML do przełączania między trybem ciemnym i jasnym.

A niektóre wiersze CSS powinny skutkować tą zmianą.

Ostatnią częścią jest dodanie trochę JavaScriptu, aby to wszystko powiązać.
● Przechowuj preferencje użytkownika dla przyszłych wizyt
● Sprawdź zapisane preferencje użytkownika, jeśli takie istnieją, podczas ładowania strony

Otóż ​​to! Sprawdź pełne demo poniżej.

Lub kliknij tutaj, aby zobaczyć demo.

Implementacja przełącznika Dark / Light w Drupal 8 (lub Drupal 9)

Aby rozpocząć tworzenie niestandardowego motywu Drupal 8, zapoznaj się z niesamowitym artykułem tutaj. Zacznijmy teraz tworzyć motyw, aby pokazać, jak używać ciemnego/jasnego motywu w Drupalu 8 lub Drupalu 9.

Struktura pliku będzie wyglądać tak:

Teraz zaktualizuj sekcję nagłówka wewnątrz page.html.twig za pomocą następującego kodu.

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

Pozostała część struktury HTML będzie zależeć od twojego projektu lub wymagań.
Kiedy skończysz ze strukturą HTML, nadszedł czas, aby wyglądały ładnie, stylizując elementy w CSS.
Najpierw musisz stworzyć wszystkie domyślne zmienne, które będą odpowiedzialne za kolory w trybie Jasny/Ciemny.

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

Teraz, gdy skończyłeś definiować zmienne, nadszedł czas, aby dodać styl do sekcji nagłówka, aby uzyskać wymagany wynik.

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

Należy pamiętać, że stylizacja może się różnić w zależności od Twoich wymagań. Po wszystkich stylizacjach nadszedł czas na napisanie funkcjonalności w kodzie Jquery. Kod Jquery będzie wyglądał mniej więcej tak (w naszym przypadku script.js)

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

I nie zapomnij dołączyć plików JS i CSS do pliku nazwa_motywu.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

Teraz wyczyść pamięć podręczną witryny, aby zobaczyć wynik. Twój wynik końcowy powinien wyglądać tak: