Come implementare modalità luce o scura in CSS

La specifica CSS è in continua evoluzione. Il processo per l'implementazione di nuove funzionalità in CSS è complicato, ma la versione semplificata è che il gruppo di lavoro CSS decide sui nuovi elementi da aggiungere alle specifiche. È quindi all'altezza dei browser implementare questi nuovi elementi e i browser scelgono in quale ordine di implementarli, motivo per cui ora abbiamo una mancata corrispondenza del supporto per le nuove funzionalità. Mentre questo potrebbe essere fastidioso a volte, è un modo molto migliore per farlo rispetto ai browser che implementano le specifiche complete, come abbiamo visto nei primi giorni del web. Se sei preoccupato per il tuo sito lavorando fino alla sua piena capacità, arruola il supporto di un supporto web hosting servizio.

Tutto questo sembra un troppo lavoro? Mantieni le cose semplici con a Builder del sito web .

Il gruppo di lavoro CSS è costituito da membri di tutti i principali fornitori di browser e altre società tecnologiche come Apple e Adobe. Apple, avendo recentemente lanciato la sua nuova versione di Macos, voleva un modo per rilevare la sua nuova modalità Snazzy Dark nel browser. Per fare ciò, Apple ha spinto una raccomandazione alla specifica per una nuova query del supporto di livello 5.

 @Media (preferisce-schema a colori: luce | Dark)
{...} 

Utilizzando questa query multimediale, possiamo rilevare se l'utente sta attualmente utilizzando la modalità luce o scura nel sistema operativo. Al momento questo è supportato solo da Safari Technology Anteprima 69 e oltre, ma gli altri browser non dovrebbero essere lontani.

• Una guida di Web Designer alle metodologie CSS

Per testare ciò, dovrai essere aggiornato a Mojave 10.14 (MacOS) e hanno selezionato l'aspetto oscuro nelle preferenze di sistema. Ci sono alcuni modi in cui possiamo usare questa nuova query multimediali per implementare diversi temi. Esploreremo alcuni di loro ora in questo tutorial.

01. Configurare la pagina

Per iniziare, dobbiamo creare alcuni elementi HTML per lo stile, quindi inizieremo creando una nuova penna su Codepen e aggiungendo alcuni elementi. Aggiungeremo un contenitore per i nostri contenuti, al fine di concentrarlo e alcuni titoli e testo. Imposteremo il CSS per utilizzare Sass per utilizzare la nidificazione in CSS.

 & lt; div class = "contenuto-contenitore" e GT;
& lt; h1 & gt; intestazione one & lt; / h1 & gt;
& lt; h2 & gt; intestazione due & lt; / h2 & gt;
& lt; hr & gt;
& lt; P & GT; ... & lt; / P & GT;
& lt; P & GT; ... & lt; / P & GT;
& lt; / div & gt; 

02. Elementi di base in stile

Successivamente aggiungeremo alcuni stili di base e includeremo alcuni caratteri da Google per far apparire la nostra pagina un po 'più bello. Stile tutti i nostri elementi di base, applicando nuove dimensioni dei font, colori e caratteri.

 Body {
Fammon-family: 'Merriweather', serif;
Sfondo-Colore: #EDEDED;
Colore: # 212121;
Imbottitura: 1.618Rem;
Altezza di linea: 1.618;
dimensione del carattere: 16 px;
} 

03. Contenitore di stile.

Poi stileremo il nostro contenitore per rendere il contenuto una lunghezza della linea comoda per la lettura. Aggiungeremo anche un colore di sfondo e un goccia ombra. Per centrare la casella di contenuto nella pagina, utilizzeremo la parola chiave "Auto" sui valori di sinistra e corretti delle proprietà del margine.

 .content-container {
imbottitura: 1.618rem 3.236rem;
larghezza massima: 48.54rem;
Margine: 3.236rem Auto;
Sfondo-Color: #FFFF;
Box-shadow: 0 0 12px 6px RGBA (0,0,0,005);
Border-Radius: .269666667Rem;
} 

04. Aggiungi colore evidenziato

La maggior parte dei siti web fa uso di colori da qualche parte, e al momento abbiamo solo bianchi e grigi, quindi ora sceglieno un colore di evidenziazione e creare uno stile per applicare questo colore. Applicheremo il colore utilizzando un tag Span e lo userà per evidenziare qualcosa nel nostro contenuto.

 & lt; span class = "testo - alfa" e gt; lorem ipsum & lt; / span & gt;
.Text - Alpha {
Colore: # c3423F;
} 

05. Implementare la query del supporto

Ora abbiamo una pagina con alcuni stili di base, guardiamo in modi in cui possiamo implementare la query del supporto. Comprendiamolo e iniziano ad ignorare alcuni dei nostri stili. Inizieremo con gli stili del corpo.

@media (preferisce-schema a colori: scuro)
{
corpo {
Sfondo-Color: # 111;
}
} 

06. Sostituisci gli stili rimanenti

Ora che possiamo vedere la query dei media sta funzionando e il nostro colore di sfondo del corpo è cambiato, dobbiamo sovrascrivere tutti i nostri stili rimanenti.

 .content-contenitore
{
colore bianco;
Colore di sfondo: # 212121;
}
.Text - Alpha {
Colore: # 50a8d8;
} 

07. Manutentabilità

Mentre ciò che abbiamo appena fatto funziona perfettamente bene per la nostra demo e potrebbe essere mantenuto su siti Web più piccoli, questo metodo sarebbe un incubo da gestire su un progetto più ampio, con un sacco di elementi diversi che hanno bisogno che tutti necessitino il sovrascritto. Stiamo anche facendo un uso pesante della cascata nel nostro esempio sopra, mentre un grande sistema potrebbe richiedere più specificità al fine di indirizzare tutti gli elementi.

08. Prendi un altro approccio

Quindi, in che altro modo possiamo affrontare il problema? Diamo un'occhiata ai filtri CSS. Uno dei valori che possiamo usare sui filtri CSS è "invertibile", quindi potremmo applicarci questo all'HTML e invertire tutti i colori, dandoci una "modalità scura".

 @Media (preferisce-schema a colori: Dark) {
html {
Filtro: invertito (100%);
}
} 

09. Aggiungi immagini.

Mentre il metodo del filtro funziona con il contenuto che abbiamo nel nostro documento non sembra ancora fantastico - la nostra scatola di scatola, ad esempio, ha anche invertito, che sembra piuttosto strano. Abbiamo perso il controllo sugli stili, che diventa un problema ancora più grande quando hai sfondi colorati. Abbiamo anche un problema completamente nuovo da considerare quando le immagini sono coinvolte. Vediamo cosa succede quando aggiungiamo un'immagine alla nostra pagina.

10. Utilizzare proprietà personalizzate

I metodi che abbiamo esplorato finora ci fanno perdere il controllo sugli stili o richiedono molta manutenzione per assicurarsi che tutto sia aggiornato in modalità oscura. C'è un altro modo in cui possiamo affrontare questo: possiamo usare proprietà personalizzate per definire i nostri colori e quindi sovrascriverli utilizzando la query del supporto.

11. Creare proprietà personalizzate

Per utilizzare le proprietà personalizzate, li definiamo nella parte superiore del nostro CSS all'interno del ' :radice 'elemento. L'elemento radice ha la stessa portata di HTML, quindi sarà disponibile a livello globale. Dobbiamo decidere i nomi delle variabili e definire i propri valori.

: root {
- Colore-chiaro: #EDEDED;
- Pagina-Sfondo: #FFFF;
- Colore dei tempi: # 212121;
--Color-Alpha: # c3423F;
} 

12. Applicare le nostre proprietà personalizzate

Ora abbiamo alcune proprietà personalizzate definite possiamo usarle nel nostro CSS. Inizieremo con il corpo e applichiamo i colori di sfondo e testo. Per utilizzare una proprietà personalizzata usiamo il ' VAR (- Nome personalizzato-Property) 'sintassi.

 Body {
Sfondo-Colore: VAR (- Sfondo-Color);
Colore: VAR (- Text-Color);
} 

13. Applicare le proprietà rimanenti

Usando lo stesso metodo, possiamo anche aggiornare il "colore dello sfondo" del nostro contenitore e del "colore" del nostro ' Text-Alpha. 'Classe per usare le nostre proprietà personalizzate. Tutti i colori della nostra pagina sono ora controllati utilizzando proprietà personalizzate.

 .content-container {
Sfondo-Color: Var (- Page-background);
}
.Text - Alpha {
Colore: VAR (- Color-Alpha);
} 

14. Re-aggiungi la query del supporto

Ora possiamo riscrivere la query del supporto, ma questa volta possiamo ignorare i valori di proprietà personalizzati che sono al suo interno. Posizioneremo questo diritto dopo la definizione originale della radice e all'interno della query multimediale possiamo semplicemente scegliere nuovi valori per tutte le nostre proprietà personalizzate colorate.

 @Media (preferisce-schema a colori: Dark) {
: root {
- Colore-chiaro: # 111;
- PAGA-SFONDO: # 212121;
--Text-Color: #EDEDED;
--Color-Alpha: # 50a8d8;
}
} 

15. Prendi il pieno controllo

Le proprietà personalizzate ci danno il pieno controllo per scegliere quali colori e altre proprietà cambiamo e utilizziamo. Aggiorniamo l'ombra della casella sul nostro contenitore della pagina per renderlo meno trasparente quando si utilizza la modalità scura. Per fare ciò, dobbiamo creare una nuova proprietà personalizzata per l'ombra della pagina.

: root {
...
--page-Shadow: 0 0 12px 6px RGBA
(0,0,0,0,05);
} 

16. Applicare l'ombra

Ora abbiamo creato un'altra proprietà personalizzata che dobbiamo applicarla all'elemento corretto sulla pagina. Possiamo quindi sovrascrivere il valore all'interno del nostro elemento radice per ridurre la trasparenza.

 @Media (preferisce-schema a colori: Dark) {
: root {
...
--page-shadow:
0 0 12 PX 6PX RGBA (0,0,0,033)
;
}
}
.content-container {
...
scatola-shadow: var (- pagina-ombra);
} 

17. Aggiungi un'immagine

Ora aggiungiamo un'immagine nel nostro contenuto, e quindi possiamo aggiungere alcuni stili di base per galleggiare l'immagine accanto al contenuto.

 IMG {
Larghezza: 100%;
Altezza: Auto;
Galleggiante: sinistra;
larghezza massima: 300 px;
margin-destra: 1.618rem;
Margin-Bottom: 1.618rem;
} 

Come possiamo vedere, dal momento che non utilizziamo alcun filtro, l'immagine non è alterata tra i due temi.

18. Aggiungi altri componenti

Ora abbiamo le nostre proprietà personalizzate, possiamo continuare ad aggiungere elementi alla pagina e spostarli con le nostre variabili. Creiamo una classe pulsante e aggiunci un pulsante alla nostra pagina.

 .button {
display: inline-flex;
Fammon-famiglia: eredita;
sfondo-colore: var (- colore-alfa);
Colore: VAR (- Text-Color);
imbottitura: 1.618rem 3.236rem;
Bordo: 0 Nessuno;
Border-Radius: 0.25Rem;
Decorazione del testo: nessuno;
}

19. Creare i pulsanti Stili di movimentazione

Usando le stesse variabili, possiamo anche creare uno stile mobile che può essere utilizzato per entrambi i temi. Per raggiungere questo obiettivo, invertiremo i colori quando l'utente aleggia il pulsante sul pulsante e passeremo a tali proprietà per rendere l'esperienza meno aspirata.

 .button {
...
Transizione: sfondo-colore 150ms,
colore 150ms;
& amp;: hover {
Sfondo-Color: Var (- Text-Color);
Colore: VAR (- Color-Alpha);
}
} 

20. Make Pulsante Proprietà personalizzate

Le proprietà personalizzate hanno la stessa portata dei normali elementi CSS; Ciò significa che possiamo ignorarli usando un selettore più specifico. Possiamo usufruire di questo e creare alcune variabili che vengono ammessi al nostro pulsante.

 .button {
- BUTTON-SFONDO: VAR (- Color-Alpha);
- BUTTON-TESTOLO: VAR (- Sfondo-Color);
Sfondo-Colore: VAR (- BUTTON-SFONDO);
Colore: var (- pulsante-testo);
...
} 

21. Utilizzare l'ambito

Possiamo utilizzare questo scopo per creare stili diversi e interazioni mouse per il nostro pulsante in temi scuri e leggeri. Possiamo modificare il valore delle nostre variabili in base alla query del supporto o allo stato dell'elemento, invece di ripetere la proprietà con un nuovo valore come faremo normalmente.

 .button {
...
& amp;: Hover {
- BUTTON-SFONDO: # AE3937;
@media (preferisce-schema a colori: Dark) {
- BUTTON-SFONDO: # 2E98D1;
--Button-Text: var (- sfondo-
colore);
}
}
}

Lavorando su una build con una squadra? Mantieni il tuo processo coesivo con decente deposito cloud. .

Questo articolo è stato originariamente pubblicato in questione 283 di creative Web Design Magazine Web designer . Comprare il problema 283. o Iscriviti al web designer qui .

Articoli Correlati:

• Inizia con CSS Art
• 12 Great CSS Animation Risorse
• Quale framework CSS dovresti usare?