Sogar Branding kann responsiv sein. Sie können die Darstellung Ihrer Website an die Präferenzen der Nutzenden anpassen. Im Folgenden erfahren Sie, wie Sie das Branding Ihrer Website um den Browser selbst erweitern können.
Browseroberfläche anpassen
In einigen Browsern können Sie auf Grundlage der Palette Ihrer Website eine Designfarbe vorschlagen.
Die Benutzeroberfläche des Browsers passt sich an die von Ihnen vorgeschlagene Farbe an. Fügen Sie die Farbe in einem meta-Element namens theme-color im head Ihrer Seiten hinzu.
<meta name="theme-color" content="#00D494">
Sie können den Wert von theme-color mit JavaScript aktualisieren. Aber setze diese Macht mit Bedacht ein.
Wenn sich das Farbschema ihres Browsers zu häufig ändert, kann dies den Nutzer überfordern.
Überlege dir, wie du die Designfarbe auf subtile Art und Weise anpassen kannst. Wenn die Änderungen zu auffällig sind, sind die Nutzenden genervt.
Sie können die Designfarbe auch in einer Web-App-Manifestdatei angeben. Dies ist eine JSON-Datei mit Metadaten zu Ihrer Website.
Link zur Manifestdatei aus dem head deiner Dokumente. Verwenden Sie ein link-Element mit einem rel-Wert von manifest.
<link rel="manifest" href="/manifest.json">
Listen Sie in der Manifestdatei Ihre Metadaten mithilfe von Schlüssel/Wert-Paaren auf.
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
Wenn ein Besucher Ihre Website zu seinem Startbildschirm hinzufügen möchte, verwendet der Browser die Informationen in Ihrer Manifestdatei, um eine entsprechende Verknüpfung anzuzeigen.
Dunklen Modus anbieten
Bei vielen Betriebssystemen können Nutzer eine helle oder dunkle Farbpalette verwenden. Dies ist eine gute Idee, um Ihre Website an die Designeinstellungen der Nutzer anzupassen.
Du kannst über eine Medienfunktion namens prefers-color-scheme auf diese Einstellung zugreifen.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
Legen Sie Designfarben mit der Medienfunktion „prefers-color-scheme“ im meta-Element fest.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
Du kannst auch die Medienfunktion prefers-color-scheme in SVG verwenden.
Wenn Sie eine SVG-Datei für Ihr Favicon verwenden, kann es für den dunklen Modus angepasst werden.
Thomas Steiner schrieb über prefers-color-scheme in SVG-Favicons für Symbole im dunklen Modus.
Design mit benutzerdefinierten Eigenschaften
Wenn Sie in Ihrem CSS an mehreren Stellen dieselben Farbwerte verwenden, kann es mühsam sein, alle Selektoren innerhalb einer prefers-color-scheme-Medienabfrage zu wiederholen.
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;
}
}
Verwenden Sie benutzerdefinierte CSS-Eigenschaften, um Ihre Farbwerte zu speichern. Benutzerdefinierte Attribute funktionieren wie Variablen in einer Programmiersprache. Sie können den Wert einer Variablen aktualisieren, ohne ihren Namen zu aktualisieren.
Wenn Sie die Werte Ihrer benutzerdefinierten Eigenschaften innerhalb einer prefers-color-scheme-Medienabfrage aktualisieren, müssen Sie nicht alle Selektoren zweimal schreiben.
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);
}
Fortgeschrittene Beispiele für Designs mit benutzerdefinierten Eigenschaften finden Sie unter Farbschema erstellen.
Bilder
Wenn Sie in Ihrem HTML-Code SVGs verwenden, können Sie auch dort benutzerdefinierte Eigenschaften anwenden.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Jetzt ändern die Farben Ihrer Symbole zusammen mit den anderen Elementen auf Ihrer Seite.
Wenn Sie die Helligkeit Ihrer Fotos bei der Anzeige im dunklen Modus reduzieren möchten, können Sie einen Filter in CSS anwenden.
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
Manche Bilder können im dunklen Modus komplett ersetzt werden.
Sie können beispielsweise eine Karte mit einem dunkleren Farbschema anzeigen.
Verwenden Sie das <picture>-Element, das ein <source>-Element enthält, mit der prefers-color-scheme-Medienabfrage.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
Formulare
Browser stellen für Formularfelder eine Standardfarbvorlage bereit. Teilen Sie dem Browser mit, dass Ihre Website sowohl einen dunklen als auch einen hellen Modus anbietet. Auf diese Weise kann der Browser den passenden Standardstil für Formulare bereitstellen.
Fügen Sie Ihrem Preisvergleichsportal Folgendes hinzu:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
Sie können auch HTML verwenden. Fügen Sie dies im Feld head Ihrer Dokumente hinzu:
<meta name="supported-color-schemes" content="light dark">
Sie können die Eigenschaft accent-color in der CSS-Datei verwenden, um Kästchen, Optionsfelder und einige andere Formularfelder zu gestalten.
html {
accent-color: red;
}
Dunkle Designs haben häufig gedämpfte Markenfarben. Du kannst den accent-color-Wert für den dunklen Modus aktualisieren.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
Es ist sinnvoll, dafür eine benutzerdefinierte Eigenschaft zu verwenden, damit Sie alle Farbdeklarationen an einem Ort speichern können.
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);
}
Das Bereitstellen eines dunklen Modus ist nur ein Beispiel dafür, wie Sie Ihre Website an die Präferenzen Ihrer Nutzer anpassen können. Als Nächstes erfahren Sie, wie Sie Ihre Website an alle möglichen Überlegungen zur Barrierefreiheit anpassen können.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen zu Themen
Verwenden Sie zum Festlegen von Designfarben, die sich außerhalb der Webseite auf den Browser auswirken, Folgendes:
<meta>-Tag für die Farbe „theme-color“ aktualisieren.manifest.json kann angegeben werden und enthält Felder zum Festlegen von Designfarben, um festzulegen, wie die App auf dem Startbildschirm eines Mobilgeräts dargestellt wird.<meta>-Tag mit „theme-color“<head>-Tag so schnell wie möglich erkennen und so unerwünschte Farbakzente vermeiden.So können Sie das helle oder dunkle Design an die Systemeinstellungen eines Nutzers anpassen:
(prefers-color-scheme)Sie unterstützen also das dunkle Design, aber alle Eingaben im Formular sind weiterhin hell. Was du als Creator tun kannst
html { color-scheme: light dark; } hinzu.<head>-HTML-Tag <meta name="supported-color-schemes" content="light dark"> hinzu.