The Theme Editor

The plugin opens in a default gold-on-leather palette. If that doesn’t suit your Studio setup — too dark, wrong accent, the wrong font for your eyes — there’s a Theme Editor panel that retints every plugin surface. Nine built-in presets, custom mode for free editing, live preview without restarting Studio.

Where to find it

Open the plugin HUD. Click the Theme button (gear / palette icon, depending on icon set). A new panel appears with rows for each themeable property and a row of action buttons at the bottom.

Changes preview as you type. There’s no Apply step required to see the effect — the panel itself, the property panels, the inventory, the graph editor, all retint immediately. The Apply step is for persisting the change across Studio restarts.

What you can change

Six colors, two opacities, a background image, font family, font size:

Accent color — borders, dropdown carets, active dropdown highlights
Panel background — the main panel fills (Properties, Toolbench, etc.)
Blob background — secondary fills (rows inside panels, inventory grid cells)
Slider color — slider tracks and graph keypoint fills
Scrollbar color — scrollbar thumb tint
Text accent — gold-tone label text and active values
Panel opacity — 0 (fully transparent) to 100 (fully opaque)
Blob opacity — same scale, separately tunable
Background Image — asset id for a decorative image rendered behind every plugin panel. See the Background image section below.
Bg Image Opacity % — 0 (fully transparent — image hidden) to 100 (fully opaque).
Font — Roblox font enum (FredokaOne, Gotham, RobotoMono, and others Studio supports). Body fonts in surfaces like the inventory and tooltips survive theme-font changes — switching the panel font no longer wipes the body-text font in those secondary surfaces.
Font size — 50 to 200% of the plugin’s base size on the slider. Values below 50% set through JSON import or by typing the value directly are preserved as-is; the slider doesn’t snap them up to 50% on next interaction.

Background image

The Theme Editor’s Background Image row accepts a Roblox asset id and renders that image as a decorative layer behind every plugin panel — Properties, Theme Editor, HUD, Inventory, the lot. Defaults are empty string (no image) and fully transparent, so legacy themes look unchanged until you opt in.

Accepted asset id formats:

rbxassetid://12345
12345 (raw numeric id — the panel normalizes it to the full rbxassetid:// form on apply)
Any Roblox-compatible image URL (rbxhttp://, http://, rbxasset://)

Empty string disables the layer entirely. Material textures are not supported — image assets only.

Layering with the panel-opacity setting: the image sits behind a solid colour layer that carries the panel’s background colour and Panel opacity value. So if you set Panel opacity to 60 and Bg Image Opacity to 50, the image shows through at the combined transparency — the two controls multiply rather than override. To make the background image dominant, push Panel opacity down (lets more of the image through) and Bg Image Opacity up (makes the image itself more solid).

The image is stretched to fill each panel, anchored top-left. There’s no per-panel control — the same image renders behind everything.

Presets

A Preset dropdown at the top of the editor offers nine curated palettes plus Custom:

Preset	Vibe	Font
Default Gold	Warm gold accent on dark leather	FredokaOne
Midnight Blue	Cool blues, low contrast	FredokaOne
Crimson Dark	Wax-red accent on near-black	FredokaOne
Forest Green	Muted forest with sage accents	FredokaOne
Pitch Black	Pure black, white sliders	Gotham
Monochrome	Greyscale, mid contrast	RobotoMono
Dracula	Dracula-scheme purple/pink	RobotoMono
Nord	Nord-palette cool greys + teal	Gotham
Sunset	Orange/pink warm gradient	FredokaOne

Pick one, every color and font field updates to that preset’s values, and the panel re-tints. The dropdown switches to Custom automatically the moment you tweak any individual value — so you always know whether you’re on a curated preset or have started branching off.

The action buttons

At the bottom of the panel:

Apply — writes the current theme to plugin settings (persists across Studio restarts) and snapshots it as the “saved” state.
Cancel — reverts every field back to whatever was last applied or last loaded. Useful if you’ve previewed a preset and want to back out.
Reset — restores the Default Gold preset.
Export — writes the current theme as a JSON blob into a code box at the bottom of the panel. Select-all and copy from there to share or save it.
Import — reads JSON from that same code box and applies it. Paste a theme blob into the box first, then click Import.

The JSON format mirrors the settings stored internally — six hex color strings, two integer opacities, a font name, an integer font scale. Malformed JSON is caught silently — no warning is printed — and the panel just stays on its previous theme.

How the live preview works

When you edit any theme field, every UI surface the plugin owns retints in the same frame — main panels, inventory, the graph editor, the colour pickers, the toolbench, the property panel rows. Strokes follow the accent colour too, so changing the accent updates outlined panels and dropdown borders alongside everything else. There’s no manual refresh step; the change you made is reflected the moment you typed it.

This works for the plugin’s own UI only — there’s no public hook for adding your own panels into the theme system from outside the plugin.

Persistence

Themes are stored in the plugin settings via Studio’s plugin:SetSetting("ThemeJSON", json). Settings persist per-Studio-install — uninstall and reinstall the plugin and your saved theme returns automatically.

If the saved JSON has been corrupted somehow, the loader catches the parse error and falls back to the default theme. Plugin still loads.

What’s next

Theming covers the look of the plugin’s panels. The interactions inside those panels — multi-axis graph editing, panel resize/collapse, selection-aware Clipboard, search-with-auto-expand — are what the next chapter, UI Quality of Life, is about.