Themen

Auch Branding kann responsiv sein. Sie können die Darstellung Ihrer Website an die Präferenzen der Nutzenden anpassen. Aber zuerst erfahren Sie, wie Sie das Branding Ihrer Website so erweitern, dass auch der Browser selbst sichtbar ist.

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 vorgeschlagene Farbe an. Fügen Sie die Farbe in einem meta-Element namens theme-color in die head Ihrer Seiten ein.

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

<ph type="x-smartling-placeholder">

</ph>

Sie können den Wert von theme-color mit JavaScript aktualisieren. Aber nutze diese Macht mit Bedacht. Es kann für Nutzer überwältigend sein, wenn sich das Farbschema ihres Browsers zu oft ändert. Überlegen Sie sich, wie Sie die Farbe des Designs auf subtile Weise anpassen können. Wenn die Änderungen zu überwältigend sind, werden die Nutzer verärgert.

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

Link zur Manifestdatei im head Ihrer Dokumente. Verwende ein link-Element mit dem rel-Wert manifest.

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

Listen Sie die Metadaten in der Manifestdatei 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ügt, Der Browser zeigt anhand der Informationen in Ihrer Manifest-Datei eine entsprechende Tastenkombination an.

Einen dunklen Modus bereitstellen

Bei vielen Betriebssystemen können Nutzende eine helle oder dunkle Farbpalette einstellen. Dies ist eine gute Idee, um Ihre Website an die Designpräferenzen der Nutzer anzupassen. Du kannst auf diese Einstellung in der Medienfunktion „prefers-color-scheme“ 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)">

Sie können 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 als SVG-Favicon für Symbole im dunklen Modus.

Design mit benutzerdefinierten Eigenschaften

Wenn Sie dieselben Farbwerte an mehreren Stellen in Ihrem CSS-Code verwenden, kann es ziemlich 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;
  }
}

Mit benutzerdefinierten CSS-Eigenschaften können Sie Ihre Farbwerte 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-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);
}

Weitere Beispiele für die Erstellung von Designs 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);
}

Jetzt ändern die Symbole ihre Farben zusammen mit den anderen Elementen auf Ihrer Seite.

Wenn Sie die Helligkeit Ihrer Fotos im dunklen Modus verringern möchten, können Sie einen Filter in CSS anwenden.

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Einige Bilder können Sie im dunklen Modus komplett austauschen. Beispielsweise können Sie 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>

<ph type="x-smartling-placeholder">

</ph>

Formulare

Browser bieten eine Standardfarbvorlage für Formularfelder. Teilen Sie dem Browser mit, dass Ihre Website sowohl einen dunklen als auch einen hellen Modus anbietet. Auf diese Weise kann der Browser den entsprechenden 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 Folgendes zum head Ihrer Dokumente hinzu:

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

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

html {
  accent-color: red;
}

Dunkle Designs haben häufig dezente Markenfarben. Sie können 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, hierfü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);
}

Der dunkle Modus ist nur ein Beispiel dafür, wie Sie Ihre Website an die Präferenzen der Nutzer anpassen können. Als Nächstes erfahren Sie, wie Sie Ihre Website an verschiedene Aspekte der Barrierefreiheit anpassen können.

Wissen testen

Testen Sie Ihr Wissen zu Themen