How to Create and Download a Custom Theme with Chrome Theme Studio

Updated

Chrome Theme Studio is a free browser-based tool for building a custom theme for Chromium-based browsers such as Google Chrome, Microsoft Edge, and Brave. To use it, click the colored box next to each interface element you want to change, watch the live preview update, then click Download Theme to get your theme file. If you want to start over, use Reset Colors.

What you can customize

The editor groups its color controls into four states, each covering the same set of interface elements:

State What it controls
Universal Toolbar, toolbar button icon, URL bar text, URL bar background, tab text, bookmark text
Active Frame background, tab background, tab text for the focused window
Inactive Frame background, tab background, tab text for unfocused windows
Incognito Frame background, tab background, tab text in incognito mode
Inactive & Incognito Frame background, tab background, tab text when an incognito window is unfocused

The Universal settings apply across all window states, so start there for colors you want everywhere — toolbar, URL bar, and text. The state-specific groups let you make focused, unfocused, and incognito windows look different from one another.

Step-by-step: build and download your theme

  1. Open Chrome Theme Studio in your browser at chrometheme.studio.
  2. Start with the Universal group. Click the colored box in each row to open a color picker and choose a new color. The preview updates in real time, so you can judge each change as you make it.
  3. Adjust state-specific colors. Move through Active, Inactive, Incognito, and Inactive & Incognito to set frame, tab background, and tab text colors for each window state. Keep contrast in mind: tab text needs to stay readable against the tab background you pick.
  4. Review the preview. Check the toolbar, URL bar, tabs, and bookmarks together before finalizing — a color that looks good alone can clash with the rest of the interface.
  5. Click Download Theme. This produces your theme file. The page's own instructions say to click the button once you're done adjusting colors.
  6. Install the theme in your browser. Chromium-based browsers load custom themes from a downloaded theme file; follow your browser's theme installation flow to apply it.

Starting over

If your color choices aren't working out, click Reset Colors to return the editor to its default state and begin again. This is faster than manually reverting each swatch.

Common snags to watch for

  • Low-contrast text. The most common mistake is picking a tab or URL bar background that makes text hard to read. Set text colors after backgrounds, and check both active and inactive states.
  • Forgetting incognito. Incognito windows use their own color group. If you skip it, those windows will keep default styling while your normal windows change.
  • Skipping the preview. Because changes apply in real time, use the preview to catch mismatches before downloading rather than installing and reinstalling.

Once downloaded, the theme applies to any Chromium-based browser that accepts the theme file, so the same design can carry across Chrome, Edge, and Brave.