Gebruiksnotities
Een <meta name="theme-color">-element heeft de volgende aanvullende attributen:
content | Een <meta>-element met name=theme-color moet een content-attribuut hebben dat de themakleur definieert.
De waarde van het content-attribuut is als volgt:
|
|---|---|
media Optioneel | Elk geldig mediatype of elke geldige media query.
Indien opgegeven, worden de opties voor de themakleur van het document, gedefinieerd in het content-attribuut, aan de browser voorgesteld wanneer de media query overeenkomt. |
Voorbeelden
Een kleurwaarde instellen
Bekijk de volgende code die <meta> gebruikt om een themakleur in te stellen:
HTML
<meta name="theme-color" content="#4285f4" />De volgende afbeelding toont het effect van deze instelling in Chrome op een Android-mobiel apparaat:
Afbeelding: van Icons & Browser Colors, gemaakt en gedeeld door Google en gebruikt volgens de voorwaarden beschreven in de Creative Commons 4.0 Attribution License.
Een media query gebruiken met theme-color
Je kunt een mediatype of query opgeven binnen het media-attribuut.
De theme-color wordt dan alleen ingesteld als aan de mediaconditie wordt voldaan.
Bijvoorbeeld:
HTML
<meta
name="theme-color"
content="cornflowerblue"
media="(prefers-color-scheme: light)" />
<meta
name="theme-color"
content="dimgray"
media="(prefers-color-scheme: dark)" />