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.activeBackground#3d3d3d
  • activityBar.activeBorder#00a0df
  • activityBar.activeFocusBorder#00a0df
  • activityBar.background#2d2d2d
  • activityBar.border#1d1d1d
  • activityBar.dropBorder#00a0df
  • activityBar.foreground#e0e0e0
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#0b5cab
  • activityBarBadge.foreground#ffffff
  • badge.background#0b5cab
  • badge.foreground#ffffff
  • button.background#00a0df
  • button.foreground#ffffff
  • button.hoverBackground#007aaa
  • button.secondaryBackground#2d2d2d
  • button.secondaryForeground#00a0df
  • button.secondaryHoverBackground#0b5cab
  • button.separator#a4dcf3
  • checkbox.background#2d2d2d
  • checkbox.border#4a4a4a
  • checkbox.foreground#00a0df
  • descriptionForeground#9e9e9e
  • disabledForeground#808080
  • dropdown.background#2d2d2d
  • dropdown.border#4a4a4a
  • dropdown.foreground#e0e0e0
  • dropdown.listBackground#2d2d2d
  • editor.background#1e1e1e
  • editor.foreground#e0e0e0
  • editor.inactiveSelectionBackground#4a4a4a40
  • editor.selectionBackground#00a0df40
  • editor.selectionHighlightBackground#00a0df20
  • editor.selectionHighlightBorder#00a0df40
  • editor.wordHighlightBackground#4a4a4a40
  • editor.wordHighlightBorder#4a4a4a
  • editorBracketMatch.background#4a4a4a40
  • editorBracketMatch.border#00a0df
  • editorCursor.foreground#00a0df
  • editorGroup.border#1d1d1d
  • editorGroup.dropBackground#00a0df40
  • editorGroup.emptyBackground#252526
  • editorGroup.focusedEmptyBorder#1d1d1d
  • editorGroupHeader.border#1d1d1d
  • editorGroupHeader.noTabsBackground#252526
  • editorGroupHeader.tabsBackground#252526
  • editorGroupHeader.tabsBorder#1d1d1d
  • editorGutter.addedBackground#2ea043
  • editorGutter.background#1e1e1e
  • editorGutter.deletedBackground#ea001e
  • editorGutter.modifiedBackground#00a0df
  • editorLineNumber.activeForeground#00a0df
  • editorLineNumber.foreground#808080
  • focusBorder#4a4a4a
  • foreground#e0e0e0
  • icon.foreground#cccccc
  • input.background#2d2d2d
  • input.border#4a4a4a
  • input.foreground#e0e0e0
  • input.placeholderForeground#808080
  • inputOption.activeBackground#3d3d3d
  • inputOption.activeBorder#4a4a4a
  • inputOption.activeForeground#e0e0e0
  • inputOption.hoverBackground#00a0df
  • inputValidation.errorBackground#5f1d26
  • inputValidation.errorBorder#ea001e
  • inputValidation.errorForeground#e0e0e0
  • inputValidation.warningBackground#5f4c14
  • inputValidation.warningBorder#edbf31
  • inputValidation.warningForeground#e0e0e0
  • list.activeSelectionBackground#00a0df
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#00a0df40
  • list.errorForeground#ea001e
  • list.filterMatchBackground#00a0df40
  • list.focusHighlightForeground#a4dcf3
  • list.highlightForeground#00a0df
  • list.hoverBackground#3d3d3d
  • list.hoverForeground#e0e0e0
  • list.inactiveSelectionBackground#3d3d3d
  • list.inactiveSelectionForeground#e0e0e0
  • list.inactiveSelectionIconForeground#cccccc
  • list.warningForeground#edbf31
  • listFilterWidget.background#2d2d2d
  • listFilterWidget.shadow#000000
  • minimap.background#1d1d1d
  • minimap.errorHighlight#ea001e87
  • minimap.findMatchHighlight#00a0df87
  • minimap.foregroundOpacity#ffffff40
  • minimap.selectionHighlight#00a0df87
  • minimap.selectionOccurrenceHighlight#00a0df87
  • minimap.warningHighlight#edbf3187
  • minimapSlider.activeBackground#007aaa40
  • minimapSlider.background#00a0df40
  • minimapSlider.hoverBackground#a4ddf37a
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#007aaa80
  • scrollbarSlider.background#00a0df40
  • scrollbarSlider.hoverBackground#a4ddf37a
  • selection.background#00a0df
  • sideBar.background#252526
  • sideBar.border#1d1d1d
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#2d2d2d
  • sideBarSectionHeader.border#1d1d1d
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#e0e0e0
  • tab.activeBackground#2d2d2d
  • tab.activeBorder#00a0df
  • tab.activeBorderTop#00a0df
  • tab.activeForeground#ffffff
  • tab.border#1d1d1d
  • tab.hoverBackground#3d3d3d
  • tab.hoverForeground#e0e0e0
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#808080
  • tab.lastPinnedBorder#4a4a4a
  • tab.unfocusedActiveBackground#252526
  • tab.unfocusedActiveBorder#4a4a4a
  • tab.unfocusedActiveBorderTop#4a4a4a
  • tab.unfocusedActiveForeground#808080
  • tab.unfocusedHoverBackground#3d3d3d
  • tab.unfocusedHoverForeground#e0e0e0
  • tab.unfocusedInactiveBackground#252526
  • tab.unfocusedInactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00a0df
  • terminal.ansiBrightBlue#a4dcf3
  • terminal.ansiBrightCyan#a4dcf3
  • terminal.ansiBrightGreen#2ea043
  • terminal.ansiBrightMagenta#ea001e
  • terminal.ansiBrightRed#ea001e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#edbf31
  • terminal.ansiCyan#00a0df
  • terminal.ansiGreen#2ea043
  • terminal.ansiMagenta#ea001e
  • terminal.ansiRed#ea001e
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#edbf31
  • terminal.background#1e1e1e
  • terminal.foreground#e0e0e0
  • textBlockQuote.background#2d2d2d
  • textBlockQuote.border#00a0df
  • textCodeBlock.background#2d2d2d
  • textLink.activeForeground#a4dcf3
  • textLink.foreground#00a0df
  • textPreformat.background#2d2d2d
  • textPreformat.foreground#cccccc
  • textSeparator.foreground#808080
  • toolbar.activeBackground#00a0df
  • toolbar.hoverBackground#4a4a4a
  • toolbar.hoverOutline#4a4a4a
  • tree.indentGuidesStroke#4a4a4a
  • widget.border#4a4a4a
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080
variable, string constant.other.placeholder#e0e0e0
constant.other.color#ffffff
invalid, invalid.illegal#ea001e
keyword, storage.type, storage.modifier#00a0df
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#a4dcf3
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00a0df
support.other.variable, string.other.link#e0e0e0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#edbf31
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#2ea043