A *theme* is a special kind of extension that changes the way the browser looks. Themes are
[packaged](https://developer.chrome.com/docs/extensions/mv3/linux_hosting#packaging) like regular extensions, but they don't contain JavaScript or HTML code.

Themes are uploaded to the Chrome Web Store using the [same procedure as an extension](https://developer.chrome.com/docs/webstore). During upload, you'll be asked to select a category. You'll find a list of theme categories in Chrome Web Store documentation [under Best practices](https://developer.chrome.com/docs/webstore/best-practices.md.txt#choose-theme-category-well).

You can find and try a bunch of themes at the [Chrome Web Store](https://chrome.google.com/webstore/category/themes).

![green plants theme](https://developer.chrome.com/static/docs/extensions/develop/ui/themes/image/green-plants-theme-20941fd601b0d.png)

![love smoke theme](https://developer.chrome.com/static/docs/extensions/develop/ui/themes/image/love-smoke-theme-3d6c43a528ded.png)

![jus d'orange theme](https://developer.chrome.com/static/docs/extensions/develop/ui/themes/image/jus-dorange-theme-548366254902c.png)

## Manifest

Here is an example [`manifest.json`](https://developer.chrome.com/docs/extensions/mv3/manifest) file for a theme:

```json
{
  "manifest_version": 3,
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}
```

### colors

Colors are in RGB format. To find the strings you can use within the "colors" field, see
[`kOverwritableColorTable`](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/themes/browser_theme_pack.cc;l=222).

### images

Image resources use paths relative to the root of the extension. You can override any of the images
that are specified by the strings in [`kPersistingImages`](https://source.chromium.org/search/?q=file:chrome/browser/themes+symbol:kPersistingImages$). All images must be stored in PNG
format or they [will not render properly](https://bugs.chromium.org/p/chromium/issues/detail?id=1200459).

### properties

This field lets you specify properties such as background alignment, background repeat, and an
alternate logo. To see the properties and the values they can have, see [`kDisplayProperties`](https://source.chromium.org/search/?q=file:chrome/browser/themes+symbol:kDisplayProperties$).

### tints

You can specify tints to be applied to parts of the UI such as buttons, the frame, and the
background tab. Google Chrome supports tints, not images, because images don't work across platforms
and are brittle in the case of adding new buttons. To find the strings you can use within the
"tints" field, see [`kTintTable`](https://source.chromium.org/search/?q=file:chrome/browser/themes+symbol:kTintTable$).

Tints are in Hue-Saturation-Lightness (HSL) format, using floating-point numbers in the range 0 -
1.0:

- **Hue** is an absolute value, with 0 and 1 being red.
- **Saturation** is relative to the currently provided image. 0.5 is *no change* , 0 is *totally
  desaturated* , and 1 is *full saturation*.
- **Lightness** is also relative, with 0.5 being *no change* , 0 as *all pixels black* , and 1 as *all
  pixels white*.

You can alternatively use `-1.0` for any of the HSL values to specify *no change*.