1. Mozilla
  2. 附加组件
  3. 浏览器扩展
  4. manifest.json
  5. theme

theme

类型 Object
必填 否
Manifest 版本 2 或更高
示例
json
"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "black"
  }
}

使用 theme 键定义要应用于 Firefox 的静态主题。

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

注意：自 2019 年 5 月起，主题需要签名才能安装（Firefox bug 1545109）。有关更多详细信息，请参阅对您的附加组件进行签名和分发。

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

图片格式

所有主题图片属性都支持以下图片格式

  • JPEG
  • PNG
  • APNG
  • SVG（Firefox 59 起支持动画 SVG）
  • GIF（不支持动画 GIF）

语法

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

名称 类型 描述
images Object

Firefox 60 起可选。Firefox 60 之前必填。

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

必填。

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

可选

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

images

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

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

名称 类型 描述
theme_frame String

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

注意：Chrome 将图像锚定到标题的左上角，如果图像未填充标题区域，则平铺图像。

桌面版 Firefox 60 及更高版本可选。Firefox for Android 必填。
additional_backgrounds Array of String

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

用于添加到标题区域并显示在 "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 数组。

在 Firefox for Android 中，颜色可以使用以下方式指定

  • 仅完整十六进制表示法，即 #RRGGBB。不支持透明度和缩写语法，例如 #RGB[A]。
  • 针对 Firefox 68.2 或更高版本的主题的函数表示法（RGB 数组）。

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

名称 描述
bookmark_text

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

注意：如果您使用 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.
侧边栏

侧边栏的背景颜色。

请参阅示例
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_text

侧边栏的文本颜色。

注意：确保所使用的颜色与 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

Array of String

可选

定义相应 "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

Array of String

可选

定义相应 "additional_backgrounds": 数组项重复方式的枚举值数组。选项包括

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

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

String

可选

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

  • "auto" – 根据主题自动选择亮或暗方案。
  • "light" – 亮方案。
  • "dark" – 暗方案。
  • "system" – 使用系统方案。

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

String

可选

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

  • "auto" – 根据主题自动选择亮或暗方案。
  • "light" – 亮方案。
  • "dark" – 暗方案。
  • "system" – 系统方案。

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

示例

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

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

可以使用多个图像填充标题。在 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": "white"
   }
 }

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

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

以下示例使用了 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 栏中将阅读模式图标与其他图标分隔开的白色垂直线。

浏览器兼容性

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 颜色形式。

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.