Cum să comutați între modul întunecat și luminos în Drupal 8 (sau 9) în funcție de preferințele utilizatorului

Cât de minunat ar fi să le oferi utilizatorilor libertatea de a-și personaliza interfața după preferințele lor? În timp ce mulți utilizatori preferă o interfață deschisă (fundal deschis cu text întunecat), unii utilizatori aleg o interfață întunecată (fundal întunecat cu text deschis). Interfețele mai întunecate sunt percepute ca cool și la modă, în timp ce unii cred, de asemenea, că reduce tensiunea asupra ochilor, în special pentru dezvoltatorii care petrec mult timp în fața ecranului. Consider că oferirea unei opțiuni utilizatorilor dvs. este un câștig extraordinar în ceea ce privește accesibilitatea și experiența utilizatorului. Există câteva moduri prin care cineva poate realiza acest lucru. În acest articol, vom discuta despre cum să comutăm între modurile de design web întunecat/luminos și să implementăm acest lucru în Drupal 8 sau Drupal 9.

Ne vom concentra pe două metode pentru a implementa acest lucru -
1. Folosind numai CSS.
2. Implementarea comutatorului CSS și JS

Folosind doar CSS

Pentru a obține modul întunecat pe orice site web cu doar CSS, trebuie să aveți în vedere unele dintre cerințele de sistem. O astfel de cerință importantă este modul întunecat la nivelul întregului sistem . Dacă un utilizator preferă să folosească modul întunecat pe computerul său, atunci utilizatorul este servit cu un site web care arată un fundal de culoare închisă cu text deschis pe el. Schema prefers-color-scheme (interogare media) este utilizată pentru a identifica dacă utilizatorul a solicitat sistemului să folosească o temă de culoare deschisă sau închisă.

Implementare:

1. Declarați variabilele CSS.
2. Folosiți variabilele oriunde este necesar.

Rezultatul:

Notă: Pentru a emula rezultatul pe unele dispozitive neacceptate, trebuie doar să intrați în DevTool apăsând F12. Apoi, apăsați CTRL+SHIFT+P, apoi căutați prefers-color-scheme: dark și apăsați Enter.

Implementarea comutatorului CSS și JS

Dacă mergem cu această abordare, atunci nu trebuie să ne deranjam cu privire la cerințele de sistem. Doar scrieți câteva rânduri de CSS și JS și ar trebui să fiți gata. Odată ce am inițializat variabilele, putem face referire la aceste variabile în foile noastre de stil. Aceasta va fi structura HTML pentru a comuta între modul întunecat și cel deschis.

Și unele linii de CSS ar trebui să aibă ca rezultat această schimbare.

Partea finală este să adăugați un pic de JavaScript pentru a lega totul împreună.
● Stocați preferințele utilizatorului pentru vizite viitoare
● Verificați dacă există preferințe salvate de utilizator, dacă există, la încărcarea site-ului web

Asta e! Consultați demo-ul complet de mai jos.

Sau faceți clic aici pentru a vizualiza demonstrația.

Implementarea comutatorului Întuneric / Lumină în Drupal 8 (sau Drupal 9)

Pentru a începe cu crearea unei teme Drupal 8 personalizate, consultați articolul minunat aici. Să începem acum să creăm o temă pentru a arăta cum să folosiți tema întunecată/tema luminoasă în Drupal 8 sau Drupal 9.

Structura fișierului va arăta astfel:

Acum, actualizați secțiunea antet din pagina.html.twig cu următorul cod.

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

Restul structurii HTML va depinde de designul sau cerințele dvs.
Odată ce ați terminat cu structura HTML, este timpul să le faceți să arate frumos prin stilizarea elementelor în CSS.
În primul rând, trebuie să creați toate variabilele implicite care vor fi responsabile pentru culorile în modul Light/ Dark.

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

Acum că ați terminat de definit variabilele, este timpul să adăugați stil la secțiunea Antet pentru a obține rezultatul necesar.

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

Vă rugăm să rețineți că stilul poate varia în funcție de cerințele dumneavoastră. După toate stilurile, acum este timpul să scriem unele funcționalități în codul Jquery. Codul Jquery va arăta cam așa (script.js în cazul nostru)

 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 nu uitați să includeți fișierele dvs. JS și CSS în fișierul 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

Acum ștergeți memoria cache a site-ului pentru a vedea rezultatul. Rezultatul final ar trebui să arate astfel: