Themes
Every RoStack theme is a small JSON file. You can make one in the app with four colors, or write the file yourself to control every color, down to how code is highlighted. Themes are easy to share: send the file, and the other person imports it.
Back to the main docs.
Themes in the app
Open Settings → Appearance. RoStack comes with Studio, Midnight, Nord, Forest, Rosé, Paper and Solar, each in a light and a dark version. Mode (System, Light, Dark) picks which version shows.
- New Theme starts from the theme you’re using: name it, pick the four colors for its dark and light versions, and save.
- Hover a theme for more: Duplicate a built-in one to change it, Edit, Open file to fine-tune it in a text editor, Export to share it, or Delete (it goes to the Trash).
- Import adds theme files someone sent you. Themes Folder opens the folder where your themes live.
RoStack watches that folder: save a theme file in any editor and the app updates right away. If a file has a mistake, Settings shows which file and what’s wrong.
The theme file
A theme has a name and a dark version, a light version, or both. With both, it follows the Mode setting; with one, it always shows that one. author and description are optional.
{
"name": "Ocean",
"author": "your-roblox-name",
"description": "Deep sea blues.",
"dark": {
"background": "#0a1a24",
"sidebar": "#07141c",
"text": "#e2f1f8",
"accent": "#22c3dd",
"colors": {
"border": "#16303d",
"lx-keyword": "#ff8a65",
"lx-string": "#9ccc65"
}
},
"light": {
"background": "#f3fafd",
"sidebar": "#e6f2f7",
"text": "#0d2a36",
"accent": "#0f8fa8"
}
}Each version needs four colors. Everything else in the app is mixed from them, so four colors are enough for a complete theme:
background | The main window. |
|---|---|
sidebar | The chat list and panels. |
text | Text. Quieter text and lines are mixed from this and the background. |
accent | Buttons, focus outlines, links and selected text. |
The smallest theme that works:
{
"name": "Grape",
"dark": { "background": "#1a1325", "sidebar": "#140f1d", "text": "#ece6f5", "accent": "#a970ff" }
}Colors can be written as #hex (3, 4, 6 or 8 digits), a color name like teal, or rgb(), hsl(), oklch() and color-mix(). Anything else, like url() or var(), is refused.
Every color you can change
Add a colors object to a version to set any of these directly. Leave out the ones you’re happy with.
Surfaces
background | The main window. |
|---|---|
foreground | Main text (same as "text" unless set). |
card | Cards: the message box, tool cards, settings panels. |
card-foreground | Text on cards. |
popover | Menus, dropdowns and tooltips. |
popover-foreground | Text in menus. |
sidebar | The chat list and side panels (same as "sidebar" above unless set). |
sidebar-foreground | Text in the sidebar. |
sidebar-accent | Hovered and selected rows in the sidebar. |
sidebar-border | Lines in the sidebar. |
code | Code blocks and the script editor's background. |
Controls
primary | Main buttons, like Send (the accent unless set). |
|---|---|
primary-foreground | Text on main buttons (black or white is picked for you). |
secondary | Secondary buttons. |
secondary-foreground | Text on secondary buttons. |
accent | Hovered menu items and rows. |
accent-foreground | Text on hovered rows. |
muted | Quiet backgrounds: badges, inline code, empty states. |
muted-foreground | Secondary text: hints, timestamps, descriptions. |
border | Lines and outlines. |
input | Text field outlines. |
ring | The focus outline (the accent unless set). |
link | Links in replies. |
selection | Selected text (use a see-through color, like rgb(34 195 221 / 30%)). |
Status
destructive | Errors and delete buttons. |
|---|---|
success | Done and connected. |
warning | Warnings and things that need attention. |
Code (Luau)
The script editor and code in replies.
lx-keyword | local, function, if, return… |
|---|---|
lx-string | "strings" |
lx-number | Numbers. |
lx-literal | true, false, nil. |
lx-comment | -- comments |
lx-function | Function names. |
lx-builtin | Roblox globals: game, workspace, Instance… |
lx-type | Type annotations. |
lx-property | Properties after a dot. |
lx-operator | Operators and punctuation. |
Thinking and memory
The thinking slider and the memory ring. Most themes leave these alone.
effort-off | Thinking off. |
|---|---|
effort-minimal | Minimal. |
effort-low | Low. |
effort-medium | Medium. |
effort-high | High. |
effort-xhigh | Extra high. |
effort-max | Max. |
ctx-0 | Memory ring, nearly empty. |
ctx-1 | … |
ctx-2 | …half full. |
ctx-3 | … |
ctx-4 | …nearly full. |
ctx-tools | Memory breakdown: instructions and tools. |
ctx-conversation | …the conversation. |
ctx-attachments | …attachments. |
ctx-draft | …your unsent message. |
Tips
- Start by duplicating a built-in theme. Its file shows real values for many of these colors.
- Keep enough contrast between
textandbackground; check quiet text (hints, timestamps) too. - Give both versions if you can, so the theme works in light and dark mode.
- Theme files can be up to 128 KB, which is far more than any theme needs.