Themed Omnibox

In order to give the user an experience more engaging, you should use the colors of your PWA in the browser's address bar as well.

PWA

Why set a theme color for the address bar?

In order to give the user an experience more engaging, you should use the colors of your PWA (Progressive Web App) in the browser's address bar as well (this function is supported in all browsers).

How the SeoChecker theme color audit is displayed

When a page does not use a theme to the address bar, SeoChecker will notify it.

SeoChecker looks for a theme_color property in the Web App Manifest, as well as a theme-color meta tag in the HTML of the page.

How can I set a theme color for the address bar?

1. For every page you want to personalize, add a theme-color meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#ECF3FF"/>
  …
</head>
…

2. To the Web App Manifest, add the theme_color property:

{
  "theme_color": "#ECF3FF"
  …
}