Skip to main content
Coding Theme

Color themes

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#1d1f23
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#f8fafd
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#121212
  • editor.findMatchHighlightBackground#31436592
  • editor.lineHighlightBackground#1d1f23
  • editor.selectionBackground#3e4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#704040
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#181a1f
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background1#3b4048
  • editorIndentGuide.background2#3b4048
  • editorIndentGuide.background3#3b4048
  • editorIndentGuide.background4#3b4048
  • editorIndentGuide.background5#3b4048
  • editorIndentGuide.background6#3b4048
  • editorInfo.foreground#707040
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#484a50
  • editorWidget.background#181a1f
  • focusBorder#181a1f
  • input.background#1d1f23
  • list.activeSelectionBackground#121212
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#121212
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#d7dae0
  • peekView.border#202020
  • peekViewEditor.background#202020
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#181a1f
  • sideBar.border#1d1f23
  • sideBarSectionHeader.background#181a1f
  • statusBar.background#020202
  • statusBar.debuggingBackground#020202
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#020202
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#121212
  • tab.border#181a1f
  • tab.inactiveBackground#181a1f
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.function.critical.lua#ff2a2abold
support.function.call.lua#ff5500italic
storage.modifier.local.lua#626262italic
variable.other.lua#82d3ffitalic
variable.other.readwrite.lua#82aeff—
entity.name.function.lua#d9ff5aitalic
support.function.lua#fff3c3bold
keyword.control.luau#E06C75—
comment.line.critical.lua#CC666680—
comment.line.critical.bold.lua#CC6666CCbold
comment.line.warning.lua#C4C97780—
comment.line.warning.bold.lua#C4C977CCbold
comment.line.note.lua#8EC07C80—
comment.line.note.bold.lua#8EC07CCCbold
comment.line.tagged.todo.lua#FFFF0080bold
comment.line.tagged.fixme.lua#FFA50080bold
comment.line.tagged.note.lua#FFFFFF80bold
comment.line.suffix.lua#FF8C0080—
comment.line.double-dash.lua#7C7C7C80—
comment.block.lua#7C7C7C80—
—#bbbbbbff—
string#e5c07b—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#c678dd—
string.template.js#e5c07b—
meta.template.expression.js#abb2bf—
constant.numeric#c678dd—
string.embedded.begin, string.embedded.end#c678dd—
string.embedded#98c379—
constant.language#56b6c2—
constant.character, constant.other#56b6c2—
variable.language#e06c75—
variable.readwrite, variable.readwrite.other.block#61afef—
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75—
keyword.operator#e06c75—
storage#e06c75—
storage.type#56b6c2—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef—
variable.other.object#61afef—
variable.other.property, variable.other.block#abb2bf—
entity.other.inherited-class#98c379—
entity.name.function, support.function#98c379—
variable.parameter#d19a66italic
entity.name.function-call#abb2bf—
function.support.builtin, function.support.core#98c379—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#e06c75—
entity.name.tag.class, entity.name.tag.id#56b6c2—
entity.other.attribute-name#98c379—
support.constant#56b6c2—
support.type, support.variable#56b6c2—
support.dictionary.json#56b6c2—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379—
variable.css, variable.scss, variable.less, variable.sass#56b6c2—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b—
unit.css, unit.scss, unit.less, unit.sass#c678dd—
function.css, function.scss, function.less, function.sass#56b6c2—
support.other.variable—
invalid#F8F8F0—
invalid.deprecated#F8F8F0—
structure.dictionary.property-name.json#56b6c2—
string.detected-link#61afef—
meta.diff, meta.diff.header#75715E—
markup.deleted#c678dd—
markup.inserted#e5c07b—
markup.changed#e5c07b—
constant.numeric.line-number.find-in-files - match#56b6c2A0—
entity.name.filename.find-in-files#e5c07b—
markup.italic, markup.italic.markdown—italic
punctuation.definition.italic.markdown#696969
markup.underline.link.markdown#61afef—
markup.bold.markdown—bold
punctuation.definition.bold.markdown#696969
markup.heading.markdown#e06c75bold
punctuation.definition.heading.markdown#696969
markup.quote.markdown#98c379—
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2—
punctuation.definition.list_item.markdown#ffffffbold
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
Luaux-Starlit by Starlit - VS Code Theme