Tema scuro con CSS

Negli ultimi anni, la modalità scura è diventata parte integrante del design web moderno. Non solo riduce l'affaticamento degli occhi quando si lavora in condizioni di scarsa illuminazione, ma risparmia anche la batteria sui dispositivi con display OLED. Implementare un tema scuro su un sito web utilizzando CSS è abbastanza semplice, ma è importante farlo correttamente in modo che gli utenti possano passare facilmente tra le versioni chiara e scura.

Principi Base del Lavoro con i Temi

I temi chiari e scuri sono due set di stili che possono essere applicati dinamicamente agli elementi del sito web. Idealmente, gli utenti dovrebbero avere la possibilità di scegliere quale tema utilizzare, ma si possono anche considerare le preferenze di sistema del sistema operativo.

Ci sono due modi principali per implementare un tema scuro:

Utilizzo di variabili CSS e cambio degli stili tramite JavaScript
Applicazione automatica del tema basata sulle impostazioni di sistema utilizzando prefers-color-scheme

Entrambi gli approcci possono essere combinati per rendere la gestione dei temi più flessibile.

Utilizzo delle Variabili CSS per i Temi

Uno dei modi più convenienti per implementare un tema scuro è utilizzare le variabili CSS (custom properties). Questo facilita la gestione dei colori e di altri parametri di stile.

Prima, creiamo variabili root in :root che verranno utilizzate in tutto il documento:

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}

Poi, applichiamo queste variabili agli elementi della pagina:

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

Ora, basta aggiungere la classe .dark-theme a <html> o <body> per cambiare i colori.

Cambio dei Temi con JavaScript

Per permettere agli utenti di passare tra i temi chiaro e scuro, puoi utilizzare JavaScript:

const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');

    // Salvare la scelta dell'utente in localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Controllare le impostazioni salvate quando la pagina si carica
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}

In questo modo, la scelta dell'utente viene conservata dopo il ricaricamento della pagina.

Rilevamento Automatico del Tema di Sistema

Se vuoi rispettare le impostazioni di sistema dell'utente, puoi utilizzare prefers-color-scheme. Questa media query applica automaticamente il tema appropriato:

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}

Questo metodo è conveniente perché adatta immediatamente il sito web alle preferenze di sistema. Tuttavia, se l'utente desidera selezionare manualmente un tema, dovrai combinare questo approccio con JavaScript.

Combinazione di Rilevamento Automatico e Selezione Manuale

Per tenere conto di entrambi i metodi, puoi prima controllare se c'è una scelta del tema salvata in localStorage. Se non c'è, applica le impostazioni di sistema:

const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}

Creazione di un Interruttore Facile da Usare

Ora, aggiungiamo un pulsante per il cambio del tema in HTML:

<button id="theme-toggle">Cambia Tema</button>

Il pulsante permette all'utente di cambiare manualmente il tema, e la logica per salvare la scelta rende l'interazione conveniente.

Miglioramento delle Animazioni di Transizione

Per rendere il cambio del tema fluido, puoi aggiungere un'animazione:

* {
    transition: background-color 0.3s, color 0.3s;
}

Questo crea un effetto di oscuramento o illuminazione graduale quando si cambia tema.

Esempio di Cambio Tema Chiaro e Scuro

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esempio di Tema Chiaro e Scuro</title>
    <style>
        /* Stili di base e variabili CSS */
        :root {
            --bg-color: #ffffff;
            --text-color: #000000;
        }

        .dark-theme {
            --bg-color: #121212;
            --text-color: #ffffff;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            transition: background-color 0.3s, color 0.3s;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: var(--text-color);
            color: var(--bg-color);
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Animazione per transizioni fluide */
        * {
            transition: background-color 0.3s, color 0.3s;
        }

        /* Rilevamento automatico del tema di sistema */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #121212;
                --text-color: #ffffff;
            }
        }
    </style>
</head>
<body>
    <h1>Esempio di Tema Chiaro e Scuro</h1>
    <p>Questo è un esempio di implementazione di temi chiari e scuri usando CSS, JavaScript e localStorage.</p>
    <button id="theme-toggle">Cambia Tema</button>

    <script>
        // Logica di cambio tema
        const toggleThemeBtn = document.getElementById('theme-toggle');

        // Controllare le impostazioni salvate al caricamento della pagina
        const userTheme = localStorage.getItem('theme');
        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

        if (userTheme) {
            document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
        } else {
            document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
        }

        // Cambiare tema al click
        toggleThemeBtn.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark-theme');

            // Salvare la scelta dell'utente in localStorage
            if (document.documentElement.classList.contains('dark-theme')) {
                localStorage.setItem('theme', 'dark');
            } else {
                localStorage.setItem('theme', 'light');
            }
        });
    </script>
</body>
</html>

Conclusione

Implementare un tema scuro su un sito web utilizzando CSS e JavaScript è un compito relativamente semplice ma importante. L'uso di variabili CSS rende il codice pratico e scalabile, mentre la combinazione di prefers-color-scheme e localStorage offre agli utenti flessibilità nelle loro scelte. Come risultato, il sito web sarà adattabile e comodo da usare in qualsiasi condizione di illuminazione.

Articoli CSS Correlati

Template:Encyclopedia CSS/Navigation Template:Navigation/CSS