Themes · Ember · rbx.lol

Switching theme#

One call. Everything already on screen repaints, including notifications:

Luau

Ember.SetTheme("Midnight")

Let the user choose:

Luau

settings:Dropdown({
    Text = "Theme",
    Options = Ember.ThemeNames(),
    Default = "Dark",
    Save = "theme",
    Callback = function(name) Ember.SetTheme(name) end,
})

The nine built in#

Dark

Midnight

Slate

Nord

Rose

Mono

Ember

Ocean

Grape

Set the one your script opens with before creating a window:

Luau

Ember.Configure({ Themes = { Default = "Nord" } })

Restricting the list#

Publishing a script with a fixed look? Limit what ThemeNames() returns:

Luau

-- Only these, in this order
Ember.Configure({ Themes = { Only = { "Dark", "Midnight", "Ember" } } })
 
-- Everything except these
Ember.Configure({ Themes = { Hide = { "Mono", "Rose" } } })

Only wins if you set both.

The fourteen roles#

A theme is fourteen colours. Nothing else — no images, no gradients to configure.

Role	What it paints	Where you see it
`bg`	Window background	Behind everything, and inside inputs.
`panel`	Sidebar	The section rail on the left.
`panel2`	Card surface	Every control's card.
`panel3`	Hover surface	A card or row under the cursor.
`border`	Hairline border	The 1px outline on cards and controls.
`border2`	Strong border	Dividers and the resize grip.
`text`	Body text	Titles and values.
`muted`	Secondary text	Labels and inactive tabs.
`faint`	Placeholder text	Descriptions and placeholders.
`accent`	Accent	Buttons, toggles, the active tab pip.
`accentInk`	Text on accent	Text ON a filled accent button. Keep it dark.
`danger`	Danger / delete	Delete buttons and warnings.
`hover`	Control hover fill	Fill behind a hovered control.
`scrollIdle`	Scrollbar at rest	The scrollbar before you touch it.

Understanding four of them covers most of what you would want to change:

accent is the brand colour. Toggles, the active tab pip, filled buttons, slider fills.
bg is behind everything, and inside input fields.
panel2 is every control's card.
text is titles and values; muted is labels; faint is descriptions and placeholders.

accentInk has to stay dark

accentInk is the text on a filled accent button. If you set the accent to a pale colour and leave accentInk light, filled buttons become unreadable.

Reading the current theme#

Luau

Ember.Theme.accent      --> Color3
Ember.Theme.panel2      --> Color3
 
Ember.ThemeNames()      --> { "Dark", "Midnight", … }
Ember.ThemeRoles        --> { "bg", "panel", … } every role name
Ember.ThemeRoleLabel("panel2")   --> "Card surface"
Ember.IsBuiltInTheme("Dark")     --> true

Ember.Theme is live: after SetTheme, reading it gives the new colours. Use it to paint your own GUI elements so they match:

Luau

myLabel.TextColor3 = Ember.Theme.text
myFrame.BackgroundColor3 = Ember.Theme.panel2

To keep them matching when the theme changes:

Luau

Ember.OnThemeApplied(function()
    myLabel.TextColor3 = Ember.Theme.text
    myFrame.BackgroundColor3 = Ember.Theme.panel2
end)

Making your own#

See Custom themes for registering, saving, importing and exporting palettes, and for the built-in theme editor.