theme_experiment

类型 对象
必填 否
清单版本 2 或更高版本
示例
json
"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "popup_affordance": "--arrowpanel-dimmed"
  },
  "images": {
    "theme_toolbar": "--toolbar-bgimage"
  },
  "properties": {
    "toolbar_image_alignment":
    "--toolbar-bgalignment"
  }
}

此密钥启用 Firefox 接口的实验性 theme 密钥属性的定义。这些实验是提出将新主题功能纳入 Firefox 的先兆。实验通过以下方式进行

  • 创建定义 Firefox UI 元素的内部 CSS 选择器与任意 CSS 变量之间映射的样式表。然后，CSS 变量在 colors、images 和 properties 对象中映射到新的 theme 密钥属性。
  • （无样式表）使用 colors、images 和 properties 将内部 Firefox CSS 选择器（例如 --arrowpanel-dimmed）映射到新的 theme 密钥属性。此选项将实验限制为与内置 CSS 变量关联的 UI 组件。

要查找 Firefox UI 元素的 CSS 选择器或内部 Firefox CSS 变量，请使用 浏览器工具箱。

注意：此密钥仅可在 Firefox 开发者版和 Firefox Nightly 频道中使用，并且需要启用 extensions.experiments.enabled 首选项。在 Firefox 73 及更早版本中，必须改用 extensions.legacy.enabled。

警告：此功能为实验性功能，可能随时更改。

语法

theme_experiment 密钥是一个对象，它采用以下属性

名称 类型 描述
stylesheet 字符串

可选

提供 Firefox UI 元素 CSS 选择器到 CSS 变量映射的样式表的名称。
images 对象

可选

CSS 变量（在 Firefox 或 stylesheet 中定义的样式表中定义）到 images 属性名称的映射，用于 theme 密钥。
colors 对象

可选

CSS 变量（在 Firefox 或 stylesheet 中定义的样式表中定义）到 colors 属性名称的映射，用于 theme 密钥。
properties 对象

可选

CSS 变量（在 Firefox 或 stylesheet 中定义的样式表中定义）到 properties 属性名称的映射，用于 theme 密钥。

示例

此示例使用名为 style.css 的样式表来提供在 theme 密钥中设置浏览器重新加载按钮颜色的功能。

样式表定义

css
#reload-button {
  fill: var(--reload-button-color);
}

其中 #reload-button 是重新加载按钮的 Firefox 内部 CSS 选择器，--reload-button-color 是任意名称。

在 manifest.json 文件中，--reload-button-color 然后映射到要在 theme 的 colors 属性中使用的名称

json
"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "reload_button": "--reload-button-color"
  }
}

参数 reload_button 的使用方法与任何其他 theme 属性相同

json
"theme": {
  "colors": {
    "reload_button": "orange"
  }
}

这将使重新加载图标变成橙色。

Outcome of a theme experiment, showing the reload button colored orange.

此属性也可用于 browser.theme.update()。images 和 properties 的工作方式类似于 colors。

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。