安卓版Chrome更新后系统导航栏背景色修改方法咨询

I’ve run into this exact annoying issue after Chrome updates—nothing ruins a polished dark-themed site faster than that bright white bar sticking out at the bottom. Here are the most reliable ways to force it to black, using meta tags and CSS tweaks:

1. Use Theme Color Meta Tags for Dark Mode Matching #

Chrome respects the theme-color meta tag for both the top address bar and bottom navigation bar when paired with color scheme media queries. Add these two tags to your <head> section:

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

This tells Chrome to switch the navigation bar to black whenever dark mode is active (either from the user’s system settings or your site’s theme). Just make sure your site properly signals its dark theme support to the browser (via CSS color-scheme properties or system preference detection).

2. Lock Navigation Bar to Black with color-scheme Meta Tag #

If your site is exclusively dark-themed and you don’t need light mode support, use this meta tag to force Chrome into dark mode for your site:

<meta name="color-scheme" content="dark only">

Chrome will automatically switch both the top address bar and bottom navigation bar to dark (black) when loading your page—no extra configuration needed.

3. Full-Screen Viewport + Safe Area Padding #

For sites with a full-bleed dark background, combining viewport-fit=cover with CSS safe area padding ensures the navigation bar inherits your site’s black background (and prevents content from being hidden under the bar):
First, update your viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Then add this CSS to your body or root container:

body {
  background-color: #000000;
  padding-bottom: env(safe-area-inset-bottom);
}

The navigation bar will appear semi-transparent, but since your site’s background is black, it’ll look fully black to users. The padding ensures your content stays visible above the bar.

Note: These methods work on Android Chrome version 85 and above. If you’re still seeing issues, double-check that Chrome is up to date, and that your site’s dark theme is properly implemented (Chrome needs to detect dark mode support to apply the matching navigation bar color).

内容的提问来源于stack exchange，提问作者Renzy