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#101110
  • activityBar.border#0e0f0e
  • activityBar.foreground#f9f9f9
  • activityBar.inactiveForeground#555655
  • badge.background#ff4242
  • badge.foreground#f9f9f9
  • breadcrumb.foreground#888988
  • button.background#5aa9e6
  • button.foreground#1a1b1a
  • button.hoverBackground#7fc8f8
  • dropdown.background#1a1b1a
  • editor.background#1a1b1a
  • editor.findMatchBackground#ff424240
  • editor.findMatchHighlightBackground#ff424220
  • editor.foreground#f9f9f9
  • editor.inactiveSelectionBackground#5aa9e620
  • editor.lineHighlightBackground#1f201f
  • editor.selectionBackground#5aa9e640
  • editorCursor.foreground#ff4242
  • editorError.foreground#f14c4c
  • editorGroup.border#0e0f0e
  • editorGroupHeader.tabsBackground#141514
  • editorIndentGuide.activeBackground1#3a3b3a
  • editorIndentGuide.background1#222322
  • editorLineNumber.activeForeground#7fc8f8
  • editorLineNumber.foreground#3a3b3a
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#2a2b2a
  • focusBorder#5aa9e6
  • gitDecoration.addedResourceForeground#5aa9e6
  • gitDecoration.deletedResourceForeground#ff4242
  • gitDecoration.ignoredResourceForeground#444544
  • gitDecoration.modifiedResourceForeground#7fc8f8
  • gitDecoration.untrackedResourceForeground#a0d0f0
  • input.background#1a1b1a
  • input.border#333433
  • list.activeSelectionBackground#2a2b2a
  • list.activeSelectionForeground#f9f9f9
  • list.hoverBackground#222322
  • list.inactiveSelectionBackground#222322
  • notifications.background#1a1b1a
  • panel.background#141514
  • panel.border#0e0f0e
  • peekView.border#5aa9e6
  • peekViewEditor.background#141514
  • peekViewEditor.matchHighlightBackground#ff424230
  • peekViewResult.background#101110
  • peekViewResult.matchHighlightBackground#ff424230
  • peekViewTitle.background#1a1b1a
  • quickInput.background#141514
  • scrollbarSlider.activeBackground#5aa9e660
  • scrollbarSlider.background#3a3b3a60
  • scrollbarSlider.hoverBackground#4a4b4a80
  • sideBar.background#141514
  • sideBar.border#0e0f0e
  • sideBar.foreground#c8c9c8
  • statusBar.background#2a2b2a
  • statusBar.debuggingBackground#ff4242
  • statusBar.debuggingBorder#ff4242
  • statusBar.debuggingForeground#f9f9f9
  • statusBar.foreground#f9f9f9
  • statusBar.noFolderBackground#2a2b2a
  • tab.activeBackground#1a1b1a
  • tab.activeForeground#f9f9f9
  • tab.border#101110
  • tab.inactiveBackground#141514
  • tab.inactiveForeground#666766
  • terminal.background#141514
  • textLink.activeForeground#f9f9f9
  • textLink.foreground#7fc8f8
  • titleBar.activeBackground#101110
  • titleBar.activeForeground#f9f9f9
  • titleBar.inactiveBackground#101110
  • titleBar.inactiveForeground#555655

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a3b3aitalic
keyword, keyword.control, keyword.operator.new, storage.modifier#ff4242
storage.type, keyword.declaration#ff4242italic
entity.name.function, meta.definition.method entity.name.function#7fc8f8
meta.function-call.generic, variable.function#5aa9e6
string, string.quoted, string.template#5aa9e6
constant.numeric#c8a060
constant.language#ff4242
entity.name.type, entity.name.class, support.class#c8a060
support.type, meta.type.annotation entity.name.type#7fc8f8
variable.parameter#a0c8e8italic
variable, variable.other#f9f9f9
punctuation, meta.brace, punctuation.separator, punctuation.terminator#444544
keyword.operator#7fc8f8
meta.decorator, entity.name.function.decorator, punctuation.decorator#c8a060italic
support.function, support.function.builtin#5aa9e6
variable.other.property, variable.other.object.property, support.variable.property#c8c9c8
entity.name.tag#ff4242
entity.other.attribute-name#7fc8f8
string.regexp#5aa9e6
constant.character.escape#ff4242