如何让Google Chrome自定义主题适配系统明暗模式？

一、静态manifest基础适配（有限支持） #

虽然官方文档未明确说明，但Chrome允许在manifest.json的theme字段中，通过数组格式定义颜色值实现基础明暗适配：

• 对需要随系统切换的颜色，用[亮色值, 暗色值]的格式声明，Chrome会自动根据系统配色方案选择对应值。
• 示例配置：

{
  "manifest_version": 3,
  "name": "明暗适配自定义主题",
  "version": "1.0",
  "theme": {
    "colors": {
      "toolbar": ["#ffffff", "#1a1a1a"],
      "toolbar_text": ["#000000", "#ffffff"],
      "frame": ["#f0f0f0", "#2d2d2d"],
      "tab_background_text": ["#333333", "#eeeeee"],
      "bookmark_text": ["#333333", "#eeeeee"]
    },
    "tints": {
      "buttons": [0.5, 0.5, 0.5]
    }
  }
}

注意：这种静态方式仅支持核心颜色字段，不同Chrome版本存在兼容性差异。

二、动态脚本实现完整适配（推荐） #

若需要更灵活的适配逻辑，可通过扩展后台脚本监听系统配色变化，动态切换主题配置：

1. 在manifest.json中声明必要权限与后台脚本：

{
  "manifest_version": 3,
  "name": "智能明暗主题",
  "version": "1.0",
  "permissions": ["theme"],
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写background.js实现监听与切换逻辑：

// 初始化时匹配系统主题
setThemeBySystemScheme();

// 监听系统配色方案变化
chrome.system.display.onColorSchemeChanged.addListener(() => {
  setThemeBySystemScheme();
});

// 根据系统配色设置主题
function setThemeBySystemScheme() {
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  
  const themeConfig = isDark ? {
    colors: {
      toolbar: "#1a1a1a",
      toolbar_text: "#ffffff",
      frame: "#2d2d2d",
      tab_background_text: "#eeeeee",
      bookmark_text: "#eeeeee"
    },
    images: {
      theme_toolbar: "toolbar_dark.png"
    }
  } : {
    colors: {
      toolbar: "#ffffff",
      toolbar_text: "#000000",
      frame: "#f0f0f0",
      tab_background_text: "#333333",
      bookmark_text: "#333333"
    },
    images: {
      theme_toolbar: "toolbar_light.png"
    }
  };

  chrome.theme.update(themeConfig);
}

这种方式可完全控制所有主题元素，包括自定义图片、精细颜色调整，适配所有Chrome主题支持的字段。

注意事项 #

• 必须使用Manifest V3，V2已逐步被淘汰。
• 动态方案需声明theme权限，后台服务工作者需正确注册。
• 静态数组格式仅在部分Chrome版本生效，优先推荐动态脚本方案保证兼容性。

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