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#7bc1ed
  • activityBar.background#0c1115
  • activityBar.border#373d41
  • activityBar.foreground#7bc1ed
  • activityBar.inactiveForeground#677279
  • activityBarBadge.background#7bc1ed
  • activityBarBadge.foreground#11181d
  • badge.background#7bc1ed
  • badge.foreground#11181d
  • breadcrumb.activeSelectionForeground#7bc1ed
  • breadcrumb.focusForeground#d6dce0
  • breadcrumb.foreground#677279
  • button.background#7bc1ed
  • button.foreground#11181d
  • button.hoverBackground#8dcaf0
  • descriptionForeground#94a0a8
  • dropdown.background#242a2f
  • dropdown.border#373d41
  • dropdown.foreground#d6dce0
  • editor.background#11181d
  • editor.findMatchBackground#7bc1ed73
  • editor.findMatchHighlightBackground#7bc1ed38
  • editor.foreground#d6dce0
  • editor.lineHighlightBackground#2e343866
  • editor.selectionBackground#7bc1ed52
  • editor.selectionHighlightBackground#7bc1ed29
  • editor.wordHighlightBackground#7bc1ed29
  • editor.wordHighlightStrongBackground#7bc1ed3d
  • editorBracketMatch.background#7bc1ed29
  • editorBracketMatch.border#7bc1ed99
  • editorCursor.foreground#7bc1ed
  • editorError.foreground#f38ba8
  • editorGroup.border#373d41
  • editorGroupHeader.tabsBackground#0f151a
  • editorGroupHeader.tabsBorder#373d41
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#acb1f3
  • editorHoverWidget.background#242a2f
  • editorHoverWidget.border#373d41
  • editorIndentGuide.activeBackground1#7bc1ed99
  • editorIndentGuide.background1#373d41
  • editorInfo.foreground#7bc1ed
  • editorLineNumber.activeForeground#7bc1ed
  • editorLineNumber.foreground#677279
  • editorSuggestWidget.background#242a2f
  • editorSuggestWidget.selectedBackground#7bc1ed3d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#677279
  • editorWidget.background#242a2f
  • editorWidget.border#373d41
  • errorForeground#f38ba8
  • focusBorder#7bc1ed80
  • foreground#94a0a8
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#acb1f3
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#242a2f
  • input.border#373d41
  • input.foreground#d6dce0
  • input.placeholderForeground#677279
  • inputOption.activeBackground#7bc1ed3d
  • inputOption.activeBorder#7bc1ed
  • list.activeSelectionBackground#7bc1ed47
  • list.activeSelectionForeground#d6dce0
  • list.focusBackground#7bc1ed47
  • list.highlightForeground#7bc1ed
  • list.hoverBackground#32383d80
  • list.inactiveSelectionBackground#7bc1ed29
  • minimap.selectionHighlight#7bc1ed80
  • panel.background#0f151a
  • panel.border#373d41
  • panelTitle.activeBorder#7bc1ed
  • panelTitle.activeForeground#d6dce0
  • panelTitle.inactiveForeground#677279
  • peekViewEditor.background#11181d
  • peekViewResult.background#0f151a
  • progressBar.background#7bc1ed
  • quickInput.background#242a2f
  • quickInput.foreground#d6dce0
  • quickInputList.focusBackground#7bc1ed3d
  • scrollbarSlider.activeBackground#7bc1ed8c
  • scrollbarSlider.background#7bc1ed38
  • scrollbarSlider.hoverBackground#7bc1ed61
  • selection.background#7bc1ed57
  • sideBar.background#0f151a
  • sideBar.border#373d41
  • sideBar.foreground#94a0a8
  • sideBarSectionHeader.background#0f151a
  • sideBarSectionHeader.foreground#d6dce0
  • sideBarTitle.foreground#d6dce0
  • statusBar.background#0c1115
  • statusBar.border#373d41
  • statusBar.debuggingBackground#7bc1ed
  • statusBar.debuggingForeground#11181d
  • statusBar.foreground#94a0a8
  • statusBar.noFolderBackground#0c1115
  • statusBarItem.remoteBackground#7bc1ed
  • statusBarItem.remoteForeground#11181d
  • tab.activeBackground#11181d
  • tab.activeBorder#7bc1edb3
  • tab.activeBorderTop#7bc1ed
  • tab.activeForeground#d6dce0
  • tab.border#0c1115
  • tab.inactiveBackground#0f151a
  • tab.inactiveForeground#677279
  • terminal.background#11181d
  • terminal.foreground#d6dce0
  • terminalCursor.foreground#7bc1ed
  • textLink.activeForeground#90cbf0
  • textLink.foreground#7bc1ed
  • titleBar.activeBackground#0c1115
  • titleBar.activeForeground#d6dce0
  • titleBar.border#373d41
  • titleBar.inactiveBackground#0c1115
  • titleBar.inactiveForeground#677279
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#677279italic
string, string.quoted, string.template#e99eb9
constant.numeric, constant.language, constant.character, constant.other#e6a87b
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#7bc1ed
keyword.operator, punctuation, meta.brace#94a0a8
entity.name.function, support.function, meta.function-call.generic#b1c07a
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#66cbc9
variable, variable.other, meta.definition.variable.name#d6dce0
variable.parameter, variable.other.readwrite#d6dce0
variable.language, variable.other.constant, support.variable#e6a87b
entity.name.tag, punctuation.definition.tag#7bc1ed
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#acb1f3
markup.heading, entity.name.section#7bc1edbold
markup.bold#e6a87bbold
markup.italic#e99eb9italic
markup.inline.raw, markup.fenced_code#b1c07a
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8