Designs

Sogar das Branding kann responsiv sein. Sie können die Darstellung Ihrer Website an die Einstellungen des Nutzers anpassen. Zuerst erfahren Sie aber, wie Sie das Branding Ihrer Website auf den Browser selbst ausweiten.

Browseroberfläche anpassen

Bei einigen Browsern können Sie eine Designfarbe basierend auf der Farbpalette Ihrer Website vorschlagen. Die Benutzeroberfläche des Browsers passt sich an die von Ihnen vorgeschlagene Farbe an. Fügen Sie die Farbe in einem meta-Element mit dem Namen theme-color im head Ihrer Seiten hinzu.

<meta name="theme-color" content="#00D494">

Sie können den Wert von theme-color mit JavaScript aktualisieren. Nutzen Sie diese Macht jedoch mit Bedacht. Wenn sich das Farbschema des Browsers zu oft ändert, kann das für Nutzer verwirrend sein. Überlegen Sie, wie Sie die Designfarbe dezent anpassen können. Wenn die Änderungen zu abrupt sind, werden Nutzer die App verlassen.

Sie können auch eine Designfarbe in einer Web-App-Manifestdatei angeben. Dies ist eine JSON-Datei mit Metadaten zu Ihrer Website.

Link zur Manifestdatei aus dem head Ihrer Dokumente. Verwenden Sie ein link-Element mit dem rel-Wert manifest.

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

Listen Sie in der Manifestdatei Ihre Metadaten als Schlüssel/Wert-Paare auf.

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

Wenn ein Besucher Ihre Website auf dem Startbildschirm hinzufügen möchte, verwendet der Browser die Informationen in Ihrer Manifestdatei, um eine entsprechende Verknüpfung zu erstellen.

Dunklen Modus anbieten

Viele Betriebssysteme bieten Nutzern die Möglichkeit, eine helle oder dunkle Farbpalette festzulegen. Es empfiehlt sich, Ihre Website an die Designeinstellungen der Nutzer anzupassen. Sie können auf diese Einstellung über die Media-Funktion prefers-color-scheme zugreifen.

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

Geben Sie Designfarben mit dem Media-Feature prefers-color-scheme innerhalb des Elements meta an.

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

Sie können auch die Media-Funktion prefers-color-scheme in SVG verwenden. Wenn Sie eine SVG-Datei für Ihr Favicon verwenden, kann sie für den Dark Mode angepasst werden. Thomas Steiner hat über prefers-color-scheme in SVG-Favicons für Symbole im Dark Mode geschrieben.

Theming mit benutzerdefinierten Eigenschaften

Wenn Sie dieselben Farbwerte an mehreren Stellen in Ihrem CSS verwenden, kann es sehr mühsam sein, alle Selektoren in einer prefers-color-scheme-Media-Abfrage 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 Eigenschaften funktionieren wie Variablen in einer Programmiersprache. Sie können den Wert einer Variablen aktualisieren, ohne ihren Namen zu ändern.

Wenn Sie die Werte Ihrer benutzerdefinierten Eigenschaften in einer prefers-color-scheme-Media-Query 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);
}

Weitere Beispiele für das Theming mit benutzerdefinierten Eigenschaften finden Sie unter Farbschema erstellen.

Bilder

Wenn Sie SVGs in Ihrem HTML-Code verwenden, können Sie dort auch benutzerdefinierte Eigenschaften anwenden.

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

Die Farben Ihrer Symbole ändern sich jetzt zusammen mit den anderen Elementen auf Ihrer Seite.

Wenn Sie die Helligkeit Ihrer Fotos im Dark Mode reduzieren möchten, können Sie einen Filter in CSS anwenden.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Bei einigen Bildern möchten Sie sie im dunklen Modus vielleicht komplett austauschen. Sie möchten beispielsweise eine Karte mit einem dunkleren Farbschema anzeigen. Verwenden Sie das <picture>-Element, das ein <source>-Element mit der Media-Anfrage prefers-color-scheme enthält.

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

Formulare

Browser stellen eine Standardfarbpalette für Formularfelder bereit. Teilen Sie dem Browser mit, dass Ihre Website sowohl einen dunklen als auch einen hellen Modus bietet. So kann der Browser das entsprechende Standard-Styling für Formulare bereitstellen.

Fügen Sie Folgendes in Ihr CSS ein:

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

Sie können auch HTML verwenden. Fügen Sie Folgendes in den head Ihrer Dokumente ein:

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

Verwenden Sie die Eigenschaft accent-color in CSS, um Kästchen, Optionsfelder und einige andere Formularfelder zu gestalten.

html {
  accent-color: red;
}

Bei dunklen Designs sind die Markenfarben oft dezent gehalten. Sie können den Wert accent-color 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 haben.

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

Die Bereitstellung eines dunklen Modus ist nur ein Beispiel dafür, wie Sie Ihre Website an die Vorlieben Ihrer Nutzer anpassen können. Als Nächstes erfahren Sie, wie Sie Ihre Website an alle möglichen Barrierefreiheitsanforderungen anpassen können.

Dein Wissen wird getestet

Wissen über Theming testen