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#e9ebec
  • activityBar.border#c3c9ce
  • activityBar.foreground#0f4c81
  • activityBar.inactiveForeground#5e788e
  • activityBarBadge.background#c8b9ab
  • activityBarBadge.foreground#f6f7f7
  • badge.background#0f4c81
  • badge.foreground#f6f7f7
  • breadcrumb.activeSelectionForeground#03111c
  • breadcrumb.focusForeground#03111c
  • breadcrumb.foreground#5e788e
  • button.background#0f4c81
  • button.foreground#f6f7f7
  • button.hoverBackground#0e4474
  • button.secondaryBackground#e9ebec
  • button.secondaryForeground#03111c
  • descriptionForeground#5e788e
  • dropdown.background#f8f8f9
  • dropdown.border#c3c9ce
  • dropdown.foreground#03111c
  • editor.background#f8f8f9
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#03111c
  • editor.inactiveSelectionBackground#0f4c811a
  • editor.lineHighlightBackground#0f4c8114
  • editor.lineHighlightBorder#0f4c8100
  • editor.selectionBackground#0f4c8133
  • editor.wordHighlightBackground#0f4c8126
  • editorBracketMatch.background#0f4c8133
  • editorBracketMatch.border#0f4c8180
  • editorCursor.foreground#0f4c81
  • editorError.foreground#bf1932
  • editorGroup.border#c3c9ce
  • editorGroupHeader.tabsBackground#f0f1f2
  • editorGroupHeader.tabsBorder#c3c9ce
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#03111c2e
  • editorIndentGuide.background#03111c14
  • editorInfo.foreground#c8b9ab
  • editorLineNumber.activeForeground#03111c
  • editorLineNumber.foreground#5e788e
  • editorRuler.foreground#03111c14
  • editorSuggestWidget.selectedBackground#0f4c8126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#03111c1a
  • editorWidget.background#f8f8f9
  • editorWidget.border#c3c9ce
  • focusBorder#0f4c8180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5e788e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5e788e
  • input.background#f8f8f9
  • input.border#c3c9ce
  • input.foreground#03111c
  • input.placeholderForeground#5e788e
  • inputOption.activeBorder#0f4c81
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#c8b9ab
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#0f4c8133
  • list.activeSelectionForeground#03111c
  • list.focusBackground#0f4c8126
  • list.highlightForeground#0f4c81
  • list.hoverBackground#0f4c811a
  • list.inactiveSelectionBackground#0f4c811a
  • minimap.background#f8f8f9
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#0f4c814d
  • notificationLink.foreground#0f4c81
  • notifications.background#f8f8f9
  • notifications.foreground#03111c
  • panel.background#f0f1f2
  • panel.border#c3c9ce
  • panelTitle.activeBorder#0f4c81
  • panelTitle.activeForeground#03111c
  • panelTitle.inactiveForeground#5e788e
  • peekView.border#0f4c81
  • peekViewEditor.background#f0f1f2
  • peekViewResult.background#e9ebec
  • peekViewTitle.background#f0f1f2
  • progressBar.background#0f4c81
  • scrollbar.shadow#01080d14
  • scrollbarSlider.activeBackground#03111c4d
  • scrollbarSlider.background#03111c1a
  • scrollbarSlider.hoverBackground#03111c33
  • selection.background#0f4c8133
  • sideBar.background#f0f1f2
  • sideBar.border#c3c9ce
  • sideBar.foreground#03111c
  • sideBarSectionHeader.background#0f4c811a
  • sideBarSectionHeader.foreground#03111c
  • sideBarTitle.foreground#03111c
  • statusBar.background#0f4c81
  • statusBar.border#c3c9ce
  • statusBar.debuggingBackground#c8b9ab
  • statusBar.debuggingForeground#f6f7f7
  • statusBar.foreground#f6f7f7
  • statusBar.noFolderBackground#e9ebec
  • statusBarItem.hoverBackground#f6f7f733
  • statusBarItem.remoteBackground#0d416e
  • statusBarItem.remoteForeground#f6f7f7
  • tab.activeBackground#f8f8f9
  • tab.activeBorder#0f4c81
  • tab.activeBorderTop#0f4c8100
  • tab.activeForeground#03111c
  • tab.border#c3c9ce
  • tab.inactiveBackground#f0f1f2
  • tab.inactiveForeground#5e788e
  • terminal.ansiBlack#03111c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5e788e
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f6f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f8f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f0f1f2
  • terminal.foreground#03111c
  • terminalCursor.foreground#0f4c81
  • textLink.activeForeground#b2a498
  • textLink.foreground#c8b9ab
  • titleBar.activeBackground#f0f1f2
  • titleBar.activeForeground#03111c
  • titleBar.border#c3c9ce
  • titleBar.inactiveBackground#f0f1f2
  • titleBar.inactiveForeground#5e788e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5e788eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#0f4c81bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#0f4c81bold
storage.type, storage.modifier#0f4c81bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#716962
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#0f4c81
string.regexp#716962
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007d62bold
variable.other.constant, variable.other.enummember#007d62bold
constant.character.escape#336794
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#5a6f73italic
entity.name.type.parameter#5a6f73italic
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#03111c
variable.parameter#03111citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#0f4c81italic
variable.other.property, variable.other.object.property, meta.object-literal.key#03111c
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#0f4c81bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#336794
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5e788e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5a6f73italic
support.type.property-name.css, support.type.vendored.property-name.css#5a6f73
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#007d62
keyword.other.unit.css#9e4fa5
support.type.property-name.json#5a6f73
markup.heading, markup.heading entity.name, entity.name.section.markdown#0f4c81bold
markup.bold#007d62bold
markup.italic#5a6f73italic
markup.inline.raw, markup.raw#716962
markup.underline.link#786d74
markup.quote#5e788eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050