Chrome扩展开发者工具面板适配主题背景色问题咨询

直接用Chrome官方开发者工具深色主题的原生背景色值就能完美匹配，不用自己反复调试：

• 深色主题主背景色：#1e1e1e
• 若要区分面板内次级区域（比如侧边栏、卡片），可用#2d2d30

实现步骤 #

方式一：直接通过JS切换样式

// 初始化时检查当前主题
const currentTheme = chrome.devtools.panels.themeName;
if (currentTheme === 'dark') {
  document.body.style.backgroundColor = '#1e1e1e';
  document.body.style.color = '#cccccc'; // 同步调整文本色避免看不清
}

// 监听主题切换事件（Chrome 84+支持）
chrome.devtools.panels.onThemeChanged.addListener((themeName) => {
  if (themeName === 'dark') {
    document.body.style.backgroundColor = '#1e1e1e';
    document.body.style.color = '#cccccc';
  } else {
    // 恢复浅色主题样式
    document.body.style.backgroundColor = '#ffffff';
    document.body.style.color = '#000000';
  }
});

方式二：用CSS变量结合JS（更优雅易维护）

先在CSS中定义主题变量：

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 10px;
}

再通过JS切换变量值：

function updateTheme(themeName) {
  const root = document.documentElement;
  if (themeName === 'dark') {
    root.style.setProperty('--bg-color', '#1e1e1e');
    root.style.setProperty('--text-color', '#cccccc');
  } else {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
  }
}

// 初始化主题样式
updateTheme(chrome.devtools.panels.themeName);
// 监听主题切换
chrome.devtools.panels.onThemeChanged.addListener(updateTheme);

注意：chrome.devtools.panels.onThemeChanged是Chrome 84及以上版本才支持的API，若需兼容更低版本，可定时检查themeName的变化，但目前主流Chrome版本都已支持该API。

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