Jak strony internetowe zmieniają kolor górnego paska systemowego w Androidzie?

CSS Html JavaScript Webmastering css, darkmode, html, meta, tlo admin 26 listopada 2025 0 Komentarze

Jak strony internetowe zmieniają kolor górnego paska systemowego w Androidzie?

Strony zmieniają kolor **status bara** za pomocą znacznika:

<meta name="theme-color" content="#ff0000">

1	<meta name="theme-color" content="#ff0000">

Jak to działa?

* W Chrome/Edge/Android Browser, jeśli strona ma <meta name="theme-color">, system automatycznie zmienia kolor status bara na podany w content.
* Działa to zarówno w trybie zwykłym, jak i po dodaniu strony do ekranu głównego (PWA).
* Można dynamicznie zmieniać ten kolor w JavaScript, np.:

Efekt działań na przykładzie naszej strony firmowej:

<script>
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#00cc99');
</script>

1

2

3

document.querySelector('meta[name="theme-color"]').setAttribute('content', '#00cc99');

</script>

Możesz też ustawić osobny kolor dla light/dark mode:

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

1 2	<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">