# Chrome Themes Overview A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or HTML code. ## Getting Started *** Customizing the Google theme is the desire of many, as you use this browser for hours. You can customize it to separate workspaces, to feel more comfortable, or simply based on personal preference.\ \ Below, I will show how to assemble a theme, and how this is quite simple! It's a configuration task.

{% hint style="success" %} The theme above has been published and can be found at:\ {% endhint %} ## Basic Structure *** Creating a theme is quite simple; we start with the basic folder structure, including a folder for images and a Manifest.json file. {% hint style="warning" %} The file **MUST** be named **Manifest.json**. {% endhint %}

Printscreen of a Folder Structure for building Theme

Let's start with the basic information in the Manifest.json. You need to provide the version, name, author, and other important details for your extension.

{
    "manifest_version": 3,
    "version": "1.0.0",
    "name": "Example Theme",
    "short_name": "Example",
    "author": "Mepadev"
}

# Manifest.json v3 ### Manifest Properties ```json { "manifest_version": 3, "version": "1.0.0", "name": "Example Theme", "short_name": "Example", "author": "Mepamaze", "theme": { "images": { "theme_frame": "images/picture.png", "theme_frame_inactive": "images/picture.png", "theme_frame_incognito": "images/picture.png", "theme_frame_incognito_inactive": "images/picture.png", "theme_toolbar": "images/picture.png", "theme_tab_background": "images/picture.png", "theme_tab_background_inactive": "images/picture.png", "theme_tab_background_incognito": "images/picture.png", "theme_tab_background_incognito_inactive": "images/picture.png", "theme_ntp_background": "images/picture.png", "theme_frame_overlay": "images/picture.png", "theme_frame_overlay_inactive": "images/picture.png", "theme_button_background": "images/picture.png", "theme_ntp_attribution": "images/picture.png", "theme_window_control_background": "images/picture.png" }, "tints": { "background_tab": [1, 1, 1], "buttons": [1, 1, 1], "frame": [1, 1, 1], "frame_inactive": [1, 1, 1], "frame_incognito": [1, 1, 1], "frame_incognito_inactive": [1, 1, 1] }, "colors": { "frame": [255, 255, 255], "frame_inactive": [255, 255, 255], "frame_incognito": [255, 255, 255], "frame_incognito_inactive": [255, 255, 255], "toolbar": [255, 255, 255], "toolbar_button_icon": [255, 255, 255], "toolbar_text": [255, 255, 255], "tab_background_text": [255, 255, 255], "tab_background_text_inactive": [255, 255, 255], "tab_background_text_incognito": [255, 255, 255], "tab_background_text_incognito_inactive": [255, 255, 255], "tab_text": [255, 255, 255], "background_tab": [255, 255, 255], "background_tab_inactive": [255, 255, 255], "background_tab_incognito": [255, 255, 255], "background_tab_incognito_inactive": [255, 255, 255], "bookmark_text": [255, 255, 255], "button_background": [255, 255, 255], "ntp_background": [255, 255, 255], "ntp_header": [255, 255, 255], "ntp_link": [255, 255, 255], "ntp_text": [255, 255, 255], "omnibox_background": [255, 255, 255], "omnibox_text": [255, 255, 255] }, "properties": { "ntp_background_alignment": "bottom", "ntp_background_repeat": "no-repeat", "ntp_logo_alternate": 1 } } ``` ⚠ BY THE TIME I WRITE THIS, DESPITE BEING IN THE CODE, GOOGLE HAS DISABLED ANY CHANGES IN INCOGNITO MODE!! # Deploying and Testing Chrome Themes

# API REFERENCE ## [IMAGES](/theme-properties/images)

Property	Type	Description
"theme_frame"	FILE PATH (String)
"theme_frame_inactive"	FILE PATH (String)
"theme_toolbar"	FILE PATH (String)
"theme_tab_background"	FILE PATH (String)
"theme_tab_background_inactive"	FILE PATH (String)
"theme_ntp_background"	FILE PATH (String)
"theme_frame_overlay"	FILE PATH (String)
"theme_frame_overlay_inactive"	FILE PATH (String)
"theme_ntp_attribution"	FILE PATH (String)
"theme_window_control_background"	FILE PATH (String)

## [COLORS](/theme-properties/colors)

Property	Type	Description
"frame"	RGB
"frame_inactive"	RGB
"toolbar"	RGB
"toolbar_button_icon	RGB
"toolbar_text"	RGB
"tab_background_text"	RGB
"tab_background_text_inactive"	RGB
"tab_text"	RGB
"background_tab"	RGB
"background_tab_inactive"	RGB
"bookmark_text"	RGB
"button_background"	RGB
"ntp_background"	RGB
"ntp_link"	RGB
"ntp_text"	RGB
"omnibox_background"	RGB
"omnibox_text"	RGB

## [TINTS](/theme-properties/tints)

Property	Type	Description
"background_tab"	HSL	Changes the coloration of the tabs. However, image and color changes take precedence.
"buttons"	HSL	Changes the buttons in the toolbar. However, color changes take precedence.
"frame"	HSL	Changes the primary background of the tabs, TAKES PRIORITY!
"frame_inactive"	HSL	Changes the primary background of the tabs when inactive, TAKES PRIORITY!

## [DISPLAY PROPERTIES](/theme-properties/display-properties)

Property	Type	Values	Description
"ntp_background_alignment"	String	[ "center", "top", "bottom", "left", "right" ]	Alignment of the image set in 'theme_ntp_background'
"ntp_background_repeat"	String	[ "no-repeat", "repeat-x", "repeat-y", "repeat" ]	Replication behavior on the axes of the image set in 'theme_ntp_background'
"ntp_logo_alternate"	Integer	[ 0 - 1 ]	Defines the use of the default Google logo or an adaptive 'dark' and 'light' logo.

# Images This properties has ## THEME\_FRAME ***

## THEME\_FRAME\_INACTIVE ***

## THEME\_TOOLBAR ***

## THEME\_TAB\_BACKGROUND ***

## THEME\_TAB\_BACKGROUND\_INACTIVE ***

## THEME\_NTP\_BACKGROUND ***

## THEME\_FRAME\_OVERLAY ***

## THEME\_FRAME\_OVERLAY\_INACTIVE ***

## THEME\_NTP\_ATTRIBUTION *** This property is used for you to assign your brand to your theme, and it appears when you add a ['theme\_ntp\_background'](#theme_ntp_background) to your theme. {% hint style="warning" %} You need to assign an image to ['theme\_ntp\_background'](#theme_ntp_background) to be able to use this property {% endhint %} {% hint style="warning" %} Use small images for this assignment; in the example below, the image is 100 x 50 {% endhint %}

Printscreen o NTP with brand's attribution image

Printscreen of Mepadev's Logo as NTP_ATTRIBUTION

## THEME\_WINDOW\_CONTROL\_BACKGROUND ***

# Colors ## FRAME ***

## FRAME\_INACTIVE ***

## TOOLBAR ***

## TOOLBAR\_BUTTON\_ICON ***

## TOOLBAR\_TEXT ***

## TAB\_BACKGROUND\_TEXT ***

## TAB\_BACKGROUND\_TEXT\_INACTIVE ***

## TAB\_TEXT ***

## BACKGROUND\_TAB *** {% hint style="warning" %} If you use 'theme\_tab\_background' you need to use 'tint' instead of background\_tab {% endhint %}

## BACKGROUND\_TAB\_INACTIVE ***

## BOOKMARK\_TEXT ***

## BUTTON\_BACKGROUND ***

## NTP\_BACKGROUND ***

## NTP\_TEXT ***

## OMNIBOX\_BACKGROUND ***

## OMNIBOX\_TEXT ***

# Tints ## BACKGROUND\_TAB *** {% hint style="warning" %} If you have set an image for ['theme\_tab\_background'](/theme-properties/images#theme_tab_background) on **IMAGES** the image will take priority! {% endhint %} {% hint style="warning" %} If you have set a color for ['background\_tab'](/theme-properties/colors#background_tab) on **COLORS** the color will take priority! {% endhint %} {% hint style="danger" %} Some properties are disabled when images or colors have been assigned to the element (tab, frame, etc). {% endhint %} ```json "background_tab": [ 0.8889, 1, 0.8 ] ```

Printscreen of tabs, showing the **background_tab** in Pink

## BUTTONS *** {% hint style="info" %} If you have set a color for ['toolbar\_button\_icon'](/theme-properties/colors#toolbar_button_icon) on **COLORS** the color will take priority! {% endhint %} {% hint style="danger" %} Some properties are disabled when images or colors have been assigned to the element (tab, frame, etc). {% endhint %}

## FRAME *** {% hint style="success" %} This frame is located behind the tabs and TAKES PRIORITY over the others! It is also different from the ["frame"](/theme-properties/colors#frame) and ["frame\_inactive"](/theme-properties/colors#frame_inactive) in COLORS, as it is the first layer. {% endhint %}

## FRAME\_INACTIVE *** {% hint style="success" %} This frame is located behind the tabs and TAKES PRIORITY over the others! It is also different from the ["frame"](/theme-properties/colors#frame) and ["frame\_inactive"](/theme-properties/colors#frame_inactive) in COLORS, as it is the first layer. {% endhint %}

# Display Properties The Display Properties aim to define the behavior of images and other pre-defined settings ## NTP\_LOGO\_ALTERNATE *** Property used to change the Google logo on the [NTP](/references/glossary#ntp). {% hint style="warning" %} #### *If you use "**theme\_ntp\_background"**, the value will always be 1 (white) !* {% endhint %} {% hint style="danger" %} #### *Google changed the behavior of ntp\_logo, now you can only get the original logo if you DO NOT use any visual changes to the* [*NTP*](/references/glossary#ntp)*!* {% endhint %} If you're using only colors, you'll have two options here: 1 or 0. If you choose **option 1**, it means 'yes, I want the logo to be changed according to the colors.\ So, then Google does some calculations with your color; if it's dark, the logo will be white:\ ```json "ntp_logo_alternate": 1 ```

And for light backgrounds:

For the original option, you have to set to 0 and can't use any of [NTP](/references/glossary#ntp) change types: ```json "ntp_logo_alternate": 0 ```

## NTP\_BACKGROUND\_ALIGNMENT *** Property responsible for aligning the ['theme\_ntp\_background'](/theme-properties/images#theme_ntp_background) setting the initial position of the image. The values can be: "center", "left", "right", "top" and "bottom". {% hint style="info" %} You need to assign an image to ['theme\_ntp\_background'](#theme_ntp_background) to be able to use this property {% endhint %} ```json "ntp_background_alignment": "center" ```

## NTP\_BACKGROUND\_REPEAT *** This property controls how the ['theme\_ntp\_background'](/theme-properties/images#theme_ntp_background) will repeat on the screen. It can have four values: **"****no-repeat****", "****repeat-x****", "****repeat-y****" and "****repeat****"**. ```json "ntp_background_repeat": "repeat-x" ``` {% hint style="warning" %} You need to assign an image to ['theme\_ntp\_background'](#theme_ntp_background) to be able to use this property {% endhint %}

Printscreen of NTP with Goku's PNG repeated on X axis

Printscreen of NTP with Goku's PNG repeated on Y axis

Printscreen of NTP with Goku's PNG repeated on all axis

# Old References {% file src="/files/9iKDrLnwnILI1UVfuPVe" %} # Glossary ## NTP *** Refers to the New Tab Page. It is a tab without an address in the URL. You can access it using the shortcut Ctrl + T, clicking on the icon next to the tabs, or by launching Chrome without predefined pages.

## HSL