Come alternare tra modalità scura e chiara in Drupal 8 (o 9) in base alle preferenze dell'utente

Quanto sarebbe fantastico dare ai tuoi utenti la libertà di personalizzare la loro interfaccia secondo le loro preferenze? Mentre molti utenti preferiscono un'interfaccia chiara (sfondo chiaro con testo scuro), alcuni utenti scelgono un'interfaccia scura (sfondo scuro con testo chiaro). Le interfacce più scure sono percepite come fresche e alla moda, mentre alcuni credono anche che riduca l'affaticamento degli occhi, specialmente per gli sviluppatori che trascorrono molto tempo davanti allo schermo. Ritengo che fornire un'opzione ai tuoi utenti sia un'enorme vittoria in termini di accessibilità ed esperienza utente. Ci sono un paio di modi con cui si può realizzare questo. In questo articolo, discuteremo su come alternare le modalità di progettazione web dark/light e implementarlo in Drupal 8 o Drupal 9.

Ci concentreremo su due metodi per implementarlo:
1. Utilizzando solo CSS.
2. Implementazione dell'interruttore a levetta CSS e JS

Usare solo CSS

Per ottenere la modalità Dark su qualsiasi sito Web solo con CSS, è necessario tenere a mente alcuni requisiti di sistema. Uno di questi requisiti importanti è la modalità oscura a livello di sistema . Se un utente preferisce utilizzare la modalità scura sul suo PC, l'utente viene servito con un sito Web che mostra uno sfondo di colore scuro con testo chiaro su di esso. Lo schema colore preferito (media query) viene utilizzato per identificare se l'utente ha richiesto al sistema di utilizzare un tema di colore chiaro o scuro.

Implementazione:

1. Dichiarare le variabili CSS.
2. Utilizzare le variabili ovunque sia necessario.

Il risultato:

Nota: per emulare il risultato su alcuni dispositivi non supportati, basta accedere a DevTool premendo F12. Quindi, premi CTRL + MAIUSC + P, quindi cerca prefers-color-scheme: dark e premi invio.

Implementazione dell'interruttore a levetta CSS e JS

Se seguiamo questo approccio, non dobbiamo preoccuparci dei requisiti di sistema. Basta scrivere un paio di righe di CSS e JS e dovresti essere pronto. Una volta inizializzate le variabili, possiamo fare riferimento a queste variabili nei nostri fogli di stile. Questa sarà la struttura HTML per alternare tra la modalità scura e quella chiara.

E alcune righe di CSS dovrebbero portare a questo passaggio.

La parte finale consiste nell'aggiungere un po' di JavaScript per legare tutto insieme.
● Memorizzare le preferenze dell'utente per le visite future
● Controlla le preferenze dell'utente salvate, se presenti, al caricamento del sito web

Questo è tutto! Dai un'occhiata alla demo completa qui sotto.

Oppure clicca qui per vedere la demo.

Implementazione dell'interruttore Buio/Luce in Drupal 8 (o Drupal 9)

Per iniziare con la creazione di un tema Drupal 8 personalizzato, fai riferimento al fantastico articolo qui. Iniziamo ora a creare un tema per mostrare come utilizzare il tema scuro/tema chiaro in Drupal 8 o Drupal 9.

La struttura del file sarà simile a questa:

Ora aggiorna la sezione dell'intestazione all'interno di page.html.twig con il seguente codice.

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

Il resto della struttura HTML dipenderà dal tuo design o dai tuoi requisiti.
Una volta che hai finito con la struttura HTML, è il momento di renderli belli stilizzando gli elementi in CSS.
Innanzitutto, devi creare tutte le variabili predefinite che saranno responsabili dei colori in modalità Chiaro/Scuro.

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

Ora che hai finito di definire le variabili, è il momento di aggiungere lo stile alla sezione Intestazione per ottenere il risultato richiesto.

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

Si prega di notare che lo stile può variare in base alle proprie esigenze. Dopo tutto lo stile, ora è il momento di scrivere alcune funzionalità nel codice Jquery. Il codice Jquery sarà simile a questo (script.js nel nostro caso)

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

E non dimenticare di includere i tuoi file JS e CSS all'interno del tuo file 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

Ora svuota la cache del sito per vedere il risultato. Il tuo risultato finale dovrebbe essere simile a questo: