Images and tints

Images give a theme a frame, toolbar, tab strip or New Tab wallpaper, and tints shift Chrome's own surfaces in HSL. Reach for them when flat colors are not enough, and keep in mind both are Chrome-only.

Quick start

1. Open the editor at themes.extension.dev/chromium and drop an image anywhere on the page. It becomes the NTP background and the Images section opens.
2. Under Theme from wallpaper, click Dark candidate. The editor reads a seed from the wallpaper, builds the colors and slices a frame image from the top of it.
3. Set NTP background alignment to center and NTP Background Repeat to no-repeat.

How it works

Five slots. Frame, Toolbar, Tab background, NTP background and NTP attribution each take one image. The uploader accepts any image/* file. Every slot exports as a PNG under images/ at its original size, with no downscaling.

Size limits. An image is embedded as it is, so a file whose encoded form would pass 4 MiB is refused with "This image is too large to use". That is about 3 MB on disk. The uploader also warns when an image is too short for its band, when it will render soft on a 2x display, and when either side is over 4096 px.

Drag and drop. Dropping a file anywhere on the editor sets the NTP background and opens the Images section. A file that is not an image shows "Drop an image file to use it as the new tab background".

NTP alignment and repeat. Alignment picks where the wallpaper anchors on the New Tab page and exports as properties.ntp_background_alignment. Repeat exports as properties.ntp_background_repeat. A Preview NTP attribution toggle shows or hides the attribution image in the preview only.

Preview at 2x. Chrome paints theme images at 1x, so on a 2x display they soften. The toggle simulates that on a 1x display. On a display that is already 2x the preview shows it without simulating, and the export is unchanged either way.

Derived images. With a frame image in place, Generate toolbar image from frame copies the frame into the toolbar slot, and Generate tab background from frame builds a tab image with Chrome's window anchor offset applied. With a wallpaper and no frame image, Slice frame image from NTP background cuts the top 112 px of the wallpaper into the frame slot.

Theme from wallpaper. With an NTP background set, Light candidate and Dark candidate build a complete theme from it: a seed color read through Google's HCT pipeline, text colors that pass AA, the wallpaper as the NTP image, and the sliced frame. Undo restores the theme you had.

Tints. A tint is an HSL triple [H, S, L] with each channel from 0 to 1, and -1 keeps that channel as Chrome paints it. Four tints are editable: Buttons, Frame, Frame when inactive, and Background tab. Tints are a Chrome-only hue shift, so the Firefox package drops them.

Reference

Slot	Manifest key	Exported file
Frame image	images.theme_frame	images/frame.png
Toolbar image	images.theme_toolbar	images/toolbar.png
Tab background image	images.theme_tab_background	images/tab_background.png
NTP background image	images.theme_ntp_background	images/ntp_background.png
NTP attribution image	images.theme_ntp_attribution	images/ntp_attribution.png

Property	Values
properties.ntp_background_alignment	center, top, bottom, left, right, left top, left bottom, right top, right bottom, center top, center bottom
properties.ntp_background_repeat	no-repeat, repeat, repeat-x, repeat-y

Tint	Manifest key
Buttons	tints.buttons
Frame	tints.frame
Frame, inactive window	tints.frame_inactive
Background tab	tints.background_tab

Limit	Value
Embedded image size	4 MiB encoded, about 3 MB on disk
Oversize warning	Either side over 4096 px
Frame slice height	112 px
Tint channel range	-1, or 0 to 1 in steps of 0.01

When it fails

• "This image is too large to use." The file would pass 4 MiB once embedded. Use a smaller file; the editor never resizes an image for you.
• "Could not read that image file." The browser could not decode the file. Export it again as PNG or JPEG and retry.
• A band warning reads "Only N px tall." The image is shorter than the surface it covers, and Chrome mirror-tiles the shortfall. Use a taller image.
• The derived image buttons are missing. They appear only when the source slot is filled and the target slot is empty.
• Tints did not reach Firefox. Tints are Chrome-only and the Firefox package lists them under "Not in the Firefox package".

Next

• Colors
• Export and install
• Import a theme
• The editor