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#191A1C
  • activityBar.foreground#BCBEC4
  • breadcrumb.activeSelectionForeground#DFE1E5
  • breadcrumb.background#191A1C
  • breadcrumb.foreground#9DA0A8
  • dropdown.background#27282B
  • editor.background#191A1C
  • editor.foldBackground#393B40
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#2B2D3022
  • editor.lineHighlightBackground#1F2024
  • editor.selectionBackground#2B2D30
  • editor.selectionHighlightBackground#2B2D3044
  • editorBracketMatch.background#43454A
  • editorBracketMatch.border#43454A
  • editorCursor.foreground#CED0D6
  • editorError.border#402929
  • editorError.foreground#FA6675
  • editorGutter.addedBackground#73BD79
  • editorGutter.background#191A1C
  • editorGutter.deletedBackground#6F737A
  • editorGutter.modifiedBackground#70AEFF
  • editorHint.border#25324D
  • editorHint.foreground#67A37C
  • editorHoverWidget.background#27282B
  • editorHoverWidget.border#393B40
  • editorIndentGuide.activeBackground#4E5157
  • editorIndentGuide.background#323438
  • editorInfo.border#393B40
  • editorInfo.foreground#56A8F5
  • editorLineNumber.activeForeground#A1A3AB
  • editorLineNumber.foreground#4B5059
  • editorOverviewRuler.addedForeground#73BD79
  • editorOverviewRuler.deletedForeground#6F737A
  • editorOverviewRuler.errorForeground#FA6675
  • editorOverviewRuler.infoForeground#56A8F5
  • editorOverviewRuler.modifiedForeground#70AEFF
  • editorOverviewRuler.warningForeground#F2C55C
  • editorSuggestWidget.background#27282B
  • editorSuggestWidget.highlightForeground#56A8F5
  • editorSuggestWidget.selectedBackground#2B2D30
  • editorWarning.border#393B40
  • editorWarning.foreground#F2C55C
  • editorWhitespace.foreground#6F737A
  • editorWidget.background#191A1C
  • input.background#27282B
  • list.activeSelectionBackground#2B2D30
  • list.focusBackground#2B2D30
  • list.hoverBackground#2B2D30
  • list.inactiveSelectionBackground#2B2D30
  • notifications.background#25324D
  • notificationToast.background#25324D
  • scrollbarSlider.activeBackground#FFFFFF66
  • scrollbarSlider.background#FFFFFF26
  • scrollbarSlider.hoverBackground#FFFFFF4D
  • sideBar.background#191A1C
  • sideBar.foreground#BCBEC4
  • sideBarTitle.foreground#BCBEC4
  • statusBar.background#191A1C
  • statusBar.foreground#BCBEC4
  • tab.activeBackground#191A1C
  • tab.activeForeground#BCBEC4
  • tab.inactiveBackground#191A1C
  • tab.inactiveForeground#868A91
  • terminal.ansiBlack#191A1C
  • terminal.ansiBlue#56A8F5
  • terminal.ansiBrightBlack#6F737A
  • terminal.ansiBrightBlue#70AEFF
  • terminal.ansiBrightCyan#56C1D6
  • terminal.ansiBrightGreen#8BB33D
  • terminal.ansiBrightMagenta#DE84DE
  • terminal.ansiBrightRed#FA6675
  • terminal.ansiBrightWhite#DFE1E5
  • terminal.ansiBrightYellow#E0BB65
  • terminal.ansiCyan#42C3D4
  • terminal.ansiGreen#6AAB73
  • terminal.ansiMagenta#C77DBB
  • terminal.ansiRed#F75464
  • terminal.ansiWhite#BCBEC4
  • terminal.ansiYellow#CF8E6D
  • terminal.background#191A1C
  • terminal.foreground#BCBEC4
  • titleBar.activeBackground#191A1C
  • titleBar.activeForeground#BCBEC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7E85
string#6AAB73
keyword, storage.type, storage.modifier#CF8E6D
entity.name.function, support.function, meta.function-call#56A8F5
entity.name.type, support.class#BCBEC4
constant.numeric#2AACB8
constant, variable.language, support.constant, entity.name.constant#C77DBBbold
variable#BCBEC4
keyword.operator#BCBEC4
punctuation#BCBEC4
invalid#F75464
markup.boldbold
markup.heading#56A8F5bold
markup.underline.link, string.other.link#56A8F5
support.type.property-name.json#CF8E6D
meta.type.parameters#16BAAC
string.regexp#42C3D4
comment.todo, markup.raw#8BB33Dbold