M

MLOG

Italiano

Implementa la modalità scura sul tuo sito web con questa guida completa. Scopri le media query CSS, gli interruttori JavaScript, le considerazioni sull'accessibilità e le best practice.

Implementazione della Modalità Scura: Una Guida Completa con CSS e JavaScript

La modalità scura è diventata sempre più popolare, offrendo un'esperienza di visualizzazione più confortevole, specialmente in ambienti con scarsa illuminazione. Questa guida fornisce una panoramica completa su come implementare la modalità scura sul tuo sito web utilizzando CSS e JavaScript, garantendo un'esperienza utente fluida e accessibile per un pubblico globale.

Perché Implementare la Modalità Scura?

Ci sono diverse ragioni convincenti per considerare l'implementazione della modalità scura:

Metodi per Implementare la Modalità Scura

Esistono diversi approcci per implementare la modalità scura, ognuno con i propri vantaggi e svantaggi. Esploreremo i metodi più comuni:

1. Implementazione della Modalità Scura con CSS Media Queries

La CSS media query prefers-color-scheme ti consente di rilevare lo schema di colori preferito dell'utente e applicare stili diversi di conseguenza. Questo è il modo più semplice ed efficiente per implementare la modalità scura per gli utenti che hanno già impostato le proprie preferenze di sistema.

Esempio di Codice

Aggiungi il seguente CSS al tuo foglio di stile:

/* Tema Predefinito (Chiaro) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Scuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Regola altri elementi secondo necessità */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Spiegazione:

Vantaggi

Svantaggi

2. Implementazione della Modalità Scura con un Interruttore JavaScript

L'utilizzo di un interruttore JavaScript offre agli utenti un interruttore manuale per controllare il tema del sito web. Ciò offre agli utenti un maggiore controllo e consente loro di sovrascrivere le proprie preferenze di sistema. Questo approccio è fondamentale per rivolgersi agli utenti su vari dispositivi e piattaforme che potrebbero non supportare o esporre in modo coerente le impostazioni della modalità scura a livello di sistema.

Struttura HTML

Innanzitutto, aggiungi un elemento interruttore al tuo HTML:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Questo crea un semplice interruttore a levetta utilizzando una casella di controllo e alcuni stili CSS personalizzati.

Stile CSS (Opzionale)

Puoi dare uno stile all'interruttore a levetta usando CSS. Ecco un esempio:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Cursori arrotondati */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Codice JavaScript

Ora, aggiungi il seguente codice JavaScript per gestire la funzionalità dell'interruttore:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funzione per attivare/disattivare la modalità scura
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Memorizza la preferenza dell'utente in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Controlla localStorage per la preferenza salvata
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Aggiungi un listener di eventi all'interruttore
darkModeToggle.addEventListener('change', toggleDarkMode);

Spiegazione:

Stili CSS per la Modalità Scura (utilizzando la classe)

Aggiorna il tuo CSS per utilizzare la classe dark-mode per applicare gli stili del tema scuro:

/* Tema Predefinito (Chiaro) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Scuro */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Vantaggi

Svantaggi

3. Combinazione di Media Queries e JavaScript

L'approccio migliore è spesso quello di combinare le CSS media queries e un interruttore JavaScript. Ciò offre il meglio di entrambi i mondi: il rilevamento automatico dello schema di colori preferito dell'utente, consentendo al contempo agli utenti di sovrascrivere manualmente la preferenza di sistema. Ciò si rivolge a un pubblico più ampio, compresi coloro che potrebbero non essere a conoscenza o in grado di modificare le impostazioni del tema a livello di sistema.

Esempio di Codice

Utilizza lo stesso HTML e CSS dell'esempio dell'interruttore JavaScript. Modifica JavaScript per controllare la preferenza di sistema:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funzione per attivare/disattivare la modalità scura
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Memorizza la preferenza dell'utente in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Controlla localStorage per la preferenza salvata, quindi la preferenza di sistema
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Aggiungi un listener di eventi all'interruttore
darkModeToggle.addEventListener('change', toggleDarkMode);

Spiegazione:

Vantaggi

Svantaggi

Considerazioni sull'Accessibilità

Quando si implementa la modalità scura, è fondamentale considerare l'accessibilità per garantire che il tuo sito web rimanga utilizzabile per tutti gli utenti. Ricorda che la semplice inversione dei colori non garantisce automaticamente l'accessibilità. Ecco alcune considerazioni chiave:

Best Practice per l'Implementazione della Modalità Scura

Ecco alcune best practice da seguire quando implementi la modalità scura sul tuo sito web:

Esempio: Variabili CSS per il Tematizzazione

Le variabili CSS semplificano il passaggio tra temi chiari e scuri. Definisci le variabili nella pseudo-classe :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Ora, quando la classe dark-mode viene aggiunta al body, le variabili CSS vengono aggiornate e gli stili vengono applicati automaticamente.

Conclusione

L'implementazione della modalità scura può migliorare significativamente l'esperienza utente del tuo sito web, migliorare l'accessibilità e persino risparmiare la durata della batteria. Seguendo le tecniche e le best practice delineate in questa guida, puoi creare un'esperienza di modalità scura fluida e piacevole per i tuoi utenti in tutto il mondo.

Ricorda di dare priorità all'accessibilità e di testare accuratamente l'implementazione per garantire che il tuo sito web rimanga utilizzabile per tutti gli utenti, indipendentemente dalle loro preferenze o capacità visive.

Implementando attentamente la modalità scura, non stai solo seguendo una tendenza, ma anche creando un'esperienza web più inclusiva e intuitiva per un pubblico globale. Questa dedizione all'esperienza utente può giovare notevolmente alle prestazioni e all'attrattiva complessive del tuo sito web.