Safari桌面端暗黑模式下theme-color元标签无法设置地址栏颜色

问题分析 #

你使用带prefers-color-scheme媒体查询的theme-color meta标签设置Safari地址栏颜色时，亮色模式下#dc891c正常显示，但暗黑模式下该颜色失效，其他十六进制颜色可正常工作。这是因为Safari暗黑模式对部分颜色存在自动调整机制，#dc891c（橙黄色）的亮度或对比度触发了浏览器的自适应修正逻辑。

可行解决方案 #

1. 改用RGB/HSL颜色格式 #

将十六进制颜色转换为RGB或HSL格式，绕过Safari的颜色修正：

import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="theme-color" content="#dc891c" media="(prefers-color-scheme: light)" />
        {/* 改用RGB格式 */}
        <meta name="theme-color" content="rgb(220, 137, 28)" media="(prefers-color-scheme: dark)" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

2. 添加color-scheme元标签 #

明确告知浏览器网站支持亮色/暗黑双模式，避免模式识别冲突：

import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="color-scheme" content="light dark" />
        <meta name="theme-color" content="#dc891c" media="(prefers-color-scheme: light)" />
        <meta name="theme-color" content="rgb(220, 137, 28)" media="(prefers-color-scheme: dark)" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

3. 动态设置主题颜色（可选） #

如果使用了主题切换库（如next-themes），可以根据当前主题动态设置：

import Head from 'next/head';
import { useTheme } from 'next-themes';

export default function App({ Component, pageProps }) {
  const { theme } = useTheme();

  return (
    <>
      <Head>
        <meta name="theme-color" content={theme === 'dark' ? 'rgb(220, 137, 28)' : '#dc891c'} />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

验证方法 #

修改后重启Safari或强制刷新页面（Cmd+Shift+R），切换系统暗黑/亮色模式，检查地址栏颜色是否正常显示。

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