path: root/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html

---
title: theme
slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme
tags:
  - Add-ons
  - Themes
translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme
---
<div>{{AddonSidebar}}</div>

<div class="note">
<p id="Image_formats">Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in <a href="https://github.com/mozilla/addons/issues/501">https://github.com/mozilla/addons/issues/501</a>. If you want to share a theme with other users, you'll need to make it either a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> or a <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme">dynamic theme</a>.</p>
</div>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <th scope="row" style="width: 30%;">型</th>
   <td><code>Object</code></td>
  </tr>
  <tr>
   <th scope="row">必須</th>
   <td>いいえ</td>
  </tr>
  <tr>
   <th scope="row">例</th>
   <td>
    <pre class="brush: json no-line-numbers">
"theme": {
  "images": {
    "headerURL": "images/sun.jpg"
  },
  "colors": {
    "accentcolor": "#CF723F",
    "textcolor": "#000"
  }
}</pre>
   </td>
  </tr>
 </tbody>
</table>

<p>theme キーを使って Firefox に適用する静的なテーマを定義します。</p>

<div class="note">
<p>If your manifest.json file includes the theme key, the extension is assumed to be a theme and any other WebExtension keys are ignored. If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.</p>
</div>

<h2 id="Image_formats" name="Image_formats">画像フォーマット</h2>

<p>下記の画像フォーマットはすべての画像プロパティでサポートされています:</p>

<ul>
 <li>JPEG</li>
 <li>PNG</li>
 <li>APNG</li>
 <li>SVG (アニメSVG は Firefox 59からサポートされています)</li>
 <li>GIF (アニメ GIF はサポートされません)</li>
</ul>

<h2 id="Syntax" name="Syntax">構文</h2>

<p>theme キーは次のプロパティを取るオブジェクトです:</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">名前</th>
   <th scope="col">型</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>images</code></td>
   <td><code>Object</code></td>
   <td>
    <p>Firefox 60 以降ではオプション。Firefox 60より前では必須。</p>

    <p>A JSON object whose properties represent the images to display in various parts of the browser. See <code><a href="/ja/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> for details on the properties that this object can contain.</p>
   </td>
  </tr>
  <tr>
   <td><code>colors</code></td>
   <td><code>Object</code></td>
   <td>
    <p>必須。</p>

    <p>A JSON object whose properties represent the colors of various parts of the browser. See <code><a href="/ja/Add-ons/WebExtensions/manifest.json/theme#colors">colors</a></code> for details on the properties that this object can contain.</p>
   </td>
  </tr>
  <tr>
   <td><code>properties</code></td>
   <td><code>Object</code></td>
   <td>
    <p>オプション</p>

    <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/ja/Add-ons/WebExtensions/manifest.json/theme#properties">properties</a></code> for details on the properties that this object can contain.</p>

    <ul>
     <li><code>"additional_backgrounds_alignment":</code> an array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
      The alignment options include: <code>"bottom"</code>, <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"center bottom"</code>, <code>"center center"</code>, <code>"center top"</code>, <code>"left bottom"</code>, <code>"left center"</code>, <code>"left top"</code>, <code>"right bottom"</code>, <code>"right center"</code>, and <code>"right top"</code>. If not specified, defaults to <code>"left top"</code>.<br>
      Optional</li>
     <li><code>"additional_backgrounds_tiling":</code> an array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats, with support for <code>"no-repeat"</code>, <code>"repeat"</code>, <code>"repeat-x"</code>, and <code>"repeat-y"</code>. If not specified, defaults to <code>"no-repeat"</code>.<br>
      Optional</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="images" name="images">images</h3>

<p dir="ltr">All URLs are relative to the manifest.json file and cannot reference an external URL.</p>

<p dir="ltr">Images should be 200 pixels high to ensure they always fill the header space vertically.</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">名前</th>
   <th scope="col">型</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>headerURL</code></td>
   <td><code>String</code></td>
   <td>
    <p>Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no <code>headerURL</code> is specified (see {{bug(1404688)}}).</p>

    <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p>
   </td>
  </tr>
  <tr>
   <td><code>theme_frame</code></td>
   <td><code>String</code></td>
   <td>
    <p>Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60.</p>

    <p>Alias for <code>headerURL</code>, provided for Chrome compatibility.</p>
   </td>
  </tr>
  <tr>
   <td><code>additional_backgrounds</code></td>
   <td><code>Array </code>of <code>String</code></td>
   <td>
    <p>オプション</p>

    <p>An array of URLs for additional background images to be added to the header area and displayed behind the <code>"headerURL":</code> image. These images layer the first image in the array on top, the last image in the array at the bottom.</p>

    <p>既定では all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of <code>"properties":</code>.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="colors" name="colors">colors</h3>

<p>These properties define the colors used for different parts of the browser. They are all optional except <code>"accentcolor"</code> and <code>"textcolor"</code> where either those properties or their chrome counterparts have to be specified.</p>

<p>All these properties can be specified as either a string containing any valid <a href="/ja/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_text": [ 107 , 99 , 23 ]</code>. But note that <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">in Chrome, colors may only be specified as an RGB array</a>.</p>

<p>See <a href="#example-screenshot">the example screenshot below</a> to understand the parts of the browser UI that are affected by these properties.</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">名前</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>accentcolor</code></td>
   <td>
    <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"headerURL"</code> and <code>"additional_backgrounds"</code>.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "red",
     "textcolor": "white"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>button_background_active</code></td>
   <td>
    <p>The color of the background of the pressed toolbar buttons.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "button_background_active": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15872/theme-button_background_active.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>button_background_hover</code></td>
   <td>
    <p>The color of the background of the toolbar buttons on hover.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "button_background_hover": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15873/theme-button_background_hover.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>icons</code></td>
   <td>
    <p>The color of toolbar icons.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "icons": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15874/theme-icons.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>icons_attention</code></td>
   <td>
    <p>The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "icons_attention": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15875/theme-icons_attention.png" style="height: 324px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>popup</code></td>
   <td>
    <p>The background color of popups (such as the url bar dropdown and the arrow panels).</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15876/theme-popup.png" style="height: 324px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>popup_border</code></td>
   <td>
    <p>The border color of popups.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15877/theme-popup_border.png" style="height: 324px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>popup_highlight</code></td>
   <td>
    <p>The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup_highlight": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15878/theme-popup_highlight.png" style="height: 490px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>popup_highlight_text</code></td>
   <td>
    <p>The text color of items highlighted using the keyboard inside popups.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15879/theme-popup_highlight_text.png" style="height: 490px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>popup_text</code></td>
   <td>
    <p>The text color of popups.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "black",
     "popup_text": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15880/popup_text.png" style="height: 490px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>tab_line</code></td>
   <td>
    <p>The color of the selected tab line.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_line": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15881/theme-tab_line.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>tab_loading</code></td>
   <td>
    <p>The color of the tab loading indicator and the tab loading burst.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_loading": "red"
  }
}</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/15882/theme-tab_loading.gif" style="height: 186px; width: 618px;"></details>
   </td>
  </tr>
  <tr>
   <td><code>tab_selected</code></td>
   <td>
    <p>The background color of the selected tab.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "images": {
  "headerURL": "weta.png"
},
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_selected": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15883/theme-tab_selected.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>tab_text</code></td>
   <td>
    <p>From Firefox 59, it represents the text color for the selected tab.</p>

    <p>From Firefox 55 to 58, it is the same as <code>"textcolor"</code>, provided for <a href="#Chrome_compatibility">Chrome compatibility</a>.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "images": {
  "headerURL": "weta.png"
},
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15884/theme-tab_text.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>textcolor</code></td>
   <td>
    <p>The color of the text displayed in the header area.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "white",
    "textcolor": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar</code></td>
   <td>
    <p>The background color for the navigation bar, the bookmarks bar, and the selected tab.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "red",
    "textcolor": "white"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15886/theme-toolbar.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_bottom_separator</code></td>
   <td>
    <p>The color of the line separating the bottom of the toolbar from the region below.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar_bottom_separator": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15887/theme-toolbar_bottom_separator.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field</code></td>
   <td>
    <p>The background color for fields in the toolbar, such as the URL bar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar_field": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15888/theme-toolbar_field.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_border</code></td>
   <td>
    <p>The border color for fields in the toolbar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15889/theme-toolbar_field_border.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_border_focus</code></td>
   <td>
    <p>The focused border color for fields in the toolbar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15890/theme-toolbar_field_border_focus.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_focus</code></td>
   <td>
    <p>The focused background color for fields in the toolbar, such as the URL bar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15891/theme-toolbar_field_focus.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_text</code></td>
   <td>
    <p>The color of text in fields in the toolbar, such as the URL bar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15892/theme-toolbar_field_text.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_text_focus</code></td>
   <td>
    <p>The color of text in focused fields in the toolbar, such as the URL bar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15893/theme-toolbar_field_text_focus.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_field_separator</code></td>
   <td>
    <p>The color of separators inside the URL bar. In Firefox 58 this was implemented as <code>toolbar_vertical_separator</code>.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field_separator": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15895/theme-toolbar_field_separator.png" style="height: 302px; width: 738px;"></p>

    <p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_text</code></td>
   <td>
    <p>The color of toolbar text.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15896/theme-toolbar_text.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_top_separator</code></td>
   <td>
    <p>The color of the line separating the top of the toolbar from the region above.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15897/theme-toolbar_top_separator.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
  <tr>
   <td><code>toolbar_vertical_separator</code></td>
   <td>
    <p>The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.</p>

    <details open><summary>See example</summary>

    <pre class="brush: json">
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/15898/theme-toolbar_vertical_separator.png" style="height: 302px; width: 738px;"></p>
    </details>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Aliases" name="Aliases">Aliases</h4>

<p>Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">名前</th>
   <th scope="col">Alias for</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>bookmark_text</code></td>
   <td><code>toolbar_text</code></td>
  </tr>
  <tr>
   <td><code>frame</code></td>
   <td><code>accentcolor</code></td>
  </tr>
  <tr>
   <td><code>frame_inactive</code></td>
   <td><code>accentcolor</code></td>
  </tr>
  <tr>
   <td><code>tab_background_text</code></td>
   <td><code>textcolor</code></td>
  </tr>
 </tbody>
</table>

<h3 id="properties" name="properties">properties</h3>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">名前</th>
   <th scope="col">型</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>additional_backgrounds_alignment</code></td>
   <td>
    <p><code>Array</code> of <code>String</code></p>
   </td>
   <td>
    <p>Optional.</p>

    <p>An array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
     The alignment options include:</p>

    <ul>
     <li><code>"bottom"</code></li>
     <li><code>"center"</code></li>
     <li><code>"left"</code></li>
     <li><code>"right"</code></li>
     <li><code>"top"</code></li>
     <li><code>"center bottom"</code></li>
     <li><code>"center center"</code></li>
     <li><code>"center top"</code></li>
     <li><code>"left bottom"</code></li>
     <li><code>"left center"</code></li>
     <li><code>"left top"</code></li>
     <li><code>"right bottom"</code></li>
     <li><code>"right center"</code></li>
     <li><code>"right top"</code>.</li>
    </ul>

    <p>If not specified, defaults to <code>"left top"</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>additional_backgrounds_tiling</code></td>
   <td>
    <p><code>Array</code> of <code>String</code></p>
   </td>
   <td>
    <p>Optional.</p>

    <p>An array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats. Options include:</p>

    <ul>
     <li><code>"no-repeat"</code></li>
     <li><code>"repeat"</code></li>
     <li><code>"repeat-x"</code></li>
     <li><code>"repeat-y"</code></li>
    </ul>

    <p>If not specified, defaults to <code>"no-repeat"</code>.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">例</h2>

<p dir="ltr" id="docs-internal-guid-f85f22a2-6854-24d7-769b-8a47c376e2f2">A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:</p>

<pre class="brush: json" dir="ltr"> "theme": {
   "images": {
     "headerURL": "images/sun.jpg"
   },
   "colors": {
     "accentcolor": "#CF723F",
     "textcolor": "#000"
   }
 }</pre>

<p dir="ltr">Multiple images can be used to fill the header, using a blank/transparent header image to gain control over the placement of each visible image:</p>

<pre class="brush: json" dir="ltr"> "theme": {
   "images": {
     "headerURL": "images/blank.png",
     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
   },
   "colors": {
     "accentcolor": "blue",
     "textcolor": "#ffffff"
   }
 }</pre>

<p dir="ltr">You can also fill the header with a repeating image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:</p>

<pre class="brush: json" dir="ltr"> "theme": {
   "images": {
     "headerURL": "images/blank.png",
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "accentcolor": "green",
     "textcolor": "#000"
   }
 }</pre>

<p><a id="example-screenshot" name="example-screenshot">The following example uses most of the different values for <code>theme.colors</code>:</a></p>

<pre class="brush: json">  "theme": {
    "images": {
      "headerURL": "weta.png"
    },

    "colors": {
       "accentcolor": "darkgreen",
       "textcolor": "white",
       "toolbar": "blue",
       "toolbar_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"
    }
  }</pre>

<p>It will give you a browser that looks something like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15789/theme.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 1446px;"></p>

<p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("webextensions.manifest.theme", 10)}}</p>

<h3 id="Chrome_compatibility" name="Chrome_compatibility">Chrome compatibility</h3>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">Firefox property</th>
   <th scope="col">Chrome property</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>images/headerURL</code></td>
   <td>
    <p><code>images/theme_frame</code></p>

    <p>In Chrome, the image is anchored to the top left of the header and tiled if it doesn’t fill the header area.</p>
   </td>
  </tr>
  <tr>
   <td><code>images/additional_backgrounds</code></td>
   <td>Not supported</td>
  </tr>
  <tr>
   <td><code>colors/accentcolor</code></td>
   <td><code>colors/frame</code></td>
  </tr>
  <tr>
   <td><code>colors/textcolor</code></td>
   <td>Incorrectly implemented as <code>colors/tab_text</code> from Firefox 55 to 58, fixed as <code>colors/tab_background_text</code> from Firefox 59 onward</td>
  </tr>
  <tr>
   <td><code>colors/toolbar_text</code></td>
   <td><code>colors/bookmark_text</code></td>
  </tr>
  <tr>
   <td><code>properties/additional_backgrounds_alignment</code></td>
   <td>Not supported</td>
  </tr>
  <tr>
   <td><code>properties/additional_backgrounds_tiling</code></td>
   <td>Not supported</td>
  </tr>
 </tbody>
</table>

<p>In Chrome, all colors must be specified as an array of RGB values, like this:</p>

<pre class="brush: json">"theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}</pre>

<p>From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, <code>colors/frame</code> and <code>colors/tab_text</code> required the array form, while other properties required the CSS color form.</p>