Firefox 选择深色/浅色主题的页面操作图标

标签 firefox themes firefox-addon-webextensions firefox-quantum

我正在编写一个适用于 Firefox 的网络扩展程序。我希望我的图标的工作方式类似于“截取屏幕截图”中内置的 Firefox 的行为。屏幕截图图标在浅色主题/深色主题/菜单中显示时以不同颜色显示。

我刚刚添加了一个 page_action在 list 中,并为其设置一个图标。黑色图标在浅色主题上看起来不错,但在深色主题上变得难以使用。如果浏览器处于深色主题,我想显示浅色版本的图标(并且还将菜单中的图标保持为黑色)。

我搜索了一些关于这个的东西,并找到了 browser_action支持 theme_icons但是 page_action不是。

为页面操作图标的不同用例设置不同图标的最佳实践是什么?

enter image description here

为不同主题配置不同图标颜色的最佳方法是什么?

最佳答案

经过更多的谷歌搜索,我发现这是通过添加 fill="context-fill" fill-opacity="context-fill-opacity" 的截图插件来实现的。在 <svg>标签,并使用 svg 作为图标。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
  <path d="m0 0 H 16 V 16 H 0 Z"/>
</svg>

但不幸的是,此功能仅在 mozilla 签名的扩展程序上默认启用。所以这个不能用 在用户定义的扩展上。

查看 bugzilla 了解更多详情:
  • Bug 1377302 - Support fill="context-fill" for mozilla-signed WebExtension icons
  • 关于Firefox 选择深色/浅色主题的页面操作图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48540523/

    相关文章:

    javascript - 如何使用 Greasemonkey 脚本防止 Firefox 中的页面缓存

    javascript - 唯一的选择是将该代码块包含到我的每个函数中?

    themes - ajaxcontroltoolkit tabcontainer 样式主题 css

    html - 在 Keycloak 的自定义主题中引用字体

    php - 自定义 wordpress 主题

    ubuntu - 后台脚本中的 window.state = 'fullscreen' 应该可以工作吗?

    python - RaspberryPi3 上的 WebDriverException : Message: invalid argument: can't kill an exited process with GeckoDriver, Selenium 和 Python

    javascript - Firefox 后退按钮仅在第一次有效,第二次无效

    javascript - 可以使用 WebExtensions 将文件保存到绝对路径吗?

    javascript - 浏览器扩展可以覆盖 CSS 媒体功能/查询吗?