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#e0e8ec
  • activityBar.border#adc9d1
  • activityBar.foreground#008ea1
  • activityBar.inactiveForeground#3791a5
  • activityBarBadge.background#e67567
  • activityBarBadge.foreground#f2f4f6
  • badge.background#008ea1
  • badge.foreground#00272c
  • breadcrumb.activeSelectionForeground#00272c
  • breadcrumb.focusForeground#00272c
  • breadcrumb.foreground#3791a5
  • button.background#008ea1
  • button.foreground#00272c
  • button.hoverBackground#008091
  • button.secondaryBackground#e0e8ec
  • button.secondaryForeground#00272c
  • descriptionForeground#3791a5
  • dropdown.background#f5f7f9
  • dropdown.border#adc9d1
  • dropdown.foreground#00272c
  • editor.background#f5f7f9
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#00272c
  • editor.inactiveSelectionBackground#008ea11a
  • editor.lineHighlightBackground#008ea114
  • editor.lineHighlightBorder#008ea100
  • editor.selectionBackground#008ea133
  • editor.wordHighlightBackground#008ea126
  • editorBracketMatch.background#008ea133
  • editorBracketMatch.border#008ea180
  • editorCursor.foreground#008ea1
  • editorError.foreground#bf1932
  • editorGroup.border#adc9d1
  • editorGroupHeader.tabsBackground#eaf0f2
  • editorGroupHeader.tabsBorder#adc9d1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#00272c2e
  • editorIndentGuide.background#00272c14
  • editorInfo.foreground#e67567
  • editorLineNumber.activeForeground#00272c
  • editorLineNumber.foreground#3791a5
  • editorRuler.foreground#00272c14
  • editorSuggestWidget.selectedBackground#008ea126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#00272c1a
  • editorWidget.background#f5f7f9
  • editorWidget.border#adc9d1
  • focusBorder#008ea180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#3791a5
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#3791a5
  • input.background#f5f7f9
  • input.border#adc9d1
  • input.foreground#00272c
  • input.placeholderForeground#3791a5
  • inputOption.activeBorder#008ea1
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e67567
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#008ea133
  • list.activeSelectionForeground#00272c
  • list.focusBackground#008ea126
  • list.highlightForeground#008ea1
  • list.hoverBackground#008ea11a
  • list.inactiveSelectionBackground#008ea11a
  • minimap.background#f5f7f9
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#008ea14d
  • notificationLink.foreground#008ea1
  • notifications.background#f5f7f9
  • notifications.foreground#00272c
  • panel.background#eaf0f2
  • panel.border#adc9d1
  • panelTitle.activeBorder#008ea1
  • panelTitle.activeForeground#00272c
  • panelTitle.inactiveForeground#3791a5
  • peekView.border#008ea1
  • peekViewEditor.background#eaf0f2
  • peekViewResult.background#e0e8ec
  • peekViewTitle.background#eaf0f2
  • progressBar.background#008ea1
  • scrollbar.shadow#00121414
  • scrollbarSlider.activeBackground#00272c4d
  • scrollbarSlider.background#00272c1a
  • scrollbarSlider.hoverBackground#00272c33
  • selection.background#008ea133
  • sideBar.background#eaf0f2
  • sideBar.border#adc9d1
  • sideBar.foreground#00272c
  • sideBarSectionHeader.background#008ea11a
  • sideBarSectionHeader.foreground#00272c
  • sideBarTitle.foreground#00272c
  • statusBar.background#008ea1
  • statusBar.border#adc9d1
  • statusBar.debuggingBackground#e67567
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#00272c
  • statusBar.noFolderBackground#e0e8ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#007989
  • statusBarItem.remoteForeground#00272c
  • tab.activeBackground#f5f7f9
  • tab.activeBorder#008ea1
  • tab.activeBorderTop#008ea100
  • tab.activeForeground#00272c
  • tab.border#adc9d1
  • tab.inactiveBackground#eaf0f2
  • tab.inactiveForeground#3791a5
  • terminal.ansiBlack#00272c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#3791a5
  • 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#eaf0f2
  • terminal.foreground#00272c
  • terminalCursor.foreground#008ea1
  • textLink.activeForeground#cc685b
  • textLink.foreground#e67567
  • titleBar.activeBackground#eaf0f2
  • titleBar.activeForeground#00272c
  • titleBar.border#adc9d1
  • titleBar.inactiveBackground#eaf0f2
  • titleBar.inactiveForeground#3791a5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3791a5italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#007684bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#007684bold
storage.type, storage.modifier#007684bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#a8564b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#007684
string.regexp#a8564b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#1b2a6bbold
variable.other.constant, variable.other.enummember#1b2a6bbold
constant.character.escape#197d8a
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#1464a0italic
entity.name.type.parameter#1464a0italic
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#00272c
variable.parameter#00272citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#007684italic
variable.other.property, variable.other.object.property, meta.object-literal.key#00272c
entity.name.class, entity.name.type.class, support.class#3d7925bold italic
entity.other.inherited-class#3d7925italic
entity.name.tag, punctuation.definition.tag#007684bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#197d8a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3791a5
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#1464a0italic
support.type.property-name.css, support.type.vendored.property-name.css#1464a0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3d7925bold
support.constant.property-value.css, support.constant.color.css#1b2a6b
keyword.other.unit.css#5c068c
support.type.property-name.json#1464a0
markup.heading, markup.heading entity.name, entity.name.section.markdown#007684bold
markup.bold#1b2a6bbold
markup.italic#1464a0italic
markup.inline.raw, markup.raw#a8564b
markup.underline.link#786d74
markup.quote#3791a5italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050