Edge浅色主题下Manifest V3扩展侧边栏显示深色的问题求助

我已将Microsoft Edge设置为浅色主题，但Manifest V3扩展的侧边栏仍显示为深色。我的Edge版本为MacOS平台的129.0.2792.65（正式版本）(arm64)。

我的Manifest V3配置代码 #

{
  "short_name": "sample",
  "name": "sample-edge-theme-ui",
  "description": "edge theme ui",
  "manifest_version": 3,
  "version": "1.0.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "permissions": [
    "storage",
    "activeTab",
    "sidePanel",
    "contextMenus",
    "scripting",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "prompts.json"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "32": "icon-32.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
  },
  "icons": {
    "16": "icon-16.png",
    "32": "icon-32.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  }
}

已尝试的无效方案 #

我曾尝试用以下CSS强制设置背景色，但没有效果：

html, body {
background: #fff
}

解决方案 #

方案1：继承Edge侧边栏的主题样式 #

Edge的侧边栏容器会自动跟随浏览器主题设置背景色，只需让扩展页面继承该样式即可：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: inherit;
}

方案2：适配系统颜色偏好的媒体查询 #

通过CSS媒体查询动态适配浅色/深色主题，确保样式跟随浏览器设置：

/* 浅色主题样式 */
@media (prefers-color-scheme: light) {
  html, body {
    background-color: #ffffff;
    color: #111827;
  }
}

/* 深色主题样式 */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #111827;
    color: #ffffff;
  }
}

/* 确保页面占满侧边栏 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

方案3：使用Edge内置主题变量 #

Edge提供了随主题切换的内置CSS变量，直接引用即可自动适配：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--edge-light-background);
  color: var(--edge-light-foreground);
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: var(--edge-dark-background);
    color: var(--edge-dark-foreground);
  }
}

方案4：JavaScript动态监听主题变化 #

通过监听系统颜色偏好变化，动态调整页面样式：

// 初始化应用主题
const updateTheme = (isLight) => {
  const body = document.body;
  body.style.backgroundColor = isLight ? '#ffffff' : '#111827';
  body.style.color = isLight ? '#111827' : '#ffffff';
};

// 初始检测
const themeQuery = window.matchMedia('(prefers-color-scheme: light)');
updateTheme(themeQuery.matches);

// 监听主题切换
themeQuery.addEventListener('change', (e) => {
  updateTheme(e.matches);
});

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