Variabili CSS per i temi
Crei un sistema di temi basato su token utilizzando proprietà personalizzate CSS che alternano i valori chiari e scuri.
Variabili CSS per i temi è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Panoramica dell'architettura dei temi
Le proprietà personalizzate CSS sono la base della tematizzazione CSS moderna. Agiscono come un livello di token dinamico che può essere sostituito durante l'esecuzione, abilitando la modalità scura, i prodotti white-label e la personalizzazione controllata dall'utente.
Livelli dei design token
Un sistema di temi ben strutturato comprende tre livelli:
- Token primitivi: valori grezzi (
--blue-500: #3b82f6) - Token semantici: basati sul significato (
--color-primary: var(--blue-500)) - Token dei componenti: specifici per il componente (
--button-bg: var(--color-primary))
Definizione del tema chiaro
Definire il tema chiaro completo su :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Override del tema scuro
Eseguire l'override dei token in un ambito scuro, tramite una media query o una classe:
<div class="demo">Adapts to dark mode automatically</div>
Uso dei token nei componenti
I componenti utilizzano token semantici, mai valori hardcoded:
<div class="card">Card using theme tokens</div>
Override basato su classi
Consentire l'override manuale con una classe su <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
Tematizzazione a livello di componente
Un componente può definire il proprio livello di token per una personalizzazione più approfondita:
<div class="card">Component-level theming</div>
Tematizzazione white-label
Le variabili CSS consentono di creare prodotti white-label, in cui ogni cliente ottiene un tema diverso sostituendo un piccolo set di token del brand:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
Transizioni nei cambi di tema
È possibile ottenere transizioni fluide del tema applicando una transizione CSS alle proprietà relative ai colori:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
Documentazione dei token
È importante documentare i design token, in modo che tutti gli sviluppatori sappiano quali variabili utilizzare. Un componente di style guide, come Storybook, che mostri tutti i token con i relativi valori per i temi chiaro e scuro è prezioso per i team numerosi.
Strumenti per i token: Style Dictionary
Style Dictionary, sviluppato da Amazon, trasforma automaticamente i design token definiti in JSON in proprietà personalizzate CSS, costanti JavaScript e altri formati per piattaforma, mantenendo sincronizzati i token tra design e codice.
Verifica rapida
In un'architettura dei token a due livelli, quale tipo di token dovrebbe utilizzare un componente .button per il colore di sfondo?
Riepilogo
Le variabili CSS consentono di creare sistemi di tematizzazione solidi. Costruire tre livelli: token primitivi, token semantici e token dei componenti. Definire i temi come override dei token su :root, tramite una media query o un selettore di attributo. Utilizzare token semantici nei componenti per ereditare automaticamente il tema. Strumenti come Style Dictionary automatizzano la distribuzione dei token tra le diverse piattaforme.
Domande Frequenti
La lezione «Variabili CSS per i temi» è gratuita?
Sì — il testo completo di «Variabili CSS per i temi» è 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Variabili CSS per i temi»?
Crei un sistema di temi basato su token utilizzando proprietà personalizzate CSS che alternano i valori chiari e scuri. Eserciti 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. 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 2 di 4.
Quanto tempo richiede la lezione «Variabili CSS per i temi»?
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 CSS Academy?
Sì. Ogni lezione 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
- Media query prefers-color-scheme
- Variabili CSS per i temi
- Proprietà color-scheme
- Attivazione automatica e manuale della modalità scura