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#e8e8e8
  • activityBar.border#d8d8d8
  • activityBar.foreground#2a2b2a
  • activityBar.inactiveForeground#999a99
  • badge.background#ff4242
  • badge.foreground#ffffff
  • breadcrumb.foreground#666766
  • button.background#5aa9e6
  • button.foreground#ffffff
  • button.hoverBackground#7fc8f8
  • dropdown.background#f9f9f9
  • editor.background#f9f9f9
  • editor.findMatchBackground#ff424230
  • editor.findMatchHighlightBackground#ff424215
  • editor.foreground#1a1b1a
  • editor.inactiveSelectionBackground#5aa9e620
  • editor.lineHighlightBackground#f0f8ff
  • editor.selectionBackground#5aa9e640
  • editorCursor.foreground#ff4242
  • editorError.foreground#f14c4c
  • editorGroup.border#d8d8d8
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorIndentGuide.activeBackground1#c8c8c8
  • editorIndentGuide.background1#e8e8e8
  • editorLineNumber.activeForeground#5aa9e6
  • editorLineNumber.foreground#c0c0c0
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#d8d8d8
  • focusBorder#5aa9e6
  • gitDecoration.addedResourceForeground#3a8a6a
  • gitDecoration.deletedResourceForeground#ff4242
  • gitDecoration.ignoredResourceForeground#b0b0b0
  • gitDecoration.modifiedResourceForeground#5aa9e6
  • gitDecoration.untrackedResourceForeground#3a8a6a
  • input.background#ffffff
  • input.border#c8c8c8
  • list.activeSelectionBackground#d8e8f8
  • list.activeSelectionForeground#1a1b1a
  • list.hoverBackground#eaeaea
  • list.inactiveSelectionBackground#e4e4e4
  • notifications.background#f9f9f9
  • panel.background#f0f0f0
  • panel.border#d8d8d8
  • peekView.border#5aa9e6
  • peekViewEditor.background#f0f0f0
  • peekViewEditor.matchHighlightBackground#ff424225
  • peekViewResult.background#e8e8e8
  • peekViewResult.matchHighlightBackground#ff424225
  • peekViewTitle.background#f9f9f9
  • quickInput.background#f0f0f0
  • scrollbarSlider.activeBackground#5aa9e660
  • scrollbarSlider.background#c0c0c060
  • scrollbarSlider.hoverBackground#a0a0a080
  • sideBar.background#f0f0f0
  • sideBar.border#d8d8d8
  • sideBar.foreground#2a2b2a
  • statusBar.background#2a2b2a
  • statusBar.debuggingBackground#ff4242
  • statusBar.debuggingBorder#ff4242
  • statusBar.debuggingForeground#f9f9f9
  • statusBar.foreground#f9f9f9
  • statusBar.noFolderBackground#2a2b2a
  • tab.activeBackground#f9f9f9
  • tab.activeForeground#1a1b1a
  • tab.border#e8e8e8
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#888988
  • terminal.background#f0f0f0
  • textLink.activeForeground#2a2b2a
  • textLink.foreground#5aa9e6
  • titleBar.activeBackground#e8e8e8
  • titleBar.activeForeground#2a2b2a
  • titleBar.inactiveBackground#e8e8e8
  • titleBar.inactiveForeground#999a99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b0b0b0italic
keyword, keyword.control, keyword.operator.new, storage.modifier#d42020
storage.type, keyword.declaration#d42020italic
entity.name.function, meta.definition.method entity.name.function#2a7ab0
meta.function-call.generic, variable.function#3a90c8
string, string.quoted, string.template#3a90c8
constant.numeric#7a6020
constant.language#d42020
entity.name.type, entity.name.class, support.class#7a6020
support.type, meta.type.annotation entity.name.type#2a7ab0
variable.parameter#2a5a80italic
variable, variable.other#1a1b1a
punctuation, meta.brace, punctuation.separator, punctuation.terminator#b0b0b0
keyword.operator#2a7ab0
meta.decorator, entity.name.function.decorator, punctuation.decorator#7a6020italic
support.function, support.function.builtin#3a90c8
variable.other.property, variable.other.object.property, support.variable.property#2a2b2a
entity.name.tag#d42020
entity.other.attribute-name#2a7ab0
string.regexp#3a90c8
constant.character.escape#d42020