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">
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);
}
}
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>
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
So stellen Sie Designfarben bereit, die den Browser außerhalb der Webseite beeinflussen:
<meta>
-TagWenn Sie ein helles oder dunkles Design festlegen möchten, können Sie Folgendes verwenden:
(prefers-color-scheme)
Sie unterstützen also das dunkle Design, aber alle Formulareingaben sind weiterhin hell. Was kannst du für mich tun?
<head>
-Tag <meta name="supported-color-schemes" content="light dark">
hinzu.html { color-scheme: light dark; }
hinzu.