根据浅色或深色模式浏览器切换 Chrome 扩展程序图标？

Question

我尝试过搜索这个，我能找到的

最接近的相关问题是3年前的事情，并且与隐身窗口是黑暗的有关，而当时普通的镀铬窗口是浅色的。

现在我们已经能够拥有浅色或深色模式浏览器，但很难找到适合浅色和深色模式的图标设计和颜色。这是一个例子：

在上图中，您可以看到第一个和第三个图标是黑色的，因此在使用深色模式时很难看到它们。中间的图标（我用于扩展程序的图标）在深色模式下看起来很棒，但在浅色模式下看起来很糟糕。见下图：

那么有人知道是否有办法检测浏览器模式（浅色或深色）并更换图标？

Answer 1

感谢

wOxxOm我能够弄清楚这一点。

首先，我需要创建一个内容脚本（我称之为

toggleIcon.js

）并将其添加到 

manifist.json file

。

然后我将以下内容添加到

toggleIcon.js

 - 如果 

scheme: "dark"

 与 

window.matchMedia

 匹配，则将 

prefers-color-scheme: dark

 发送到我的 background.js 文件。 

然后在我的

background.js

 文件中监听该消息，如果 

request.scheme == "dark"

 我使用 

chrome.broserAction.setIcon

 将每个图标的路径更改为深色版本。

这有效地覆盖了我在

manifest.json

 文件中声明的原始图标路径（如下所示）。

我看到的唯一缺点是这需要一个

content_script

，如果您希望您的扩展程序在任何页面上运行，则需要您还向您的扩展程序添加 

"matches": ["<all_urls>"]

，这会减慢审批过程。这就是为什么在上面的评论中我提到我一直在避免使用 content_script。

另外，我认为使用在浅色模式下效果最好的图标版本作为默认版本是有意义的，因为我认为 chrome 扩展页面将从这些图标中提取它们使用的某些图标（并且该页面有一个白色背景）。作为示例，这是我的旧图标的外观（对比度不够）。

希望这对其他人有帮助！

Answer 2

这是一个更好的解决方案，根本不需要内容脚本。在你的

background.js

:

window.matchMedia('(prefers-color-scheme: dark)').addeListener('change', e => {
    const iconVariant = e.matches ? "-white" : "";

    browser.browserAction.setIcon({
        path: {
            16: `icons/icon${iconVariant}-16.png`,
            32: `icons/icon${iconVariant}-32.png`,
            48: `icons/icon${iconVariant}-48.png`,
            128: `icons/icon${iconVariant}-128.png`
        },
    });
});