Meta tag <meta name=”theme-color”> pozwala kontrolować kolor elementów interfejsu przeglądarki (takich jak pasek adresu), szczególnie na urządzeniach mobilnych – działa w przeglądarkach opartych o Chromium, np. Google Chrome na Androidzie. Tag meta umieszczamy w sekcji head strony internetowej.
Poniżej przykład dla koloru #202020:
<meta name="theme-color" content="#202020" />
Poniżej zrzut ekranu:
Warto dodać do swoich projektów – tym bardziej, że jest to tylko jedna linia kodu. Chyba, że strona obsługuje tryb light/dark – wtedy dwie linie – można ustawić kolor per tryb za pomocą tagu media:
<meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#cccccc" media="(prefers-color-scheme: light)" />Bezpośrednio nie, ale poprawia estetykę strony mobilnej, co pośrednio może wpłynąć na zaangażowanie użytkowników.
Nie. Najlepsze wsparcie oferują przeglądarki Chromium (Chrome, Edge, Opera), szczególnie na Androidzie.
Tak. To drobny detal, który robi bardzo dobre wrażenie i zwiększa spójność interfejsu.
Dodaj komentarz