如何在Next.js/React.js中修改网站移动端状态栏颜色以匹配主题

一、Next.js 实现方案 #

1. 静态配置（全局固定颜色） #

在根布局文件（app/layout.js）或自定义_app.js中，通过next/head组件添加控制状态栏的meta标签，同时适配安卓和iOS设备：

import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        {/* iOS状态栏样式，可选值：default/black/black-translucent */}
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        {/* 安卓状态栏主题色，替换为你的主题色值 */}
        <meta name="theme-color" content="#2563eb" />
        {/* 允许内容延伸至状态栏区域，实现颜色无缝匹配 */}
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

2. 动态修改（随页面/主题切换） #

如果需要根据页面内容或主题模式实时调整状态栏颜色，可通过useEffect操作DOM修改meta标签：

'use client';
import { useEffect } from 'react';
import Head from 'next/head';

export default function DynamicStatusBarPage() {
  const themeColor = '#f97316'; // 可从状态/主题上下文获取实时颜色

  useEffect(() => {
    // 更新安卓状态栏颜色
    const themeMeta = document.querySelector('meta[name="theme-color"]');
    if (themeMeta) themeMeta.content = themeColor;
    
    // 根据颜色切换iOS状态栏样式
    const appleMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
    if (appleMeta) appleMeta.content = themeColor === '#ffffff' ? 'default' : 'black-translucent';
  }, [themeColor]);

  return (
    <>
      <Head>
        <meta name="theme-color" content="#2563eb" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
      </Head>
      <div>页面内容</div>
    </>
  );
}

二、React 通用实现方案 #

纯React项目的核心逻辑和Next.js一致，直接操作meta标签即可：

import { useEffect, useState } from 'react';

function App() {
  const [themeColor, setThemeColor] = useState('#2563eb');

  useEffect(() => {
    // 创建并插入安卓状态栏meta标签
    const themeMeta = document.createElement('meta');
    themeMeta.name = 'theme-color';
    themeMeta.content = themeColor;
    document.head.appendChild(themeMeta);

    // 创建并插入iOS状态栏meta标签
    const appleMeta = document.createElement('meta');
    appleMeta.name = 'apple-mobile-web-app-status-bar-style';
    appleMeta.content = themeColor.includes('fff') ? 'default' : 'black-translucent';
    document.head.appendChild(appleMeta);

    // 组件卸载时清理标签
    return () => {
      document.head.removeChild(themeMeta);
      document.head.removeChild(appleMeta);
    };
  }, [themeColor]);

  return (
    <div className="App">
      {/* 页面内容 */}
    </div>
  );
}

注意事项 #

• viewport-fit=cover是核心配置，它允许页面内容延伸到状态栏下方，避免出现空白区域
• iOS的apple-mobile-web-app-status-bar-style仅在用户将网站添加到主屏幕时生效
• 可配合媒体查询实现暗色模式自动切换：

@media (prefers-color-scheme: dark) {
  :root {
    --theme-color: #1e293b;
  }
}

内容的提问来源于stack exchange，提问作者Pastor J.G Seigle