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.activeBorder#7bc1e8
  • activityBar.background#0c1215
  • activityBar.border#373e41
  • activityBar.foreground#7bc1e8
  • activityBar.inactiveForeground#677379
  • activityBarBadge.background#7bc1e8
  • activityBarBadge.foreground#11191d
  • badge.background#7bc1e8
  • badge.foreground#11191d
  • breadcrumb.activeSelectionForeground#7bc1e8
  • breadcrumb.focusForeground#d6dde0
  • breadcrumb.foreground#677379
  • button.background#7bc1e8
  • button.foreground#11191d
  • button.hoverBackground#8dcaeb
  • descriptionForeground#94a1a8
  • dropdown.background#242b2f
  • dropdown.border#373e41
  • dropdown.foreground#d6dde0
  • editor.background#11191d
  • editor.findMatchBackground#7bc1e873
  • editor.findMatchHighlightBackground#7bc1e838
  • editor.foreground#d6dde0
  • editor.lineHighlightBackground#2e353866
  • editor.selectionBackground#7bc1e852
  • editor.selectionHighlightBackground#7bc1e829
  • editor.wordHighlightBackground#7bc1e829
  • editor.wordHighlightStrongBackground#7bc1e83d
  • editorBracketMatch.background#7bc1e829
  • editorBracketMatch.border#7bc1e899
  • editorCursor.foreground#7bc1e8
  • editorError.foreground#f38ba8
  • editorGroup.border#373e41
  • editorGroupHeader.tabsBackground#0f161a
  • editorGroupHeader.tabsBorder#373e41
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#a9b2f1
  • editorHoverWidget.background#242b2f
  • editorHoverWidget.border#373e41
  • editorIndentGuide.activeBackground1#7bc1e899
  • editorIndentGuide.background1#373e41
  • editorInfo.foreground#7bc1e8
  • editorLineNumber.activeForeground#7bc1e8
  • editorLineNumber.foreground#677379
  • editorSuggestWidget.background#242b2f
  • editorSuggestWidget.selectedBackground#7bc1e83d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#677379
  • editorWidget.background#242b2f
  • editorWidget.border#373e41
  • errorForeground#f38ba8
  • focusBorder#7bc1e880
  • foreground#94a1a8
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#a9b2f1
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#242b2f
  • input.border#373e41
  • input.foreground#d6dde0
  • input.placeholderForeground#677379
  • inputOption.activeBackground#7bc1e83d
  • inputOption.activeBorder#7bc1e8
  • list.activeSelectionBackground#7bc1e847
  • list.activeSelectionForeground#d6dde0
  • list.focusBackground#7bc1e847
  • list.highlightForeground#7bc1e8
  • list.hoverBackground#32393d80
  • list.inactiveSelectionBackground#7bc1e829
  • minimap.selectionHighlight#7bc1e880
  • panel.background#0f161a
  • panel.border#373e41
  • panelTitle.activeBorder#7bc1e8
  • panelTitle.activeForeground#d6dde0
  • panelTitle.inactiveForeground#677379
  • peekViewEditor.background#11191d
  • peekViewResult.background#0f161a
  • progressBar.background#7bc1e8
  • quickInput.background#242b2f
  • quickInput.foreground#d6dde0
  • quickInputList.focusBackground#7bc1e83d
  • scrollbarSlider.activeBackground#7bc1e88c
  • scrollbarSlider.background#7bc1e838
  • scrollbarSlider.hoverBackground#7bc1e861
  • selection.background#7bc1e857
  • sideBar.background#0f161a
  • sideBar.border#373e41
  • sideBar.foreground#94a1a8
  • sideBarSectionHeader.background#0f161a
  • sideBarSectionHeader.foreground#d6dde0
  • sideBarTitle.foreground#d6dde0
  • statusBar.background#0c1215
  • statusBar.border#373e41
  • statusBar.debuggingBackground#7bc1e8
  • statusBar.debuggingForeground#11191d
  • statusBar.foreground#94a1a8
  • statusBar.noFolderBackground#0c1215
  • statusBarItem.remoteBackground#7bc1e8
  • statusBarItem.remoteForeground#11191d
  • tab.activeBackground#11191d
  • tab.activeBorder#7bc1e8b3
  • tab.activeBorderTop#7bc1e8
  • tab.activeForeground#d6dde0
  • tab.border#0c1215
  • tab.inactiveBackground#0f161a
  • tab.inactiveForeground#677379
  • terminal.background#11191d
  • terminal.foreground#d6dde0
  • terminalCursor.foreground#7bc1e8
  • textLink.activeForeground#90cbec
  • textLink.foreground#7bc1e8
  • titleBar.activeBackground#0c1215
  • titleBar.activeForeground#d6dde0
  • titleBar.border#373e41
  • titleBar.inactiveBackground#0c1215
  • titleBar.inactiveForeground#677379
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#677379italic
string, string.quoted, string.template#e5a0bd
constant.numeric, constant.language, constant.character, constant.other#e5a880
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#7bc1e8
keyword.operator, punctuation, meta.brace#94a1a8
entity.name.function, support.function, meta.function-call.generic#b5bf7b
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#6ccac5
variable, variable.other, meta.definition.variable.name#d6dde0
variable.parameter, variable.other.readwrite#d6dde0
variable.language, variable.other.constant, support.variable#e5a880
entity.name.tag, punctuation.definition.tag#7bc1e8
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#a9b2f1
markup.heading, entity.name.section#7bc1e8bold
markup.bold#e5a880bold
markup.italic#e5a0bditalic
markup.inline.raw, markup.fenced_code#b5bf7b
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8