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#e74c3c
  • activityBar.dropBackground#21272e
  • activityBar.foreground#21272e
  • activityBarBadge.background#21272e
  • activityBarBadge.foreground#f8f8f0
  • button.background#53df83
  • button.foreground#21272e
  • button.hoverBackground#30c965
  • dropdown.background#21272e
  • dropdown.border#53df83
  • dropdown.foreground#53df83
  • dropdown.listBackground#181A1F
  • editor.background#21272e
  • editor.findMatchBackground#1abc9c80
  • editor.findMatchHighlightBackground#56b5c240
  • editor.foreground#f8f8f0
  • editor.lineHighlightBackground#161416
  • editor.selectionBackground#56b5c280
  • editor.wordHighlightBackground#161416
  • editorCursor.foreground#1abc9c
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#181A1F
  • editorHoverWidget.background#282C34
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorSuggestWidget.background#21272e
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21272e
  • input.background#161416
  • input.border#10151a
  • input.foreground#f8f8f0
  • inputOption.activeBorder#10151a
  • inputValidation.errorBackground#e74c3c
  • inputValidation.errorBorder#10151a
  • inputValidation.infoBackground#e74c3c
  • inputValidation.infoBorder#10151a
  • inputValidation.warningBackground#e74c3c
  • list.activeSelectionBackground#e74c3c
  • list.activeSelectionForeground#f8f8f0
  • list.focusBackground#e74c3c
  • list.focusForeground#f8f8f0
  • list.hoverBackground#e74c3c
  • list.hoverForeground#f8f8f0
  • list.inactiveSelectionBackground#21272e
  • menu.background#21272e
  • menu.foreground#f8f8f0
  • pickerGroup.foreground#f8f8f0
  • quickInput.background#21272e
  • quickInput.foreground#f8f8f0
  • quickInputTitle.background#e74c3c
  • sideBar.background#181A1F
  • sideBarSectionHeader.background#21272e
  • statusBar.background#21272e
  • statusBar.debuggingBackground#21272e
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21272e
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#262D35
  • tab.activeForeground#f8f8f0
  • tab.border#181A1F
  • tab.inactiveBackground#1B1F23
  • tab.inactiveForeground#737c8c
  • titleBar.activeBackground#21272e
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21272e
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name, support.variable, variable#f8f8f0
markup.inline.raw, storage.type, support.constant, support.type, support.class#1abc9c
constant, keyword.other.unit#56b6c2
comment#606F73
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator#1abc9c
string, markup.quote, markup.bold, markup.italic#53df83
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, support.function#e74c3c
entity.name.tag, storage, variable.language#9cd230
keyword, punctuation.definition.keyword#e74c3c
markup.bold.markdown, punctuation.definition.bold.markdownbold
comment, markup.italic.markdown, punctuation.definition.italic.markdownitalic