Temi

Anche il branding può essere reattivo. Puoi modificare la presentazione del tuo sito web in base alle preferenze dell'utente. Ma prima, ecco come estendere il branding del tuo sito web per includere il browser stesso.

Personalizzare l'interfaccia del browser

Alcuni browser ti consentono di suggerire un colore del 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">

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, gli utenti potrebbero sentirsi sopraffatti. Pensa a modi discreti per regolare il colore del tema. Se le modifiche sono troppo drastiche, gli utenti abbandoneranno la piattaforma per frustrazione.

Puoi anche specificare un colore del 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 di 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 schermata Home, il browser utilizzerà le informazioni 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 di colori chiari o scuri, il che è una buona idea per ottimizzare il sito in base alle preferenze del tema 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 utilizzare la funzionalità multimediale prefers-color-scheme all'interno di SVG. Se utilizzi un file SVG per la favicon, questa può essere modificata per la modalità Buio. Thomas Steiner ha scritto un articolo su 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 all'interno di una query supporti 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 proprietà personalizzate all'interno di una media query prefers-color-scheme, non dovrai scrivere due volte tutti i selettori.

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);
}

Per esempi più avanzati di temi con proprietà personalizzate, consulta Creare una combinazione di colori.

Immagini

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

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

Ora i colori delle icone cambieranno insieme a quelli degli altri elementi della pagina.

Se vuoi ridurre la luminosità delle tue 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);
  }
}

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

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Moduli

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

Aggiungi questo codice CSS:

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

Puoi anche utilizzare l'HTML. Aggiungi questo codice 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 di accent-color per la modalità Buio.

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

È consigliabile utilizzare una proprietà personalizzata per questo scopo, in modo da poter conservare tutte le dichiarazioni di colore 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 adattamento del sito alle preferenze degli utenti. Successivamente, imparerai a rendere il tuo sito adattabile a tutti i tipi di considerazioni sull'accessibilità.

Mettiti alla prova

Metti alla prova le tue conoscenze sui temi