主题

类型 对象
必选 否
清单版本 2 或更高
示例
json
"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "#000"
  }
}

使用 theme 键来定义一个静态主题，应用于 Firefox。

注意：如果您想将主题包含在扩展中，请参阅 theme API。

注意：自 2019 年 5 月起，主题需要进行签名才能安装 (Firefox 错误 1545109)。请参阅 签名和分发您的附加组件 获取更多详细信息。

注意：基于 GeckoView 的 Android 版 Firefox 新版本正在开发中。一个 预发布版本 可供使用。预发布版本不支持主题。

图像格式

以下图像格式在所有主题图像属性中受支持

  • JPEG
  • PNG
  • APNG
  • SVG（动画 SVG 从 Firefox 59 开始支持）
  • GIF（不支持动画 GIF）

语法

theme 键是一个对象，它接受以下属性

名称 类型 描述
images 对象

从 Firefox 60 开始可选。在 Firefox 60 之前是必需的。

一个 JSON 对象，其属性表示要在浏览器的不同部分显示的图像。有关此对象可以包含的属性的详细信息，请参阅 images。
colors 对象

必需的。

一个 JSON 对象，其属性表示浏览器的不同部分的颜色。有关此对象可以包含的属性的详细信息，请参阅 colors。
properties 对象

可选

此对象具有影响 "additional_backgrounds" 图像显示方式和颜色方案应用方式的属性。有关此对象可以包含的属性的详细信息，请参阅 properties。

images

所有 URL 相对于 manifest.json 文件，不能引用外部 URL。

图像高度应为 200 像素，以确保它们始终垂直填充标题空间。

名称 类型 描述
theme_frame 字符串

要添加到标题区域并固定在标题区域右上角的前景图像的 URL。

注意：Chrome 将图像固定在标题的左上角，如果图像没有填充标题区域，则会平铺图像。

在桌面版 Firefox 60 及更高版本中可选。在 Android 版 Firefox 中是必需的。
additional_backgrounds Array of String

警告：additional_backgrounds 属性是实验性的。它目前在 Firefox 的发行版中被接受，但其行为可能会发生变化。它在 Android 版 Firefox 中不受支持。

用于将其他背景图像添加到标题区域并在 "theme_frame": 图像后面显示的 URL 数组。这些图像将数组中的第一个图像层叠在顶部，将数组中的最后一个图像层叠在底部。

可选的。

默认情况下，所有图像都固定在标题区域的右上角，但它们的排列和重复行为可以通过 "properties": 的属性进行控制。

colors

这些属性定义了用于浏览器的不同部分的颜色。它们都是可选的。这些属性如何影响 Firefox UI，如下所示

Overview of the color properties and how they apply to Firefox UI components

注意：当某个组件受多个颜色属性影响时，这些属性按优先级顺序排列。

所有这些属性都可以指定为包含任何有效 CSS 颜色字符串（包括十六进制）的字符串，或者为 RGB 数组，例如 "tab_background_text": [ 107 , 99 , 23 ]。

注意：在 Chrome 中，颜色只能指定为 RGB 数组。

在 Android 版 Firefox 中，可以使用

  • 完整的十六进制表示法，即 #RRGGBB 仅。alpha 和简写语法，如 #RGB[A]，不受支持。
  • 函数表示法（RGB 数组），用于面向 Firefox 68.2 或更高版本的主题。

Android 版 Firefox 主题的颜色不能使用颜色名称指定。

名称 描述
bookmark_text

书签和查找栏中文本和图标的颜色。此外，如果未定义 tab_text，则它会设置活动选项卡文本的颜色，如果未定义 icons，则会设置工具栏图标的颜色。作为 Chrome 兼容别名提供，用于 toolbar_text。

注意：确保使用的任何颜色与 frame 和 frame_inactive 中使用的颜色或 toolbar（如果您使用该属性）形成良好对比。

在未定义 icons 的情况下，还要确保与 button_background_active 和 button_background_hover 形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "tab_text": "white",
    "toolbar": "black",
    "bookmark_text": "red"
  }
}

Browser Firefox is black. Browser's tab is black with white text. URL bar and the find in page bar are white with black text but all the browser and the find in page bar icons are red.

button_background_active

已按下工具栏按钮的背景颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_active": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The customize toolbar icon in the url bar in white with a red background is pressed and a popup is open displaying a short list of thing to add to the toolbar such as the browser's library and the sidebars.

button_background_hover

鼠标悬停在工具栏按钮上的背景颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_hover": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The go back one page icon is white with a red circle background.

icons

工具栏图标的颜色，不包括查找工具栏中的图标。

注意：确保使用的颜色与 frame、frame_inactive、button_background_active 和 button_background_hover 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The URL bar and open a new tab icons are red. The red icons contrast well with the black background color of the header area.

icons_attention

工具栏图标在关注状态下的颜色，例如加星标书签图标或已完成下载图标。

注意：确保使用的颜色与 frame、frame_inactive、button_background_active 和 button_background_hover 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons_attention": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The bookmark this page icon is red and pressed, an open popup name edit this bookmark is displayed. While in attention state, the toolbar icons contrast well with the black background of the header area.

frame

标题区域背景的颜色，显示在 "theme_frame" 和 "additional_backgrounds" 中指定的图像未覆盖或可见的部分。

参见示例
json
"theme": {
  "colors": {
     "frame": "red",
     "tab_background_text": "white"
  }
}

Browser firefox is red with white text. Browsers tabs are lighter red, also with white text. URL bar is very light red with black text

frame_inactive

浏览器窗口处于非活动状态时标题区域背景的颜色，显示在 "theme_frame" 和 "additional_backgrounds" 中指定的图像未覆盖或可见的部分。

参见示例
json
"theme": {
  "colors": {
     "frame": "red",
     "frame_inactive": "gray",
     "tab_text": "white"
  }
}

Browser firefox is grey. Browser's tabs and URL bar are lighter grey. The tab text is white and the URL bar icon are darker grey.

ntp_background

新标签页的背景颜色。

参见示例
json
"theme": {
  "colors": {
     "ntp_background": "red"
  }
}

Firefox showing a new tab page. The background of the page is red.

ntp_card_background

新标签页卡片的背景颜色。

参见示例
json
"theme": {
  "colors": {
     "ntp_card_background": "red"
  }
}

Firefox showing a new tab page. On the page, the background to the search bar and shortcut buttons is red.

ntp_text

新标签页的文本颜色。

注意：确保使用的颜色与 ntp_background 和 ntp_card_background 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "ntp_text": "red"
  }
}

Firefox showing a new tab page. On the page, the text is in red.

popup

弹出窗口的背景颜色（例如 URL 栏下拉菜单和箭头面板）。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. The bookmark this page icon is blue and pressed, an open popup name 'edit this bookmark' is displayed with a red background. The background color of the popup is red.

popup_border

弹出窗口的边框颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. The bookmark this page icon is blue and pressed, an open popup name 'edit this bookmark' is displayed with a red outline and black background. The popup's border is red.

popup_highlight

弹出窗口内使用键盘突出显示的项目的背景颜色（例如选定的 URL 栏下拉菜单项）。

注意：建议定义 popup_highlight_text 来覆盖不同平台上的浏览器默认文本颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "red",
     "popup_highlight_text": "white"
  }
}

screenshot of firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with a highlighted item's background in red. The background color of the highlighted item inside the popup is red.

popup_highlight_text

弹出窗口内突出显示项目的文本颜色。

注意：确保使用的颜色与 popup_highlight 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with a highlighted item's text in red with a black background. The text color of the highlighted item contrasts well with the black background color of this item.

popup_text

弹出窗口的文本颜色。

注意：确保使用的颜色与 popup 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with items texts in red. The text color contrasts well with the black background color of the popup.

sidebar

侧边栏的背景颜色。

参见示例
json
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

A close-up screenshot of a browser windows's open sidebar. The background color of the sidebar is red.

sidebar_border

浏览器侧边栏的边框和分隔符颜色

参见示例
json
"theme": {
  "colors": {
     "sidebar_border": "red"
  }
}

A closeup of the firefox browser bookmarks sidebar with a red horizontal separator between the sidebar title and the sidebar menu. The border and splitter color of the sidebar is red.

sidebar_highlight

内置侧边栏中突出显示行的背景颜色

参见示例
json
"theme": {
  "colors": {
     "sidebar_highlight": "red",
     "sidebar_highlight_text": "white"
  }
}

A closeup of the firefox browser bookmarks sidebar with a highlighted item. The background color of a highlighted row in the sidebar is red with white text.

sidebar_highlight_text

侧边栏中突出显示行的文本颜色。

注意：确保使用的颜色与 sidebar_highlight 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "sidebar_highlight": "pink",
    "sidebar_highlight_text": "red",
  }
}

A closeup of the firefox browser bookmarks sidebar with a highlighted item. The color of the text of a highlighted row in the sidebar is red. The text color contrasts well with the pink background color of the highlighted row.

侧边栏文本

侧边栏的文本颜色。

注意: 确保所使用的颜色与 sidebar 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

A close-up screenshot of a browser windows's open sidebar. The color of the text inside the sidebar is white. The text color contrasts well with the red background of the sidebar.

tab_background_separator

警告: 从 Firefox 89 开始，tab_background_separator 不再受支持。

背景标签的垂直分隔线的颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_background_separator": "red"
  }
}

A closeup of browser tabs to highlight the separator.

tab_background_text

非活动页面标签中显示的文本颜色。如果未指定 tab_text 或 bookmark_text，则适用于活动标签文本。

注意: 确保所使用的颜色与 tab_selected 或 frame 和 frame_inactive 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "tab_background_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are white with red icons and red text. The color of the text in the open tab is red. The text color contrasts well with the black background color of the tab.

tab_line

选中标签线的颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_line": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are darker grey with lighter grey icons and white text. The selected tab has a red outline.

tab_loading

标签加载指示器和标签加载突出的颜色。

参见示例
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_loading": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are darker grey with icons and text in white. Inside the selected tab an animated loading indicator is red.

tab_selected

选中标签的背景颜色。当不使用时，选中标签颜色由 frame 和 frame_inactive 设置。

参见示例
json
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are darker grey with icons and text in white. The selected tab has red background and white text.

tab_text

从 Firefox 59 开始，它代表选中标签的文本颜色。如果未指定 tab_line，它还定义选中标签线的颜色。

注意: 确保所使用的颜色与 tab_selected 或 frame 和 frame_inactive 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

Browser firefox has a picture of an insect theme. URL bar is lighter grey with white icons. The selected tab text is red with white background.

toolbar

导航栏、书签栏和选中标签的背景颜色。

这也设置了“查找”栏的背景颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "red",
    "tab_background_text": "white"
  }
}

Browser firefox is black. Browser's tab, find in page bar and URL bar are red with white text and icons, except for the find in page bar where the text and icon are black.

toolbar_bottom_separator

将工具栏底部与下方区域分隔的线条颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_bottom_separator": "red"
  }
}

Browser firefox is black. Browser's tab and URL bar are lighter grey with white text and icons. A horizontal red line separates the bottom of the toolbar and the beginning of the display of the web page.

toolbar_field

工具栏中字段的背景颜色，例如 URL 栏。

这也设置了 页面内查找 字段的背景颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_field": "red"
  }
}

Browser firefox is black. Browser's tab, find in page bar and URL bar are lighter grey with white text and icons. The background color of the URL bar is red. The find in page bar is white with black text. The find in page field is red with black text.

toolbar_field_border

工具栏中字段的边框颜色。

这也设置了 页面内查找 字段的边框颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}

Browser firefox is black. Browser's tab, find in page and URL bar are black with white text and icons. The URL bar and find in page fields are outlined in red.

toolbar_field_border_focus

工具栏中字段的聚焦边框颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}

Browser firefox is black. Browser's tab and URL bar are black with white text and icons. The url bar field is focused and outlined in red.

toolbar_field_focus

工具栏中字段的聚焦背景颜色，例如 URL 栏。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}

Browser firefox is black. Browser's tab, find in page and URL bar are black with white text and icons. The background color of the focused URL bar is red and the text is white.

toolbar_field_highlight 用于指示 URL 栏中当前文本选择（以及搜索栏，如果将其配置为单独的栏）的背景颜色。
参见示例
json
"theme": {
  "colors": {
    "toolbar_field": "rgb(255 255 255 / 91%)",
    "toolbar_field_text": "rgb(0 100 0)",
    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
    "toolbar_field_highlight_text": "rgb(0 80 0)"
  }
}

Browser firefox is white. Browser's tab and URL bar are white with text and icons in black. The URL bar field is focused and outlined in blue and URL bar text is selected.

在此，toolbar_field_highlight 字段指定突出显示颜色为浅绿色，而文本使用 toolbar_field_highlight_text 设置为深到中等绿色。
toolbar_field_highlight_text

用于绘制 URL 栏中当前选择的文本（以及搜索栏，如果将其配置为单独的框）的颜色。

注意: 确保所使用的颜色与 toolbar_field_highlight 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "toolbar_field": "rgb(255 255 255 / 91%)",
    "toolbar_field_text": "rgb(0 100 0)",
    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
    "toolbar_field_highlight_text": "rgb(0 80 0)"
  }
}

Browser firefox is white. Browser's tab and URL bar are white with text and icons in black. The URL bar field is focused and outlined in blue and URL bar text is selected.

在此，toolbar_field_highlight_text 字段用于将文本颜色设置为深中等绿色，而突出显示颜色为浅绿色。
toolbar_field_separator

警告: 从 Firefox 89 开始，toolbar_field_separator 不再受支持。

URL 栏内分隔符的颜色。在 Firefox 58 中，它被实现为 toolbar_vertical_separator。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser firefox is black. Browser's tab and URL bar are black with text and icons in white. Inside the white URL bar field, after the reader mode icon a red vertical line separating the rest of URL bar icons. The color of the vertical separator line inside the URL bar is red.

在此屏幕截图中，"toolbar_vertical_separator" 是 URL 栏中的红色垂直线，将阅读器模式图标与其他图标隔开。
toolbar_field_text

工具栏中字段中文本的颜色，例如 URL 栏。这也设置了 页面内查找 字段中文本的颜色。

注意: 确保所使用的颜色与 toolbar_field 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with white text and icons. The text inside the URL bar is red. The icons and find in page field have red text with black background.

toolbar_field_text_focus

工具栏中聚焦字段中文本的颜色，例如 URL 栏。

注意: 确保所使用的颜色与 toolbar_field_focus 中使用的颜色形成良好对比。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}

A screenshot of a browser window with two open tabs. Browser is black. Browser's tab and URL bar are black with text and icons in white. The URL bar has focus; the bar's text and icons are red with black background.

toolbar_text

工具栏文本的颜色。这也设置了“查找”栏中文本的颜色。

注意: 为了与 Chrome 兼容，请使用别名 bookmark_text。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab, find in page bar, and URL bar are black with red text and icons. The text inside the active tab, the navigator bar and the find bar is red.

toolbar_top_separator

将工具栏顶部与上方区域分隔的线条颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with white text and icons. A red line separates the top of the URL bar from the browser.

toolbar_vertical_separator

书签工具栏中分隔符的颜色。在 Firefox 58 中，它对应于 URL 栏内分隔符的颜色。

参见示例
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with text and icons in white. The color of the vertical line separating the bookmarks toolbar from the content to the right is red.

别名

此外，此键接受各种属性，这些属性是上述属性之一的别名。这些别名是为了与 Chrome 兼容而提供的。如果给出了别名，并且也给出了非别名版本，则将从非别名版本获取值。

名称 别名
bookmark_text toolbar_text

properties

名称 类型 描述
additional_backgrounds_alignment

String 的 Array

可选

一个枚举值数组，定义对应 "additional_backgrounds": 数组项的对齐方式。
对齐选项包括

  • "bottom"
  • "center"
  • "left"
  • "right"
  • "top"
  • "center bottom"
  • "center center"
  • "center top"
  • "left bottom"
  • "left center"
  • "left top"
  • "right bottom"
  • "right center"
  • "right top".

如果未指定，则默认为 "right top"。
additional_backgrounds_tiling

String 的 Array

可选

一个枚举值数组，定义对应 "additional_backgrounds": 数组项如何重复。选项包括

  • "no-repeat"
  • "repeat"
  • "repeat-x"
  • "repeat-y"

如果未指定，则默认为 "no-repeat"。
color_scheme

字符串

可选

确定将哪种颜色方案应用于 chrome（例如，上下文菜单）和内容（例如，内置页面和网页的首选颜色方案）。选项包括

  • "auto" – 基于主题自动选择的浅色或深色方案。
  • "light" – 浅色方案。
  • "dark" – 深色方案。
  • "system" – 使用系统方案。

如果未指定，则默认为 "auto"。
content_color_scheme

字符串

可选

确定将哪种颜色方案应用于内容（例如，内置页面和网页的首选颜色方案）。覆盖 color_scheme。选项包括

  • "auto" – 基于主题自动选择的浅色或深色方案。
  • "light" – 浅色方案。
  • "dark" – 深色方案。
  • "system" – 系统方案。

如果未指定，则默认为 "auto"。

示例

基本主题必须定义一个添加到标题的图像、标题中使用的强调色以及标题中使用的文本颜色

json
 "theme": {
   "images": {
     "theme_frame": "images/sun.jpg"
   },
   "colors": {
     "frame": "#CF723F",
     "tab_background_text": "#000"
   }
 }

可以使用多个图像来填充标题。在 Firefox 60 版本之前，使用空白或透明的标题图像以控制每个附加图像的放置

json
 "theme": {
   "images": {
     "additional_backgrounds": [ "images/left.png", "images/middle.png", "images/right.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "left top", "top", "right top"]
   },
   "colors": {
     "frame": "blue",
     "tab_background_text": "#ffffff"
   }
 }

您也可以使用重复的图像或图像来填充标题，在这种情况下，单个图像锚定在标题的中间顶部，并在标题的其余部分重复

json
 "theme": {
   "images": {
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "frame": "green",
     "tab_background_text": "#000"
   }
 }

以下示例使用 theme.colors 的大多数不同值

json
  "theme": {
    "images": {
      "theme_frame": "weta.png"
    },

    "colors": {
       "frame": "darkgreen",
       "tab_background_text": "white",
       "toolbar": "blue",
       "bookmark_text": "cyan",
       "toolbar_field": "orange",
       "toolbar_field_border": "white",
       "toolbar_field_text": "green",
       "toolbar_top_separator": "red",
       "toolbar_bottom_separator": "white",
       "toolbar_vertical_separator": "white"
    }
  }

它将为您提供一个看起来像这样的浏览器

A browser window with two open tabs and dark green background color in the header area. The inactive tab has a white text color. The active tab and the toolbar have a blue background color with cyan-colored text. The URL bar has an orange background with white borders, a green text color and a white-colored vertical line separator. A red-colored line is used to separate the tabs on the top and a white line to separate the tabs from the content bellow them.

在此屏幕截图中，"toolbar_vertical_separator" 是 URL 栏中的白色垂直线，将阅读器模式图标与其他图标隔开。

浏览器兼容性

BCD 表只在浏览器中加载

Chrome 兼容性

在 Chrome 中

  • colors/toolbar_text 不使用，请改用 colors/bookmark_text。
  • images/theme_frame 将图像锚定到标题的左上角，如果图像没有填充标题区域，则平铺图像。
  • 所有颜色必须指定为 RGB 值数组，例如
    json
    "theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}
    从 Firefox 59 开始，所有属性都接受数组形式和 CSS 颜色形式。在此之前，colors/frame 和 colors/tab_background_text 需要数组形式，而其他属性需要 CSS 颜色形式。