Chrome 76 aggiunto il supporto per la preferisce-colore-schema di CSS media query, che consente ai siti web di chiedere al tuo sistema operativo quale combinazione di colori preferite in modo che possa tema stessi in modo appropriato. Ecco come deve essere impostato per il tuo sito.
Quali Sono I Browser Supportano I Temi Scuri?
Come la scrittura, la maggior parte dei principali browser supportano la modalità buio, anche se alcuni browser non sono stati aggiornati per il supporto di sicurezza. È possibile controllare lo stato corrente su caniuse.com che genera un tavolo di supporto per browser:
Come di consueto, IE 11 non riceve gli aggiornamenti, e il 2% di Internet ancora bloccato su di esso non sarà in grado di fare uso di esso. Ma, queste persone probabilmente non su Windows 10, in modo da non vedere qualsiasi uso in ogni modo, senza un tema scuro per passare.
Fortunatamente, utilizzando preferisce-colore-regime di non rompere il vostro CSS, in quanto è un parametro opzionale.
Come Usare i CSS Schema di Colore di Sostegno
Per utilizzare effettivamente preferisce-colori nel vostro CSS, devi utilizzare come opzionale, media query, allo stesso modo si farebbe per il responsive design. Per esempio, se il valore di default è a sfondo bianco con testo nero, è possibile utilizzare le media query per cambiare sfondo nero e testo bianco.
body {
background-color: #fff;
color:#000;
}
@media (preferisce-colori: scuro) {
background-color: #000;
color:#fff;
}
È possibile combinare questo con qualsiasi altra tecnica che si sta usando, per esempio, è possibile consentire solo la modalità buio su dispositivi mobili se combinato con un sistema reattivo media query per la dimensione dello schermo.
Impostare un Tema Scuro con i CSS Variabili
CSS Variabili sono abbastanza nuova aggiunta con un ampio sostegno. Sono forse il modo più semplice per fare un tema scuro accanto preferisce-colori. Invece di definire i valori di colore manualmente, in questo modo:
body {
background-color: #fff;
}
p {
color: #000;
}
Invece di creare un :blocco principale che si applica ovunque. È possibile definire le variabili qui utilizzando il doppio trattino (–) seguito dal nome della variabile. Quindi, ogni volta che è necessario definire un valore, utilizzare il nome della variabile all’interno del var() invece la funzione:
:root {
–primario: #000;
–background: #fff;
}
body {
background-color: var(–sfondo);
}
p {
colore: var(–primaria);
}
Questo metodo ha il beneficio di essere in grado di modificare le variabili e avere cambiamenti riflettono ovunque. Appena sotto l’ :blocco principale, consente di aggiungere altro all’interno della preferisce-colore-schema di media query:
:root {
–primario: #000;
–background: #fff;
}
@media (preferisce-colori: scuro) {
:root {
–primario: #ddd;
–background: #222
}
}
body {
background-color: var(–sfondo);
}
p {
colore: var(–primaria);
}
In questo modo si azzera le variabili a valori scuri se il browser rileva che l’utente preferisce un oscuro regime. È possibile gestire questi due tavolozze di colori e di regolare facilmente di loro, solo modificando le variabili.
Inoltre, se avete bisogno di ulteriori CSS del tema scuro, si può mettere che in un altro preferisce-colore-schema di domanda, si sarebbe probabilmente desidera luogo che uno di seguito il resto del CSS quindi ha la precedenza, o utilizzare il !importante bandiera.
Fallback Per IE 11
IE 11 non supporta questa (ovviamente). Se si desidera fornire IE 11 di supporto, è possibile utilizzare il vecchio metodo del raddoppio di vostra proprietà:
p {
color: #000;
colore: var(–primaria);
}
In questo modo, ossia 11 sarà solo la prima, e di vedere l’altro come non valido CSS. I temi scuri non funziona, ma non avrebbe, comunque, dato che non c’è il supporto per le media query.
Inoltre, se non vuoi usare i CSS variabili, è possibile solo completamente il restyling del tuo sito all’interno della preferisce-colore-schema di query, ma goffo e sprechi di spazio. Se è necessario il supporto di tutti i browser esistenti, utilizzare il doppio di proprietà di ripiego, invece.