Öffnen Sie manche Websites in Chrome auf dem Smartphone, färbt sich die Adressleiste in der Markenfarbe ein. Das wirkt hochwertig und stärkt den Wiedererkennungswert. Möglich macht das ein einziges Meta-Tag: theme-color.

Variante 1: Per Code in der functions.php

Fügen Sie diesen Code in die functions.php Ihres Child-Themes oder in ein Snippet-Plugin ein und ersetzen Sie den Farbwert durch Ihre Markenfarbe:

add_action( 'wp_head', function () {
    echo '<meta name="theme-color" content="#0b1033">';
} );

Variante 2: Unterschiedliche Farben für Hell- und Dunkelmodus

add_action( 'wp_head', function () {
    echo '<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">';
    echo '<meta name="theme-color" content="#0b1033" media="(prefers-color-scheme: dark)">';
} );

Variante 3: Über Theme oder Plugin

Einige Themes bieten im Customizer eine Option für die Browserfarbe. Auch SEO- und PWA-Plugins setzen das Tag oft automatisch.

Wo wirkt theme-color?

Am deutlichsten in Chrome auf Android. Auch Safari nutzt die Angabe je nach Version und Einstellung für die Darstellung der Leiste. Auf dem Desktop hat das Tag kaum Auswirkungen. Einen Nachteil gibt es nicht – es lohnt sich also für jede Website.