Anche il branding può essere adattabile. Puoi modificare la presentazione del sito web in base alle preferenze dell'utente. Prima però, ecco come estendere il branding del tuo sito web in modo da includere il browser stesso.
Personalizzazione dell'interfaccia del browser
Alcuni browser consentono di suggerire un colore per il tema in base alla tavolozza del sito web.
L'interfaccia del browser si adatta al colore da te suggerito. Aggiungi il colore in un elemento meta denominato theme-color nella sezione head delle pagine.
<meta name="theme-color" content="#00D494">
Puoi aggiornare il valore di theme-color utilizzando JavaScript. Ma usa questo potere con saggezza.
Può essere difficile per gli utenti se la combinazione di colori del browser cambia troppo spesso.
Pensa a modi discreti per regolare il colore del tema. Se le modifiche sono troppo fastidiose, gli utenti non saranno più un problema.
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 dalla 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 dei colori chiari o scuri, il che è una buona idea per ottimizzare il sito in base alle preferenze del tema dell'utente.
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à dei contenuti multimediali prefers-color-scheme all'interno del file SVG.
Se usi un file SVG per la favicon, puoi regolarla per la modalità Buio.
Thomas Steiner ha scritto su
prefers-color-scheme nelle favicon SVG per le icone modalità Buio.
Applicazione di 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 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 query supporti 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);
}
Consulta la sezione sulla creazione di una combinazione di colori per esempi più avanzati relativi all'applicazione di temi con le proprietà personalizzate.
Immagini
Se utilizzi SVG nel codice HTML, puoi applicare anche proprietà personalizzate.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Ora le icone cambieranno colore insieme agli altri elementi della pagina.
Per attenuare 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);
}
}
Per alcune immagini è possibile sostituirle completamente in modalità Buio.
Ad esempio, potresti voler visualizzare una mappa con una combinazione di colori più scuri.
Utilizza l'elemento <picture> contenente un elemento <source> con la query supporti prefers-color-scheme.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
Forms
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 quanto segue al tuo CSS:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
Puoi anche utilizzare il codice HTML. Aggiungi questo elemento in head dei tuoi documenti:
<meta name="supported-color-schemes" content="light dark">
Utilizza la proprietà accent-color in CSS per applicare uno stile a caselle di controllo, pulsanti di opzione e alcuni altri campi del modulo.
html {
accent-color: red;
}
È normale che i temi scuri abbiano colori del brand smorzati. Puoi aggiornare il valore di accent-color per la modalità Buio.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
A questo scopo, ha senso utilizzare una proprietà personalizzata in modo da poter conservare tutte le dichiarazioni 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);
}
La modalità Buio è solo un esempio di come adattare il sito alle preferenze dell'utente. Scoprirai come rendere il tuo sito adattabile a ogni genere di considerazioni relative all'accessibilità.
Verifica la tua comprensione
Metti alla prova le tue conoscenze sulla tematizzazione
Per fornire colori dei temi che abbiano impatto sul browser all'esterno della pagina web, utilizza:
<meta> "theme-color".manifest.json e include campi per specificare i colori dei temi per applicare colori diversi all'aspetto dell'app durante l'apertura dalla schermata Home di un dispositivo mobile.<meta> "theme-color"<head>, evitando lampi di colore indesiderati.Per collegarti alla preferenza di sistema di un utente relativa a un tema chiaro o scuro, usa:
(prefers-color-scheme)Quindi supporti il tema scuro, ma tutti gli input del modulo sono ancora di tema chiaro. dei clienti. Cosa puoi fare?
html { color-scheme: light dark; } al tuo CSS.<meta name="supported-color-schemes" content="light dark"> al tag HTML <head>.