Google Chrome Theme Guide

Introduction

I wanted to make a simple Chrome Theme. The docs sucked, so I decided to make my own.

Overview

Themes are basically just Extensions which don't package in any HTML or JavaScript. All you need is a directory with a manifest.json file (describing the theme), and an optional /images subdirectory. The whole thing gets packaged up as a glorified ZIP file.

Boilerplate

There are a couple values which need to be included in manifest.json:

{
  "manifest_version": 2, // Manifest format version
  "version": "0.1", // Theme version
  
  "name": "My Awesome Theme"
  "description": "An awesome theme, for awesome people",
  
  // ...
}

Colors

Colors for various portions of the UI are described under the colors property:

{
  // ...
  "colors": {
    "frame_incognito_inactive": [0, 123, 255]
  }
  // ...
}

Property	Source ID Constant	Notes
frame	ThemeProperties::COLOR_FRAME
frame_inactive	ThemeProperties::COLOR_FRAME_INACTIVE
frame_incognito	ThemeProperties::COLOR_FRAME_INCOGNITO
frame_incognito_inactive	ThemeProperties::COLOR_FRAME_INCOGNITO_INACTIVE
toolbar	ThemeProperties::COLOR_TOOLBAR
tab_text	ThemeProperties::COLOR_TAB_TEXT
tab_background_text	ThemeProperties::COLOR_BACKGROUND_TAB_TEXT
bookmark_text	ThemeProperties::COLOR_BOOKMARK_TEXT
ntp_background	ThemeProperties::COLOR_NTP_BACKGROUND
ntp_text	ThemeProperties::COLOR_NTP_TEXT
ntp_link	ThemeProperties::COLOR_NTP_LINK
ntp_header	ThemeProperties::COLOR_NTP_HEADER
button_background	ThemeProperties::COLOR_BUTTON_BACKGROUND	Appears unused

Images

Images can be used for certain portions of the UI. Their paths can be specified under the images property:

{
  // ...
  "images": {
    "theme_frame" : "images/theme_frame.png",
  }
  // ...
}

Property	Source ID Constants	Notes
theme_frame	PRS_THEME_FRAME, IDR_THEME_FRAME
theme_frame_inactive	PRS_THEME_FRAME_INACTIVE, IDR_THEME_FRAME_INACTIVE
theme_frame_incognito	PRS_THEME_FRAME_INCOGNITO, IDR_THEME_FRAME_INCOGNITO
theme_frame_incognito_inactive	PRS_THEME_FRAME_INCOGNITO_INACTIVE, IDR_THEME_FRAME_INCOGNITO_INACTIVE
theme_toolbar	PRS_THEME_TOOLBAR, IDR_THEME_TOOLBAR
theme_tab_background	PRS_THEME_TAB_BACKGROUND, IDR_THEME_TAB_BACKGROUND
theme_tab_background_incognito	PRS_THEME_TAB_BACKGROUND_INCOGNITO, IDR_THEME_TAB_BACKGROUND_INCOGNITO	Unsupported on macOS
theme_tab_background_v	PRS_THEME_TAB_BACKGROUND_V, IDR_THEME_TAB_BACKGROUND_V
theme_ntp_background	PRS_THEME_NTP_BACKGROUND, IDR_THEME_NTP_BACKGROUND
theme_frame_overlay	PRS_THEME_FRAME_OVERLAY, IDR_THEME_FRAME_OVERLAY
theme_frame_overlay_inactive	PRS_THEME_FRAME_OVERLAY_INACTIVE, IDR_THEME_FRAME_OVERLAY_INACTIVE
theme_button_background	PRS_THEME_BUTTON_BACKGROUND, IDR_THEME_BUTTON_BACKGROUND
theme_ntp_attribution	PRS_THEME_NTP_ATTRIBUTION, IDR_THEME_NTP_ATTRIBUTION
theme_window_control_background	PRS_THEME_WINDOW_CONTROL_BACKGROUND, IDR_THEME_WINDOW_CONTROL_BACKGROUND

Properties

Some UI elements accept additional properties, specified under the properties property:

{
  // ...
  "properties": {
    "ntp_background_repeat": true
  }
  // ...
}

Property	Source ID Constant
ntp_background_alignment	ThemeProperties::NTP_BACKGROUND_ALIGNMENT
ntp_background_repeat	ThemeProperties::NTP_BACKGROUND_TILING
ntp_logo_alternate	ThemeProperties::NTP_LOGO_ALTERNATE

Tints

Tints can be applied to some UI elements, and are specified under the tints property, in Hue-Saturation-Lightness format:

{
  // ...
  "tints": {
    "frame_incognito_inactive": [0, 0.5, 0.5]
  }
  // ...
}

Property	Source ID Constant
buttons	ThemeProperties::TINT_BUTTONS
frame	ThemeProperties::TINT_FRAME
frame_inactive	ThemeProperties::TINT_FRAME_INACTIVE
frame_incognito	ThemeProperties::TINT_FRAME_INCOGNITO
frame_incognito_inactive	ThemeProperties::TINT_FRAME_INCOGNITO_INACTIVE
background_tab	ThemeProperties::TINT_BACKGROUND_TAB