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#e0e7ec
  • activityBar.border#adc5d1
  • activityBar.foreground#0085ca
  • activityBar.inactiveForeground#377fa5
  • activityBarBadge.background#e54800
  • activityBarBadge.foreground#f2f4f6
  • badge.background#0085ca
  • badge.foreground#001d2c
  • breadcrumb.activeSelectionForeground#001d2c
  • breadcrumb.focusForeground#001d2c
  • breadcrumb.foreground#377fa5
  • button.background#0085ca
  • button.foreground#001d2c
  • button.hoverBackground#0078b6
  • button.secondaryBackground#e0e7ec
  • button.secondaryForeground#001d2c
  • descriptionForeground#377fa5
  • dropdown.background#f5f7f9
  • dropdown.border#adc5d1
  • dropdown.foreground#001d2c
  • editor.background#f5f7f9
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#001d2c
  • editor.inactiveSelectionBackground#0085ca1a
  • editor.lineHighlightBackground#0085ca14
  • editor.lineHighlightBorder#0085ca00
  • editor.selectionBackground#0085ca33
  • editor.wordHighlightBackground#0085ca26
  • editorBracketMatch.background#0085ca33
  • editorBracketMatch.border#0085ca80
  • editorCursor.foreground#0085ca
  • editorError.foreground#bf1932
  • editorGroup.border#adc5d1
  • editorGroupHeader.tabsBackground#eaeff2
  • editorGroupHeader.tabsBorder#adc5d1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#001d2c2e
  • editorIndentGuide.background#001d2c14
  • editorInfo.foreground#e54800
  • editorLineNumber.activeForeground#001d2c
  • editorLineNumber.foreground#377fa5
  • editorRuler.foreground#001d2c14
  • editorSuggestWidget.selectedBackground#0085ca26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#001d2c1a
  • editorWidget.background#f5f7f9
  • editorWidget.border#adc5d1
  • focusBorder#0085ca80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#377fa5
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#377fa5
  • input.background#f5f7f9
  • input.border#adc5d1
  • input.foreground#001d2c
  • input.placeholderForeground#377fa5
  • inputOption.activeBorder#0085ca
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e54800
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#0085ca33
  • list.activeSelectionForeground#001d2c
  • list.focusBackground#0085ca26
  • list.highlightForeground#0085ca
  • list.hoverBackground#0085ca1a
  • list.inactiveSelectionBackground#0085ca1a
  • minimap.background#f5f7f9
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#0085ca4d
  • notificationLink.foreground#0085ca
  • notifications.background#f5f7f9
  • notifications.foreground#001d2c
  • panel.background#eaeff2
  • panel.border#adc5d1
  • panelTitle.activeBorder#0085ca
  • panelTitle.activeForeground#001d2c
  • panelTitle.inactiveForeground#377fa5
  • peekView.border#0085ca
  • peekViewEditor.background#eaeff2
  • peekViewResult.background#e0e7ec
  • peekViewTitle.background#eaeff2
  • progressBar.background#0085ca
  • scrollbar.shadow#000d1414
  • scrollbarSlider.activeBackground#001d2c4d
  • scrollbarSlider.background#001d2c1a
  • scrollbarSlider.hoverBackground#001d2c33
  • selection.background#0085ca33
  • sideBar.background#eaeff2
  • sideBar.border#adc5d1
  • sideBar.foreground#001d2c
  • sideBarSectionHeader.background#0085ca1a
  • sideBarSectionHeader.foreground#001d2c
  • sideBarTitle.foreground#001d2c
  • statusBar.background#0085ca
  • statusBar.border#adc5d1
  • statusBar.debuggingBackground#e54800
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#001d2c
  • statusBar.noFolderBackground#e0e7ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#0071ac
  • statusBarItem.remoteForeground#001d2c
  • tab.activeBackground#f5f7f9
  • tab.activeBorder#0085ca
  • tab.activeBorderTop#0085ca00
  • tab.activeForeground#001d2c
  • tab.border#adc5d1
  • tab.inactiveBackground#eaeff2
  • tab.inactiveForeground#377fa5
  • terminal.ansiBlack#001d2c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#377fa5
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f5f7f9
  • terminal.ansiYellow#d4a017
  • terminal.background#eaeff2
  • terminal.foreground#001d2c
  • terminalCursor.foreground#0085ca
  • textLink.activeForeground#cb4000
  • textLink.foreground#e54800
  • titleBar.activeBackground#eaeff2
  • titleBar.activeForeground#001d2c
  • titleBar.border#adc5d1
  • titleBar.inactiveBackground#eaeff2
  • titleBar.inactiveForeground#377fa5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#377fa5italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#0070abbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#0070abbold
storage.type, storage.modifier#0070abbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#c63f00
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#0070ab
string.regexp#c63f00
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#1d76a4
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#4a6fa5italic
entity.name.type.parameter#4a6fa5italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#001d2c
variable.parameter#001d2citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#0070abitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#001d2c
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#0070abbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#1d76a4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#377fa5
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4a6fa5italic
support.type.property-name.css, support.type.vendored.property-name.css#4a6fa5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#3d7925
support.type.property-name.json#4a6fa5
markup.heading, markup.heading entity.name, entity.name.section.markdown#0070abbold
markup.bold#5f4b8bbold
markup.italic#4a6fa5italic
markup.inline.raw, markup.raw#c63f00
markup.underline.link#786d74
markup.quote#377fa5italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050