Blog

Farbe der Website in der Tab-Leiste von Safari

Bereiten Sie WordPress auf die neue Tab-Leiste von Safari 15 vor

Design

Apples Browser Safari kommt mit der Version 15 in einem völlig neuem Design im macOS und iPadOS. Eines der herausstechenden Merkmale ist die Möglichkeit, die Farbe der Website in der Tab-Leiste anzuzeigen. In diesem Beitrag lesen Sie, wie Sie die Farbgebung im Browser mit etwas Code beeinflussen.

Das Meta-Tag „theme-color“

Im Grunde ist es ganz einfach: Um die Tab-Leiste von Safari (ab Version 15) in der Farbe Ihrer Website zu kolorieren, müssen Sie lediglich den Meta-Tag „theme-color“ in Ihren HTML-Code einfügen und darin die gewünschte Farbe festlegen. Dadurch wird Safari angewiesen, diesen Farbton für die Website einzustellen, wenn sie in einem Tab geöffnet wird.

Wie Sie sehen, hat unsere Website im Kopfbereich einen hellblauen Verlauf. Da ist es passend, dass der Farbton der Tab-Leiste zu diesem Farbbereich passt. Wir können also den folgenden Meta-Tag mit der Farbe #218ae0 wie folgt in den HTML-Code einfügen:

<meta name="theme-color" content="#218ae0">
Elbnetz-Website im Hellmodus in Safari 15
So sieht unsere Website aus, wenn sie in Safari 15 geöffnet wird

Farbanpassung der Tab-Leiste im Dunkelmodus

Der Dunkelmodus (Darkmode) im macOS und iPadOS ist eine neue Form der Darstellung, die angenehm für die Augen ist und hilft, sich auf die Arbeit zu konzentrieren. So Sie die Möglichkeit der Farbanpassung auch für Ihre Website nutzen, wäre es doch schön, wenn sich auch die Farbe des Tabs im Browser entsprechend angleicht.

Und auch das ist möglich, indem Sie den Meta-Tag durch das Media-Attribut prefers-color-scheme  wie folgt ergänzen:

Hellmodus:

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

Dunkelmodus:

<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">
Elbnetz-Website im Dunkelmodus in Safari 15
Unserer Website im Dunkelmodus in Safari 15

Meta-Tags schnell über die functions.php hinzufügen

Mit dem folgenden Code können Sie die gewünschten Farbgebungen für Safari ab Version 15 in Ihrer WordPress-Installation bestimmen. Passen Sie den Farbcode an das Design Ihrer Website an und fügen den Code ans Ende Ihrer functions.php hinzu. Am besten innerhalb eines Child-Themes.

Einheitliche Farbgebung 

/* Farbgebung Safari-Tabs */
function themecolor_meta() {
    echo '<meta name="theme-color" content="#218ae0">';
}
add_action('wp_head', 'themecolor_meta');

Unterschiedliche Farbgebung für Hell- und Dunkelmodus

/* Farbgebung Safari-Tabs */
function themecolor_meta() {
    echo '<meta name="theme-color" content="#218ae0" media="(prefers-color-scheme: light)">';
    echo '<meta name="theme-color" content="#000202" media="(prefers-color-scheme: dark)">';
}
add_action('wp_head', 'themecolor_meta');

Fazit

Mit überschaubaren Aufwand können Sie die Anmutung Ihrer Webpräsenz an die moderne Darstellung im neun Safari-Browser anpassen und so auf einen auf dem neuesten Stand bringen. Es ist zu erwarten, dass andere Browser-Hersteller der ansprechenden Darstellung folgen werden.

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

Menü