0Pricing
CSS Academy · Lezione

Proprietà color-scheme

Utilizzi la proprietà color-scheme per indicare al browser quali temi supporta un elemento.

Proprietà color-scheme è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Che cos'è color-scheme?

La proprietà color-scheme comunica al browser quali schemi di colori supporta un elemento o la pagina. Il browser utilizza quindi queste informazioni per applicare lo stile ai propri elementi dell'interfaccia, come barre di scorrimento, controlli dei moduli, caselle di controllo e bordi degli input, in modo che corrispondano allo schema richiesto.

Valori di color-scheme

Valori accettati:

  • normal: l'elemento utilizza il valore predefinito del documento
  • light: l'elemento supporta solo lo schema chiaro
  • dark: l'elemento supporta solo lo schema scuro
  • light dark: supporta entrambi; il browser sceglie in base alla preferenza
  • dark light: preferisce lo schema scuro e usa quello chiaro come fallback

Elementi dell'interfaccia del browser

Il browser applica automaticamente lo stile a questi elementi in base a color-scheme:

  • Barre di scorrimento
  • Campi di input, textarea e menu a discesa select
  • Caselle di controllo e pulsanti di opzione
  • Slider per intervalli
  • Selettori di data e ora

Impostazione sull'elemento html

Impostare color-scheme sull'elemento radice modifica il rendering dell'intera interfaccia di sistema della pagina:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Equivalente del meta tag

È anche possibile dichiarare color-scheme in HTML tramite un meta tag, per applicarlo prima, ovvero prima del caricamento del CSS:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Modalità scura senza colori personalizzati

Una modalità scura minimale: impostare color-scheme: dark e lasciare che il browser gestisca automaticamente gli elementi dei moduli e le barre di scorrimento:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

Combinazione con prefers-color-scheme

Utilizzare prefers-color-scheme per rilevare la preferenza e impostare insieme sia i token personalizzati sia la proprietà color-scheme:

<div class="demo">Themed via variables + color-scheme</div>

color-scheme con ambito

Applicare color-scheme a elementi specifici per creare isole chiare isolate all'interno di una pagina scura:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Colori forzati / Contrasto elevato di Windows

La media query forced-colors rileva la modalità Contrasto elevato di Windows. Utilizzare insieme color-scheme e forced-colors per un supporto completo all'accessibilità.

<div class="card">Card respects forced-colors mode</div>

Parole chiave system-color

Quando forced-colors è attivo, utilizzare le parole chiave dei colori di sistema CSS, che vengono associate alla tavolozza di colori accessibile dell'utente:

<button>System-styled button</button>

Verifica rapida

Quale comportamento CSS abilita l'impostazione di color-scheme: dark sull'elemento html?

Riepilogo

color-scheme indica al browser come applicare lo stile ai propri controlli dell'interfaccia per un elemento o una pagina. Utilizzare globalmente color-scheme: light dark per abilitare l'adattamento automatico dell'interfaccia nativa. Combinare questa proprietà con le proprietà personalizzate CSS per un'implementazione completa della modalità scura. Utilizzare il meta tag per applicare lo schema prima del caricamento del CSS.

Domande Frequenti

La lezione «Proprietà color-scheme» è gratuita?

Sì — il testo completo di «Proprietà color-scheme» è 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 «Proprietà color-scheme»?

Utilizzi la proprietà color-scheme per indicare al browser quali temi supporta un elemento. 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 3 di 4.

Quanto tempo richiede la lezione «Proprietà color-scheme»?

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

  1. Media query prefers-color-scheme
  2. Variabili CSS per i temi
  3. Proprietà color-scheme
  4. Attivazione automatica e manuale della modalità scura
← Torna a CSS Academy