The editor
The editor at themes.extension.dev paints a Chrome window as you change colors, images and tints, then exports the result as a theme package. Reach for it when you want a browser theme without hand-writing a manifest.
Quick start
- Open themes.extension.dev and pick Chromium on the browser picker.
- Change a color in the sidebar. The Chrome window on the canvas repaints.
- Open Theme settings to name the theme, then export it from Export and install.
How it works
The browser picker. The home address / shows two cards under "Pick the browser that shows your theme". Chromium opens the editor at /chromium in the same tab. Firefox opens the Firefox preview at /firefox in a new tab. The card you opened last carries a "Last used" tag, read from this browser's storage, and nothing redirects you.
The Firefox card can be blocked. On a phone, or in a browser without WebAssembly JavaScript Promise Integration, the Firefox card loses its link and states why: "This browser cannot run the Firefox engine." The Chromium card always works on a desktop browser.
The live Chrome preview. The canvas holds a Chrome window drawn by the emulator with mac window controls and a New Tab page. Every edit rebuilds the manifest and the emulator resolves it the way Chrome resolves a theme, so the window repaints on each change. What the preview derives, such as the omnibox field, is what installs.
Preview states. The strip beside the header holds two checkboxes, Inactive window and Incognito mode, both off by default. Inactive shows the window out of focus, and the inactive frame color is editable only while it is on. Incognito shows the stock incognito window, because Chrome ignores themes there.
Phones are turned away. Under a desktop width the editor shows "This editor needs a bit more room." and asks you to open it on a desktop.
Theme information. The settings dialog holds four fields: theme name, author, version and description. All four land in the manifest. The name cannot be empty and the version must be a Chrome version, or export is blocked.
Undo and redo. Every edit is one history step. Edits within 500 ms of each other merge into a single step, and the history keeps the last 50. The dock carries Undo and Redo buttons, and the keyboard works when no field has focus.
Autosave. The editor saves the theme to this browser's storage 300 ms after the last edit, under the key chrome-theme-visualizer-v2. When storage is full a toast reads "Your work is no longer being saved" and stays until saving works again. The Firefox preview reads the same key.
The dock. A row of buttons straddles the bottom edge of the window: Redo, Undo, the pointer toggle, Presets, Colors, Images and Tints. A section button opens the sidebar on that section.
Reference
| Address | What it shows |
|---|---|
/ | The browser picker |
/chromium | The editor with the live Chrome preview |
/firefox | A real Firefox in WebAssembly, in a new tab |
| Shortcut | Action |
|---|---|
| Cmd+Z or Ctrl+Z | Undo |
| Cmd+Shift+Z or Ctrl+Shift+Z | Redo |
| Cmd+Y or Ctrl+Y | Redo |
| Esc | Clear the pointer selection, then leave pointer mode |
| Storage key | Holds |
|---|---|
chrome-theme-visualizer-v2 | The theme and its metadata, saved 300 ms after an edit |
themes-last-engine | The browser card you opened last |
chrome-theme-color-history | The twelve most recent colors |
When it fails
- The Firefox card has no link and reads "This browser cannot run the Firefox engine." The browser lacks WebAssembly JavaScript Promise Integration, or you are on a phone. Open the page in a current desktop Chrome.
- The page reads "This editor needs a bit more room." The viewport is under the desktop width. Open the editor on a desktop.
- A toast reads "Your work is no longer being saved." Browser storage is full. Export the theme or remove large images, and the toast clears when a save succeeds.
- Cmd+Z does nothing. A text field has focus. Click the canvas or press Undo on the dock.
- The inactive frame field is missing. Turn on Inactive window in the preview states strip.