Visualizza wikitesto di 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 <code>prefers-color-scheme</code>

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 (<code>custom properties</code>). Questo facilita la gestione dei colori e di altri parametri di stile.

Prima, creiamo variabili root in <code>:root</code> che verranno utilizzate in tutto il documento:
<syntaxhighlight lang="css" copy>
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}
</syntaxhighlight>
Poi, applichiamo queste variabili agli elementi della pagina:
<syntaxhighlight lang="css" copy>
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Ora, basta aggiungere la classe <code>.dark-theme</code> a <code><html></code> o <code><body></code> per cambiare i colori.

== Cambio dei Temi con JavaScript ==
Per permettere agli utenti di passare tra i temi chiaro e scuro, puoi utilizzare JavaScript:
<syntaxhighlight lang="javascript" copy>
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');
}
</syntaxhighlight>
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 <code>prefers-color-scheme</code>. Questa media query applica automaticamente il tema appropriato:
<syntaxhighlight lang="css" copy>
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}
</syntaxhighlight>
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 <code>localStorage</code>. Se non c'è, applica le impostazioni di sistema:
<syntaxhighlight lang="javascript" copy>
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');
}
</syntaxhighlight>

== Creazione di un Interruttore Facile da Usare ==
Ora, aggiungiamo un pulsante per il cambio del tema in HTML:
<syntaxhighlight lang="html" copy>
<button id="theme-toggle">Cambia Tema</button>
</syntaxhighlight>
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:
<syntaxhighlight lang="css" copy>
* {
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Questo crea un effetto di oscuramento o illuminazione graduale quando si cambia tema.

== Esempio di Cambio Tema Chiaro e Scuro ==
<syntaxhighlight lang="html" copy>
<!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>
</syntaxhighlight>

== 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 <code>prefers-color-scheme</code> e <code>localStorage</code> 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==
{{Encyclopedia CSS/Navigation|state=collapsed}}
{{Navigation/CSS|state=collapsed}}
[[Category:CSS]]
[[wj-ru:Темная тема с использованием CSS]]
[[wj-de:Dunkles Design mit CSS]]
[[wj-fr:Thème sombre avec CSS]]
[[wj-es:Tema oscuro usando CSS]]
[[wj-en:Dark Theme using CSS]]