The Theme Editor

The Theme Editor sets the look of the plugin’s own panels. It changes six colours, how see-through the panels are, a picture behind them, the font and the size of the text.

What it makes possible:

• The plugin matched to a dark or a light Studio, or to a streaming overlay.
• Larger text on a high-resolution monitor, without scaling the whole interface. Drag the size slider above 100%.
• One look for a whole team. Paste one theme code on each machine.
• A picture of your own behind every panel.

Opening and closing

To	Do this
Open the editor	Press ≡, then Settings, then Edit Theme.
Keep the look	Press Apply. The theme is saved and the editor closes.
Drop the changes	Press Cancel. The editor closes.
Open or close with a key	Bind the action Toggle Theme Editor in Shortcuts. Closing with the key acts as Cancel.

The panel is titled Theme Editor. It is dragged by its header. It has no X.

Every change shows on the whole interface as it is made. Nothing is saved until Apply is pressed.

The controls

The rows are listed from the top of the panel to the bottom.

Row	Kind	Starts at	What it does
Accent	Swatch and hex box		The outlines of panels, rows and buttons.
Background	Swatch and hex box		The background of every panel.
Blob	Swatch and hex box		The fill of rows, boxes and buttons.
Slider	Swatch and hex box		The fill of sliders.
Scroll Bar	Swatch and hex box		The scroll bars.
Text Accent	Swatch and hex box		All text.
Panel Opacity %	Number	15	How see-through the panels are. 0 is solid. 100 is invisible.
Blob Opacity %	Number	25	How see-through the fills of rows and buttons are. 0 is solid. 100 is invisible.
Background Image	Box. Reads rbxassetid://... while empty.	Empty	The picture drawn behind every panel.
Bg Image Opacity %	Number	100	How see-through the picture is. 0 is solid. 100 is hidden.
Font	Dropdown		The font of all the plugin’s text. There are 47 fonts.
Slider with no label	Slider. The readout starts at 100%.	100%	The size of the text, from 1% to 200% of normal.
Preset	Dropdown		Sets a ready look. See Presets.
Theme Code	Box. Reads Paste or copy theme code while empty.	Empty	Holds the theme code for Export and Import.
Export, Import	Buttons		See The theme code.
Apply, Cancel, Reset	Buttons		See Apply, Cancel and Reset.

Text Accent is one colour. The plugin makes four shades from it: bright, normal, muted and dark. Icons tinted in those shades change with it.

The three Opacity rows

CAUTION

The three rows labelled Opacity % run as transparency. A larger number makes the thing more see-through. 0 is solid and 100 is invisible.

Row	At 0	At 100	Starts at
Panel Opacity %	The panels are solid.	The panels are invisible.	15, nearly solid
Blob Opacity %	The fills are solid.	The fills are invisible.	25
Bg Image Opacity %	The picture is solid.	The picture is hidden.	100, hidden

Changing a colour

To	Do this
Choose a colour by eye	Click the swatch. The colour picker opens. Drag in it, and the interface changes colour as you drag. Press OK to keep the colour.
Put the old colour back	Press Cancel in the colour picker.
Give a colour by its code	Enter a hex code in the box beside the swatch, then click away.

A hex code may be written as #RRGGBB or #RGB, with or without the #.

The colour picker is titled after the row: Accent Color, Background Color, Blob Color, Slider Color, Scroll Bar Color. For Text Accent it is titled Text Color. The colour editor and colour picker describes the picker.

When a change takes effect:

Control	Takes effect
The colour picker	As you drag.
A hex box, a number box, the Background Image box	When you click away from the box.
The Font dropdown, the size slider	At once.

Presets

Preset offers Custom and nine ready looks.

Preset	Font it sets
Default Gold	FredokaOne
Midnight Blue	FredokaOne
Crimson Dark	FredokaOne
Forest Green	FredokaOne
Pitch Black	GothamMedium
Monochrome	RobotoMono
Dracula	RobotoMono
Nord	GothamMedium
Sunset	FredokaOne

A preset sets the six colours, Panel Opacity %, Blob Opacity % and the font. It leaves the text size and the background image alone.

The dropdown shows the name of a preset when the first five colours match that preset. Otherwise it shows Custom. The name is worked out when the editor opens, and after a preset, Reset or Import. It does not change to Custom while you change a colour.

Apply, Cancel and Reset

Button	What it does
Apply	Saves the theme for later sessions and closes the editor.
Cancel	Closes the editor. Puts back the whole look that was in use when the editor opened. That covers the six colours, the three opacity rows, the font, the text size and the background image.
Reset	Shows the Default Gold look, with the text size at 100% and no background image. The editor stays open. Press Apply to keep it.

The plugin keeps one saved theme for each user. It loads that theme when the plugin starts. There is no list of saved themes. To keep several looks, export each one as a theme code and keep the text.

The theme code

A theme code is one line of text that holds a whole look. It carries the six colours, Panel Opacity %, Blob Opacity %, the font, the text size, the background image and Bg Image Opacity %.

To carry a theme to another machine:

Step	Control	Action	Result
1	Theme Editor ▸ Export	Press	The Theme Code box holds one line of text.
2	Theme Editor ▸ Theme Code	Select the text and press Ctrl+C	The code is copied. Keep it in a text file, or send it.
3	On the other machine, Theme Editor ▸ Theme Code	Paste the code into the box	The box holds the code.
4	Theme Editor ▸ Import	Press	The interface takes the look of the code. Nothing is saved yet.
5	Theme Editor ▸ Apply	Press	The theme is saved and the editor closes.

NOTE

Import ignores text it cannot read. It gives no message. If the look does not change at step 4, copy the code again.

The background image

Background Image takes any of these:

• An asset number, such as 1234567890. The plugin writes it out as a full rbxassetid:// address.
• A full address beginning with rbxassetid://.
• Another Roblox image address.

Clear the box to remove the picture.

The same picture is stretched behind every main panel. Those are the HUD, the Properties panel, Settings, the Tools menu, the tool panels, the Theme Editor and the Inventory. Its corners are rounded to match each panel.

The picture sits behind the panel’s own background colour. To see it, change two rows:

Step	Control	Action	Result
1	Theme Editor ▸ Background Image	Enter the asset number, then click away	No change yet. The picture is still hidden.
2	Theme Editor ▸ Bg Image Opacity %	Enter 0, then click away	The picture is solid. It shows faintly, because the panel colour in front of it is nearly solid.
3	Theme Editor ▸ Panel Opacity %	Enter 60, then click away	The panels become more see-through and the picture shows through them.

Limits

• One saved theme for each user. A second look is kept as a theme code.
• A preset does not change the text size or the background image.
• The Preset dropdown does not change to Custom while a colour is being changed.
• The size slider changes text only. To scale the whole interface, use UI Scale % in Settings.