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#eaeaeb
  • activityBar.border#cacccd
  • activityBar.foreground#8a8d8f
  • activityBar.inactiveForeground#8a8d8f
  • activityBarBadge.background#532e15
  • activityBarBadge.foreground#f6f6f6
  • badge.background#8a8d8f
  • badge.foreground#151515
  • breadcrumb.activeSelectionForeground#151515
  • breadcrumb.focusForeground#151515
  • breadcrumb.foreground#8a8d8f
  • button.background#8a8d8f
  • button.foreground#151515
  • button.hoverBackground#7c7f81
  • button.secondaryBackground#eaeaeb
  • button.secondaryForeground#151515
  • descriptionForeground#8a8d8f
  • dropdown.background#f8f8f8
  • dropdown.border#cacccd
  • dropdown.foreground#151515
  • editor.background#f8f8f8
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#151515
  • editor.inactiveSelectionBackground#8a8d8f1a
  • editor.lineHighlightBackground#8a8d8f14
  • editor.lineHighlightBorder#8a8d8f00
  • editor.selectionBackground#8a8d8f33
  • editor.wordHighlightBackground#8a8d8f26
  • editorBracketMatch.background#8a8d8f33
  • editorBracketMatch.border#8a8d8f80
  • editorCursor.foreground#8a8d8f
  • editorError.foreground#bf1932
  • editorGroup.border#cacccd
  • editorGroupHeader.tabsBackground#f1f1f2
  • editorGroupHeader.tabsBorder#cacccd
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1515152e
  • editorIndentGuide.background#15151514
  • editorInfo.foreground#532e15
  • editorLineNumber.activeForeground#151515
  • editorLineNumber.foreground#8a8d8f
  • editorRuler.foreground#15151514
  • editorSuggestWidget.selectedBackground#8a8d8f26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1515151a
  • editorWidget.background#f8f8f8
  • editorWidget.border#cacccd
  • focusBorder#8a8d8f80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8a8d8f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8a8d8f
  • input.background#f8f8f8
  • input.border#cacccd
  • input.foreground#151515
  • input.placeholderForeground#8a8d8f
  • inputOption.activeBorder#8a8d8f
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#532e15
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#8a8d8f33
  • list.activeSelectionForeground#151515
  • list.focusBackground#8a8d8f26
  • list.highlightForeground#8a8d8f
  • list.hoverBackground#8a8d8f1a
  • list.inactiveSelectionBackground#8a8d8f1a
  • minimap.background#f8f8f8
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#8a8d8f4d
  • notificationLink.foreground#8a8d8f
  • notifications.background#f8f8f8
  • notifications.foreground#151515
  • panel.background#f1f1f2
  • panel.border#cacccd
  • panelTitle.activeBorder#8a8d8f
  • panelTitle.activeForeground#151515
  • panelTitle.inactiveForeground#8a8d8f
  • peekView.border#8a8d8f
  • peekViewEditor.background#f1f1f2
  • peekViewResult.background#eaeaeb
  • peekViewTitle.background#f1f1f2
  • progressBar.background#8a8d8f
  • scrollbar.shadow#0e0e0e14
  • scrollbarSlider.activeBackground#1515154d
  • scrollbarSlider.background#1515151a
  • scrollbarSlider.hoverBackground#15151533
  • selection.background#8a8d8f33
  • sideBar.background#f1f1f2
  • sideBar.border#cacccd
  • sideBar.foreground#151515
  • sideBarSectionHeader.background#8a8d8f1a
  • sideBarSectionHeader.foreground#151515
  • sideBarTitle.foreground#151515
  • statusBar.background#8a8d8f
  • statusBar.border#cacccd
  • statusBar.debuggingBackground#532e15
  • statusBar.debuggingForeground#f6f6f6
  • statusBar.foreground#151515
  • statusBar.noFolderBackground#eaeaeb
  • statusBarItem.hoverBackground#f6f6f633
  • statusBarItem.remoteBackground#75787a
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#f8f8f8
  • tab.activeBorder#8a8d8f
  • tab.activeBorderTop#8a8d8f00
  • tab.activeForeground#151515
  • tab.border#cacccd
  • tab.inactiveBackground#f1f1f2
  • tab.inactiveForeground#8a8d8f
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8a8d8f
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f8f8
  • terminal.ansiYellow#d4a017
  • terminal.background#f1f1f2
  • terminal.foreground#151515
  • terminalCursor.foreground#8a8d8f
  • textLink.activeForeground#4a2912
  • textLink.foreground#532e15
  • titleBar.activeBackground#f1f1f2
  • titleBar.activeForeground#151515
  • titleBar.border#cacccd
  • titleBar.inactiveBackground#f1f1f2
  • titleBar.inactiveForeground#8a8d8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8a8d8fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6c6e6fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6c6e6fbold
storage.type, storage.modifier#6c6e6fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#5c3317
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6c6e6f
string.regexp#5c3317
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#6f7072
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#606f8aitalic
entity.name.type.parameter#606f8aitalic
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#151515
variable.parameter#151515italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6c6e6fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#151515
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#6c6e6fbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6f7072
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8a8d8f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#606f8aitalic
support.type.property-name.css, support.type.vendored.property-name.css#606f8a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#9e4fa5
support.type.property-name.json#606f8a
markup.heading, markup.heading entity.name, entity.name.section.markdown#6c6e6fbold
markup.bold#5f4b8bbold
markup.italic#606f8aitalic
markup.inline.raw, markup.raw#5c3317
markup.underline.link#786d74
markup.quote#8a8d8fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050