Skip to content

Using theme-color Meta Tag

View on Twitter

💡 Use the theme-color meta tag to create a seamless experience between the browser interface and your site's top nav bar:

➡️ <meta name="theme-color" content="#dc3838">

Works on Android (Chrome, Brave, Samsung) and iOS (Safari 15), as well as on desktop! (macOS Safari 15)

Screenshot of maximorlov.com homepage on desktop showing a red top navigation bar with a smooth transition to, an equally red, browser interface.

Screenshot of maximorlov.com homepage on mobile showing a red top navigation bar with a smooth transition to, an equally red, mobile status bar.

You might also like

Programatically Check If System Requires Restart Read tip

Next.js or Gatsby? A Dynamic vs Static Choice Read tip

Public URLs for Your Local Server Read tip