Themes & Theme Studio

Themes change the colors of SN Utils itself: the extension pages (Settings, Code Search, the popup) and the tools SN Utils adds inside ServiceNow (slash commands, snippets, record and table panels, the field editor, the Update Set Manager, the related list query editor, Personalize List Columns, the paste pill, Sidekick and dialogs). ServiceNow's own interface is never restyled. The Diff Viewer and the Code Editor keep their editor colors, so code stays readable, and open in the light or dark mode of the theme you chose for extension pages.

Open Settings → Themes in the extension to get started.

Choosing a palette

Four palettes are included for everyone:

• Classic Dark: slate surfaces with emerald accents.
• Classic Light: bright surfaces with teal accents.
• Midnight Cobalt: deep navy with sky-blue accents.
• Catppuccin Macchiato: the popular community palette, layered dark surfaces with mauve, blue and pastel accents. The Latte, Frappé and Mocha flavors are in the Catppuccin pack in the marketplace.

Each card shows a real slash command preview. Customize opens a personal copy of a built-in palette in Theme Studio, so you can start from one you already like. Use the Apply to selector to decide where a palette is used:

• Extension + ServiceNow tools
• Extension pages only
• ServiceNow tools only

The summary bar at the top always shows which palette each area uses. Use system appearance lets extension pages follow your operating system's light or dark mode.

Below the palettes, three tabs hold everything else: Marketplace & sync, Theme Studio and Instance themes. The page remembers the tab you used last.

The quick toggle

The theme button in the slash command popup and panels, and the sun and moon button on extension pages, flip between dark and light. Each side remembers the theme you last used in it, so the toggle never loses a custom, pack or Midnight Cobalt palette. The tooltip always names where the next click goes.

Pick a light palette once, for example Peach Sorbet, and it takes the place of Classic Light in these sequences.

A remembered palette is kept while it is unavailable. If a subscription ends or a pack cannot be loaded, the toggle uses Classic Dark or Classic Light in its place, and your palette is back in the sequence as soon as it is available again.

Shift-click switches for the current instance only. It keeps its own dark and light pair for that instance, so it returns to the theme you gave that instance and never changes the pair used everywhere else. A normal click removes the instance's own theme again, as before.

A theme per instance

On the Instance themes tab, choose an instance and pick a theme. The hostname field suggests the instances you configured or visited recently, most recent first, with their name and environment, and narrows the list as you type. Use the arrow keys and Enter, or click a suggestion. Picking an instance that already has its own theme starts from that theme. A hostname that is not in the list yet can simply be typed. The number on the tab shows how many instances have their own theme. That instance keeps its own look while every other instance follows your default. This is a handy extra cue next to the InstanceTag and favicon badge, but do not rely on color alone to recognize production.

Match your ServiceNow instance (Pro)

Use instance appearance lets the SN Utils tools inside ServiceNow follow the colors and light or dark mode of the instance you are on. Extension pages keep their own theme. This option needs a paid Pro or Enterprise plan.

Theme Studio (Pro)

Theme Studio is where you build your own palette.

1. Choose ＋ Create a theme under Your themes, or open the Theme Studio tab.
2. Name the theme and pick a base mode (dark or light).
3. Set the five main colors: background, elevated surface, accent, text and border.
4. Optionally open More colors. The remaining five colors (subtle surface, input background, muted text, text on accent, focus ring) follow your main colors automatically. Switch off Auto for a color to set it yourself.
5. Watch the two live previews: the slash command popup and a miniature settings page.
6. Choose Save Theme. Your theme appears under Your themes next to the built-in palettes, where you can apply, edit or delete it.

Saving and applying are separate steps, so you can keep several palettes and switch between them.

Readability advice

The Studio checks the contrast of your text, muted text, button text, accent and focus ring. Low contrast shows as advice, and the save message mentions it, but it never stops you from saving. It is your theme.

If a palette turns out to be unreadable, use the Reset to Classic Dark button in the summary bar at the top of the Themes page. It always keeps fixed, readable colors.

Import and export

Export JSON downloads the theme and copies it to your clipboard. Import JSON adds a theme from a file. Theme files only contain a name and ten colors. They cannot contain CSS, images or scripts, so a shared theme file is safe to import.

Create a palette from a screenshot with AI

Inside Theme Studio, Create with AI proposes a palette from a screenshot or a description.

1. Paste a screenshot or choose an image (PNG, JPEG or WebP).
2. Crop the image or redact parts of it. This happens locally and nothing is uploaded yet.
3. Describe what you want, for example "use the navy background and warm accents".
4. Press Enter in the prompt, or choose Generate with AI next to it (Shift+Enter adds a new line). Only now are your instructions, the draft colors and the prepared image sent. The assistant shows a progress line with the elapsed time; generation usually takes 10 to 30 seconds.
5. When the status says Palette ready, the new colors appear as a strip under the message and in both live previews, which stay in view next to the assistant.
6. The prompt is ready for your next instruction right away. Refine with follow-ups such as "less purple" or "darker background" and press Enter again. Lock colors you want to keep, and use Undo palette to step back.

The result lands in your draft. It is not saved or applied until you do that yourself.

What is sent

Nothing leaves your browser until you choose Generate with AI. At that point SN Utils sends three things to Google Gemini, through the SN Utils server: your instructions, the ten draft colors, and the prepared image exactly as shown in the assistant (after your crop and redaction). Later refinements send the image again only if you tick Send this prepared image with the next request.

SN Utils does not keep the image. It is not stored in your themes, theme sync, packs or AI history, and the original file and anything you cropped away never leave your browser. Google processes the request under its Gemini API terms. A screenshot of ServiceNow can show record data, so crop or redact anything you would rather not share.

Theme generation always uses Google Gemini, regardless of the model you picked for AI Builder or Sidekick. You can generate up to 20 palettes per hour.

Theme marketplace (Pro)

Choose Browse theme packs under Your themes, or open the Marketplace & sync tab and choose Browse packs, to preview ready-made palettes. Most packs hold two palettes: the calm Night Shift, Daylight and Clear Contrast, the vivid Neon Arcade and Sunset, and the muted Northern and Botanical. The Catppuccin pack holds the Latte, Frappé and Mocha flavors in their official colors; Macchiato is built in for everyone. Filter the list by style with the chips above it: Dark, Light, Vivid, Muted and High contrast. Preview pack opens the pack in a dialog that shows every palette in a real slash command preview with its ten colors, and Install pack sits right there. Installing a pack does not change your current theme; once it is installed, the dialog offers a Use button per palette, applied to whatever Apply to is set to. Installed palettes appear under Your themes with a Pack label, next to the built-in palettes. Apply one when you are ready, or choose Customize to open a personal copy in Theme Studio; the pack palette itself stays unchanged.

Private theme sync (Pro)

Private sync lives on the Marketplace & sync tab. It keeps your personal palettes across browsers. Sync runs only when you choose Sync now, and it respects the Cloud Sync switch in Backup & Sync. Optionally sync which theme you use for extension pages and ServiceNow tools. Instance assignments stay on the device.

If two browsers edited the same theme, both versions are kept and the other one is added as a conflict copy. When you connect a different account, the previous account's themes are set aside as a recovery copy that you can export. They are never uploaded to the new account.

Plans

Custom themes are never deleted when a trial or subscription ends. SN Utils falls back to a Classic palette, your themes stay exportable, and your choice returns when Pro is active again.