Strategie per la modalità scura
Confronti la strategia media (prefers-color-scheme) con la strategia class (attivazione di una classe dark su html) e scopra quando usare ciascuna.
Strategie per la modalità scura è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Perché la modalità scura è importante
La modalità scura è diventata una funzionalità fondamentale che ci si aspetta dalle moderne app web. Gli utenti la preferiscono perché riduce l'affaticamento degli occhi negli ambienti con poca luce e può prolungare la durata della batteria sugli schermi OLED. Tailwind CSS rende semplice implementare la modalità scura grazie alla variante dark integrata. Prima di scrivere anche una sola classe, è necessario scegliere tra due strategie: la strategia media e la strategia class.
La strategia media spiegata
La strategia media si basa sulla media query CSS prefers-color-scheme del browser. Quando l'utente imposta la modalità scura nel sistema operativo, Tailwind attiva automaticamente tutte le utility con prefisso dark:. Non è necessario alcun JavaScript: il browser gestisce tutto. È l'approccio più semplice, ma non offre un comando per attivare o disattivare la modalità direttamente nell'app.
/* Tailwind uses this media query under the hood */
@media (prefers-color-scheme: dark) {
/* dark: utilities are applied here */
}Abilitare la strategia media nella configurazione
In Tailwind v3, la strategia media non è quella predefinita. È necessario configurarla esplicitamente in tailwind.config.js impostando darkMode su 'media'. Una volta abilitata, ogni utility con prefisso dark: si attiverà automaticamente quando il sistema operativo segnala una preferenza per la modalità scura. È la soluzione ideale per i siti semplici che non necessitano di un comando manuale.
// tailwind.config.js
module.exports = {
darkMode: 'media',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};La strategia class spiegata
La strategia class consente di controllare programmaticamente la modalità scura. Invece di basarsi sulla preferenza del sistema operativo, Tailwind attiva gli stili scuri quando una classe dark è presente su un elemento antenato, generalmente il tag <html>. In questo modo gli utenti possono attivare manualmente la modalità scura nell'app, indipendentemente dalle impostazioni del sistema. La maggior parte delle app moderne preferisce questa strategia.
<!-- Light mode: no dark class -->
<html>
<body class="bg-white text-gray-900">...</body>
</html>
<!-- Dark mode: dark class applied -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 dark:text-white">...</body>
</html>Abilitare la strategia class nella configurazione
Impostate darkMode su 'class' nel file di configurazione per abilitare la strategia class. Tailwind v3 usa 'class' come impostazione predefinita comune per le app che necessitano di un tema controllato dall'utente. Con questa impostazione attiva, le varianti dark: vengono applicate solo quando l'elemento antenato contiene la classe dark, consentendo di controllare completamente quando attivare gli stili scuri.
// tailwind.config.js
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Media e class: differenze principali
La scelta tra le due strategie dipende dal caso d'uso. La strategia media è automatica e non richiede JavaScript: è perfetta per i siti statici e la documentazione. La strategia class richiede JavaScript per attivare o disattivare la classe, ma consente di impostare una preferenza nell'app che può sovrascrivere quella del sistema operativo. Consente inoltre di salvare la preferenza in localStorage.
media— gestita dal sistema operativo, senza JSclass— gestita dall'app, richiede un comando JS
La strategia selector in Tailwind v3.3+
Tailwind v3.3 ha introdotto una terza opzione: la strategia selector, con cui si passa una stringa di selettore CSS personalizzata invece di 'class'. È utile quando la modalità scura è gestita da un attributo data-theme o da una specifica classe wrapper diversa da dark. Ad esempio, impostando darkMode: ['class', '[data-theme="dark"]'], le utility scure vengono attivate quando l'attributo è presente su un qualsiasi elemento antenato.
// tailwind.config.js (v3.3+)
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
// ...
};Scrivere classi con varianti dark
Una volta configurata una strategia per la modalità scura, applicare gli stili scuri consiste semplicemente nell'aggiungere il prefisso dark: a qualsiasi utility. È possibile applicare dark: a colori, sfondi, bordi, ombre e persino agli stati hover. Tailwind genererà automaticamente i selettori CSS o le media query corretti. Definite sempre le versioni chiara e scura una accanto all'altra sullo stesso elemento.
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-6 rounded-lg shadow dark:shadow-gray-700">
<h2 class="text-xl font-bold">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Card content here.</p>
</div>Ambito della modalità scura
Con la strategia class, la classe dark può essere inserita su qualsiasi elemento antenato, non solo su <html>. Questo consente una modalità scura parziale: è possibile rendere scura una singola sezione della pagina lasciando chiaro il resto. È utile per pannelli a tema, barre laterali o componenti di anteprima che richiedono un trattamento visivo diverso da quello della pagina principale.
<div class="bg-gray-100 p-8">
<p>This section is always light.</p>
<div class="dark bg-gray-900 text-white p-4 mt-4 rounded">
<p>This inner section is always dark.</p>
</div>
</div>Combinare dark con altre varianti
Il sistema di varianti di Tailwind è componibile. È possibile combinare dark: con altre varianti come hover:, focus: e i breakpoint responsive. L'ordine dei prefissi è importante: scrivete prima i prefissi responsive, poi le varianti di stato e infine dark, ad esempio md:hover:dark:bg-gray-700. In questo modo è possibile creare stili altamente specifici e consapevoli del contesto senza CSS personalizzato.
<button class="
bg-blue-600 text-white
hover:bg-blue-700
dark:bg-blue-500
dark:hover:bg-blue-400
focus:ring-2 focus:ring-blue-300
dark:focus:ring-blue-700
px-4 py-2 rounded
">
Click Me
</button>Quando usare ogni strategia
Usate la strategia media quando il pubblico è tecnico, ad esempio per strumenti per sviluppatori o siti di documentazione, e rispettare automaticamente la preferenza del sistema operativo è sufficiente. Usate la strategia class quando sviluppate app per il pubblico generale in cui gli utenti si aspettano un comando interno per cambiare modalità. Usate la strategia selector quando il sistema di tematizzazione utilizza un attributo data-theme basato sui design token oppure quando state integrando una libreria di tematizzazione esistente che gestisce autonomamente i nomi delle classi.
Verifica rapida
Verificate la vostra comprensione delle strategie per la modalità scura di Tailwind CSS presentate in questa lezione.
Riepilogo della lezione
In questa lezione avete imparato che: la strategia media usa automaticamente la preferenza prefers-color-scheme del sistema operativo, la strategia class richiede una classe dark su un elemento antenato e consente di cambiare modalità tramite JavaScript, mentre la strategia selector permette di usare trigger personalizzati basati sugli attributi per la modalità scura. Ora vedremo come applicare la variante dark: a colori, sfondi e componenti.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Strategie per la modalità scura» è gratuita?
Sì — il testo completo di «Strategie per la modalità scura» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Strategie per la modalità scura»?
Confronti la strategia media (prefers-color-scheme) con la strategia class (attivazione di una classe dark su html) e scopra quando usare ciascuna. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Strategie per la modalità scura»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Strategie per la modalità scura
- Applicazione delle varianti dark
- Creazione di un interruttore per la modalità scura
- Modalità scura per componenti complessi