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 und WordPress auf die neue Tableiste von Safari 15 vorbereiten.
Inhalt
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">
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)">
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.