Color the mobile browser "bottom" / gesture bar: a practical how‑to

This post explains the realities and gives copy‑pasteable code so your site shows the color you want on modern Android and iOS devices.

posted by Pfp of vladSink

updated
Blog post featured image

Mobile browsers behave differently, and the area that contains touch gestures (the bottom bar) or the system UI can be influenced by meta tags, the page background and safe-area CSS. This post explains the realities and gives copy‑pasteable code so your site shows the color you want on modern Android and iOS devices.

TL;DR

  • Android Chrome & many Chromium browsers: set <meta name="theme-color" content="#HEX">. For progressive web apps (PWAs) also set theme_color and background_color in the web app manifest. You can also use a media attribute on the meta tag to support dark/light themes.
  • iOS Safari (including notch and home indicator area): use viewport-fit=cover + apple-mobile-web-app-status-bar-style meta tags, and set the page background-color and safe‑area paddings (env(safe-area-inset-*)). iOS doesn’t have a meta equivalent of theme-color, so the page background color behind the content is what shows under the home indicator.
  • PWAs / standalone apps: also rely on the web manifest's theme_color and background_color — when installed they control system UI colors in many cases.

1. Basic HTML head to control colors (copy/paste)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

  <!-- Android / Chromium browsers: sets the address bar & some system UI color -->
  <meta name="theme-color" content="#0b74de">
  <!-- Optional: different colors for light/dark modes -->
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0b74de" media="(prefers-color-scheme: dark)">

  <!-- iOS: allow content to extend to the edges & set status bar appearance -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <title>Example</title>
</head>
<body>
  <!-- your page -->
</body>
</html>

Notes

  • viewport-fit=cover is required for the CSS env(safe-area-inset-*) to work properly on iOS (so we can safely fill the notch/home indicator area).
  • apple-mobile-web-app-status-bar-style values: default, black, and black-translucent. black-translucent lets your page background show behind the status area; combined with viewport-fit=cover it helps color the edges.

2. CSS to reliably color the bottom gesture / home indicator area (iOS + general)

Use the env() safe-area variables and make sure the html and body background colors match the color you want to show in the bottom system area.

:root{
  --app-bg: #0b74de; /* pick your color */
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--app-bg);
  color: #fff;
}

/* Make sure content doesn't sit under the home indicator / gesture area */
.main-content {
  min-height: 100vh; /* keep page at least full height */
  padding-bottom: env(safe-area-inset-bottom); /* fallback handled below */
  padding-top: env(safe-area-inset-top);
}

/* Older iOS support (older implementations) */
@supports (padding: constant(safe-area-inset-bottom)){
  .main-content{
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

Why this matters

  • On iPhones with home indicator (no physical home button), Safari leaves a little translucent area at the bottom. iOS does not provide a theme-color meta tag — instead the page background is visible behind that area when you use viewport-fit=cover and black-translucent. So set the html/body background to the color you want the bottom area to show.

3. For Android PWAs and Chrome

  • Add a manifest.json with theme_color and background_color:
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b74de",
  "theme_color": "#0b74de",
  "icons": [ /* ... */ ]
}

  • Keep the <meta name="theme-color"> in your HTML as well — Chrome reads it for the toolbar color before install and respects it at runtime.

  • On some Android devices / OEM browsers (Samsung Internet, older Chromium builds), the bottom navigation/gesture area will inherit page or theme color — behavior can vary between OEM skins.

4. Dark mode friendly setup

Use multiple meta tags with a media attribute to set different theme-color values depending on prefers-color-scheme:

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

Also toggle your CSS --app-bg based on @media (prefers-color-scheme: dark) so the page background and the theme-color stay consistent.

5. Testing checklist

  1. Android (Chrome): open your page, look at the address bar color. Use different pages and scroll — Chrome may animate the address bar; theme-color affects the collapsed top bar.
  2. Android (Samsung Internet): test — Samsung often respects theme-color too.
  3. iOS (Safari): add viewport-fit=cover, open page, check bottom/home indicator area color. Test in both standard tab and after adding to Home Screen (standalone mode) — colors can differ.
  4. Install as PWA: when installed, check the standalone window's system bars — theme_color and manifest background_color are important here.
  5. Dark/light mode: toggle OS theme and check your media-based meta tags and CSS.

6. Common pitfalls & fixes

  • Issue: Bottom area still white on iPhone. Fixes: ensure viewport-fit=cover is present and html, body { background: YOUR_COLOR; }. Also verify apple-mobile-web-app-status-bar-style is black-translucent if you want the page background to show behind the status area.

  • Issue: Address bar animates and shows default color on scroll. Explanation: Chrome collapses the toolbar on scroll and sometimes animates to a different color; theme-color controls the collapsed color. Make sure theme-color is set and matches your page background.

  • Issue: Different OEM browsers behave differently. Fix: test on target devices; consider fallbacks and accept small differences between vendors.

7. Example: full minimal working demo

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#0b74de">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Bottom color demo</title>
  <style>
    :root{ --app-bg: #0b74de; }
    html,body{ height:100%; margin:0; background:var(--app-bg); color:#fff; }
    .main{ min-height:100vh; padding:16px; padding-bottom: env(safe-area-inset-bottom); box-sizing:border-box; }
  </style>
</head>
<body>
  <div class="main">
    <h1>Hello</h1>
    <p>The page background is the same color shown behind the home indicator on iOS and used for theme color on Android.</p>
  </div>
</body>
</html>

8. Final notes — what you can't control reliably

  • You cannot force OEM-specific system UI elements (manufacturer skins) to always match — some devices make their own adjustments.
  • iOS Safari will not honor a theme-color meta tag the same way Chrome does — rely on the page background + viewport-fit=cover there.

Comments

LogIn to leave a comment