Roblox Studio Themes

Color themes

• 

  Roblox Studio Light Extra 1

• 

  Roblox Studio Light Extra 2

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.background#ffffff
• activityBar.border#bcbec8
• activityBar.foreground#000000
• activityBarBadge.background#335fff
• activityBarBadge.foreground#ffffff
• activityErrorBadge.background#df281f
• activityErrorBadge.foreground#ffffff
• activityWarningBadge.background#f57630
• activityWarningBadge.foreground#ffffff
• badge.background#335fff
• badge.foreground#ffffff
• breadcrumb.background#ffffff
• button.background#335fff
• button.border#bcbec8
• button.foreground#ffffff
• button.hoverBackground#528bff
• button.secondaryBackground#ffffff
• button.secondaryForeground#000000
• button.secondaryHoverBackground#ebf1ff
• button.separator#bcbec8
• diffEditor.insertedTextBackground#e6e7ea
• diffEditor.removedTextBackground#ffdfde
• editor.background#353741
• editor.findMatchBackground#d0dafe
• editor.findMatchHighlightBackground#fae4aa
• editor.findMatchHighlightForeground#000000
• editor.foreground#d5d7dd
• editor.lineHighlightBackground#494d5a
• editor.selectionBackground#d0dafe
• editorError.foreground#df281f
• editorGroup.border#bcbec8
• editorGroupHeader.border#bcbec8
• editorGroupHeader.tabsBackground#eeeff1
• editorGroupHeader.tabsBorder#bcbec8
• editorGutter.addedBackground#d0fbe3
• editorGutter.deletedBackground#f7cdcb
• editorHint.foreground#335fff
• editorInfo.foreground#bcbec8
• editorLineNumber.activeForeground#000000
• editorLineNumber.foreground#6a6f81
• editorWarning.foreground#0035f5
• editorWhitespace.foreground#bcbec8
• focusBorder#bcbec8
• foreground#000000
• icon.foreground#000000
• input.background#ffffff
• input.border#bcbec8
• list.activeSelectionBackground#d0dafe
• list.activeSelectionForeground#000000
• list.errorForeground#df281f
• list.inactiveSelectionBackground#ebf1ff
• list.inactiveSelectionForeground#000000
• list.warningForeground#f57630
• menu.background#f7f7f8
• menu.foreground#000000
• menu.selectionBackground#d0dafe
• menu.separatorBackground#bcbec8
• menubar.selectionForeground#000000
• scrollbar.background#eeeff1
• scrollbar.shadow#eeeff1
• scrollbarSlider.activeBackground#d5d7dd
• scrollbarSlider.background#ffffff
• scrollbarSlider.hoverBackground#ebf1ff
• selection.background#d0dafe
• sideBar.background#ffffff
• sideBar.border#bcbec8
• sideBarSectionHeader.background#e6e7ea
• statusBar.background#ffffff
• statusBar.border#bcbec8
• statusBar.foreground#000000
• tab.activeBackground#ffffff
• tab.border#bcbec8
• tab.inactiveBackground#eeeff1
• textLink.activeForeground#528bff
• textLink.foreground#528bff
• titleBar.activeBackground#e6e7ea
• titleBar.activeForeground#000000
• titleBar.border#bcbec8
• titleBar.inactiveBackground#e6e7ea
• titleBar.inactiveForeground#000000
• widget.shadow#eeeff1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).