如何在Chrome扩展SidePanel中获取浏览器主题颜色？

核心思路：利用Chrome原生CSS变量与主题API #

Chrome为扩展侧边栏提供了原生样式支持，无需手动获取颜色值就能同步浏览器主题，同时也可通过API获取精细配色信息。

1. 直接引用Chrome内置CSS变量 #

默认侧边栏（如阅读列表）的样式依赖Chrome自动注入的CSS变量，你只需在扩展侧边栏的CSS中直接使用这些变量，就能实现样式对齐：

/* 侧边栏容器基础样式 */
.side-panel-container {
  background-color: var(--color-background);
  color: var(--color-foreground);
  border-color: var(--color-border);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

/* 交互元素hover状态 */
.side-panel-item:hover {
  background-color: var(--color-hover);
  border-radius: 4px;
}

常用的内置变量包括：

• --color-background：侧边栏背景色
• --color-foreground：文本默认颜色
• --color-primary：主交互色（如链接、按钮激活态）
• --color-border：分隔线/边框颜色
• --color-hover：元素hover时的背景色

2. 通过chrome.themeAPI获取精细配色 #

如果需要更精准的样式控制，可使用Chrome主题API获取当前主题的所有配色，需先在manifest.json中声明权限：

// manifest.json
{
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["theme"],
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "manifest_version": 3
}

然后在侧边栏JS中获取并应用颜色：

// sidepanel.js
chrome.theme.getCurrent().then(theme => {
  // 应用浏览器框架背景色到侧边栏
  document.body.style.backgroundColor = theme.colors.frame;
  // 应用标签栏文本颜色到侧边栏文本
  document.body.style.color = theme.colors.tab_background_text;
});

theme.colors包含了主题的全量配色项，比如toolbar对应工具栏背景色、bookmark_text对应书签文本色等，可按需调用。

3. 还原默认侧边栏的布局与交互细节 #

除颜色外，默认侧边栏的布局间距也有固定规范，参考以下CSS还原：

.side-panel-container {
  margin: 0;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.side-panel-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

解决DevTools无法检查默认侧边栏的问题 #

Chrome默认侧边栏属于浏览器内部UI，常规DevTools无法直接检查，可启用内部调试工具：

• 在地址栏输入chrome://inspect/#other
• 找到Side Panel相关条目，点击inspect即可打开专属DevTools查看默认侧边栏的样式结构

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