Temi

Anche il branding può essere reattivo. Puoi adattare la presentazione del tuo sito web in base alle preferenze dell'utente. Innanzitutto, ecco come estendere il branding del tuo sito web in modo da includere il browser stesso.

Alcuni browser consentono di suggerire un colore per il tema in base alla tavolozza del tuo sito web. L'interfaccia del browser si adatta al colore suggerito. Aggiungi il colore in un elemento meta denominato theme-color nella sezione head delle tue pagine.

<meta name="theme-color" content="#00D494">
di Gemini Advanced.
Clearleft punto com. Resilient Web Design punto com. La sessione Session punto org.
Nel browser Safari vengono visualizzati tre siti web. Ognuno di questi ha il proprio colore del tema che si estende all'interfaccia del browser.

Puoi aggiornare il valore di theme-color utilizzando JavaScript. Ma usa questo potere con saggezza. Se la combinazione di colori del browser cambia troppo spesso, può essere molto complicato per gli utenti. Pensa a dei modi intelligenti per regolare il colore del tema. Se le modifiche sono troppo fastidiose, gli utenti se ne occuperanno.

Puoi anche specificare un colore per il tema in un file manifest dell'app web. Si tratta di un file JSON con metadati relativi al tuo sito web.

Link al file manifest da head dei tuoi documenti. Utilizza un elemento link con un valore rel pari a manifest.

<link rel="manifest" href="/manifest.json">

Nel file manifest, elenca i metadati utilizzando coppie chiave/valore.

{
 
"short_name": "Clearleft",
 
"name": "Clearleft design agency",
 
"start_url": "/",
 
"background_color": "#00D494",
 
"theme_color": "#00D494",
 
"display": "standalone"
}

Se un visitatore decide di aggiungere il tuo sito web alla propria schermata Home, il browser utilizzerà le informazioni contenute nel file manifest per visualizzare una scorciatoia appropriata.

Fornire una modalità Buio

Molti sistemi operativi consentono agli utenti di specificare una preferenza per una tavolozza dei colori chiari o scuri. che è una buona idea ottimizzare il tuo sito in base alle preferenze dei temi degli utenti. Puoi accedere a questa preferenza in una funzionalità multimediale chiamata prefers-color-scheme.

@media (prefers-color-scheme: dark) {
 
// Styles for a dark theme.
}

Specifica i colori del tema con la funzionalità multimediale prefers-color-scheme all'interno dell'elemento meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Puoi anche usare la funzionalità multimediale prefers-color-scheme all'interno del file SVG. Se utilizzi un file SVG per la favicon, puoi regolarlo per la modalità Buio. Thomas Steiner ha scritto di prefers-color-scheme nelle favicon SVG per le icone della modalità Buio.

Temi con proprietà personalizzate

Se utilizzi gli stessi valori di colore in più punti del CSS, potrebbe essere piuttosto noioso ripetere tutti i selettori in una query multimediale prefers-color-scheme.

body {
 
background-color: white;
 
color: black;
}
input
{
 
background-color: white;
 
color: black;
 
border-color: black;
}
button
{
 
background-color: black;
 
color: white;
}
@media (prefers-color-scheme: dark) {
  body
{
   
background-color: black;
   
color: white;
 
}
  input
{
   
background-color: black;
   
color: white;
   
border-color: white;
 
}
  button
{
   
background-color: white;
   
color: black;
 
}
}

Utilizza le proprietà personalizzate CSS per memorizzare i valori dei colori. Le proprietà personalizzate funzionano come variabili in un linguaggio di programmazione. Puoi aggiornare il valore di una variabile senza aggiornarne il nome.

Se aggiorni i valori delle tue proprietà personalizzate in una query multimediale prefers-color-scheme, non dovrai scrivere tutti i selettori due volte.

html {
 
--page-color: white;
 
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html
{
   
--page-color: black;
   
--ink-color: white;
 
}
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}
input
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
 
border-color: var(--ink-color);
}
button
{
 
background-color: var(--ink-color);
 
color: var(--page-color);
}

Consulta la sezione Creazione di una combinazione di colori per esempi più avanzati di tematizzazione con proprietà personalizzate.

Immagini

Se utilizzi SVG nel codice HTML, puoi anche applicare proprietà personalizzate.

svg {
 
stroke: var(--ink-color);
 
fill: var(--page-color);
}

Ora le icone cambieranno di colore insieme agli altri elementi sulla pagina.

Se vuoi ridurre la luminosità delle immagini fotografiche quando vengono visualizzate in modalità Buio, puoi applicare un filtro in CSS.

@media (prefers-color-scheme: dark) {
  img
{
   
filter: brightness(.8) contrast(1.2);
 
}
}
Tre fotografie con luminosità normale. Tre fotografie con una luminosità leggermente inferiore.
L'effetto è sottile, ma puoi attenuare la luminosità delle immagini in modalità Buio.

Per alcune immagini, potresti volerle sostituire completamente in modalità Buio. Ad esempio, potresti voler mostrare una mappa con una combinazione di colori più scura. Usa l'elemento <picture> contenente un elemento <source> con la query multimediale prefers-color-scheme.

<picture>
 
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
 
<img src="lightimage.png" alt="A description of the image.">
</picture>
Due mappe di Broolyn, una con colori chiari e l&#39;altra con colori scuri.
Due versioni della stessa mappa, una per la modalità Luce e una per la modalità Buio.

Moduli

I browser forniscono una tavolozza dei colori predefinita per i campi dei moduli. Comunica al browser che il tuo sito offre sia una modalità Buio sia una modalità Luce. In questo modo, il browser può fornire lo stile predefinito appropriato per i moduli.

Aggiungi al tuo CSS:

html {
 
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
 
}
}

Puoi anche utilizzare il codice HTML. Aggiungi questo in head dei tuoi documenti:

<meta name="supported-color-schemes" content="light dark">

Utilizza la proprietà accent-color in CSS per applicare uno stile alle caselle di controllo, ai pulsanti di opzione e ad alcuni altri campi del modulo.

html {
 
accent-color: red;
}

È comune che i temi scuri abbiano colori del brand tenui. Puoi aggiornare il valore accent-color per la modalità Buio.

html {
 
accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
accent-color: pink;
 
}
}

Ha senso utilizzare una proprietà personalizzata a tal fine, in modo da poter conservare tutte le dichiarazioni relative ai colori in un unico posto.

html {
 
color-scheme: light;
 
--page-color: white;
 
--ink-color: black;
 
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
   
--page-color: black;
   
--ink-color: white;
   
--highlight-color: pink;
 
}
}
html
{
 
accent-color: var(--highlight-color);
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}

Fornire una modalità Buio è solo un esempio di come adattare il sito alle preferenze dell'utente. Ora scoprirai come rendere il tuo sito adattabile a tutti i tipi di considerazioni di accessibilità.

Verifica le tue conoscenze

Verifica le tue conoscenze sui temi

Per fornire colori del tema che influiscono sul browser al di fuori della pagina web, utilizza:

CSS
Il file manifest dell'app web.
JavaScript
Un "colore-tema" Tag <meta>

Per sfruttare le preferenze di sistema di un utente relative a un tema chiaro o scuro, utilizza:

JavaScript
La query multimediale (prefers-color-scheme)

Il tema scuro è quindi supportato, ma tutti gli input del modulo sono comunque a tema chiaro. Cosa puoi fare?

Scrivi un gruppo di CSS per modificare tutte le impostazioni predefinite dell'input.
Aggiungi html { color-scheme: light dark; } al tuo CSS.
Aggiungi <meta name="supported-color-schemes" content="light dark"> al tag HTML <head>.