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#e8e8f4
  • activityBar.border#d8d8ee
  • activityBar.foreground#1e212b
  • activityBar.inactiveForeground#9090b0
  • badge.background#fb62f6
  • badge.foreground#ffffff
  • breadcrumb.foreground#6060a0
  • button.background#645dd7
  • button.foreground#ffffff
  • button.hoverBackground#7870e8
  • dropdown.background#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#fb62f630
  • editor.findMatchHighlightBackground#fb62f618
  • editor.foreground#1e212b
  • editor.inactiveSelectionBackground#645dd718
  • editor.lineHighlightBackground#f5f5ff
  • editor.selectionBackground#645dd730
  • editorCursor.foreground#fb62f6
  • editorError.foreground#f14c4c
  • editorGroup.border#d8d8ee
  • editorGroupHeader.tabsBackground#f2f2fa
  • editorIndentGuide.activeBackground1#c0c0e0
  • editorIndentGuide.background1#e8e8f4
  • editorLineNumber.activeForeground#645dd7
  • editorLineNumber.foreground#c0c0d8
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#d8d8ee
  • focusBorder#645dd7
  • gitDecoration.addedResourceForeground#2a8a50
  • gitDecoration.deletedResourceForeground#d040d0
  • gitDecoration.ignoredResourceForeground#b0b0c8
  • gitDecoration.modifiedResourceForeground#645dd7
  • gitDecoration.untrackedResourceForeground#2a8a50
  • input.background#ffffff
  • input.border#c0c0e0
  • list.activeSelectionBackground#ddddf8
  • list.activeSelectionForeground#1e212b
  • list.hoverBackground#eaeaf6
  • list.inactiveSelectionBackground#eaeaf6
  • notifications.background#ffffff
  • panel.background#f2f2fa
  • panel.border#d8d8ee
  • peekView.border#645dd7
  • peekViewEditor.background#f2f2fa
  • peekViewEditor.matchHighlightBackground#fb62f625
  • peekViewResult.background#e8e8f4
  • peekViewResult.matchHighlightBackground#fb62f625
  • peekViewTitle.background#ffffff
  • quickInput.background#f2f2fa
  • scrollbarSlider.activeBackground#645dd750
  • scrollbarSlider.background#c0c0d860
  • scrollbarSlider.hoverBackground#a0a0c080
  • sideBar.background#f2f2fa
  • sideBar.border#d8d8ee
  • sideBar.foreground#1e212b
  • statusBar.background#645dd7
  • statusBar.debuggingBackground#fb62f6
  • statusBar.debuggingBorder#fb62f6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#645dd7
  • tab.activeBackground#ffffff
  • tab.activeForeground#1e212b
  • tab.border#e8e8f4
  • tab.inactiveBackground#f2f2fa
  • tab.inactiveForeground#7070a0
  • terminal.background#f2f2fa
  • textLink.activeForeground#1e212b
  • textLink.foreground#645dd7
  • titleBar.activeBackground#e8e8f4
  • titleBar.activeForeground#1e212b
  • titleBar.inactiveBackground#e8e8f4
  • titleBar.inactiveForeground#9090b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a0a0c0italic
keyword, keyword.control, keyword.operator.new, storage.modifier#c020c0
storage.type, keyword.declaration#c020c0italic
entity.name.function, meta.definition.method entity.name.function#4a44b0
meta.function-call.generic, variable.function#5550c0
string, string.quoted, string.template#2a8a50
constant.numeric#b85a00
constant.language#c020c0
entity.name.type, entity.name.class, support.class#b85a00
support.type, meta.type.annotation entity.name.type#4a44b0
variable.parameter#3a3480italic
variable, variable.other#1e212b
punctuation, meta.brace, punctuation.separator, punctuation.terminator#a0a0c0
keyword.operator#4a44b0
meta.decorator, entity.name.function.decorator, punctuation.decorator#b85a00italic
support.function, support.function.builtin#5550c0
variable.other.property, variable.other.object.property, support.variable.property#1e212b
entity.name.tag#c020c0
entity.other.attribute-name#4a44b0
string.regexp#b85a00
constant.character.escape#c020c0