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#e1e2e3
  • activityBar.border#b6bbbf
  • activityBar.foreground#7c92aa
  • activityBar.inactiveForeground#6d7b8a
  • activityBarBadge.background#e69945
  • activityBarBadge.foreground#f1f1f2
  • badge.background#7c92aa
  • badge.foreground#171b20
  • breadcrumb.activeSelectionForeground#171b20
  • breadcrumb.focusForeground#171b20
  • breadcrumb.foreground#6d7b8a
  • button.background#7c92aa
  • button.foreground#171b20
  • button.hoverBackground#708399
  • button.secondaryBackground#e1e2e3
  • button.secondaryForeground#171b20
  • descriptionForeground#6d7b8a
  • dropdown.background#f5f5f6
  • dropdown.border#b6bbbf
  • dropdown.foreground#171b20
  • editor.background#f5f5f6
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#171b20
  • editor.inactiveSelectionBackground#7c92aa1a
  • editor.lineHighlightBackground#7c92aa14
  • editor.lineHighlightBorder#7c92aa00
  • editor.selectionBackground#7c92aa33
  • editor.wordHighlightBackground#7c92aa26
  • editorBracketMatch.background#7c92aa33
  • editorBracketMatch.border#7c92aa80
  • editorCursor.foreground#7c92aa
  • editorError.foreground#bf1932
  • editorGroup.border#b6bbbf
  • editorGroupHeader.tabsBackground#ebecec
  • editorGroupHeader.tabsBorder#b6bbbf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#171b202e
  • editorIndentGuide.background#171b2014
  • editorInfo.foreground#e69945
  • editorLineNumber.activeForeground#171b20
  • editorLineNumber.foreground#6d7b8a
  • editorRuler.foreground#171b2014
  • editorSuggestWidget.selectedBackground#7c92aa26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#171b201a
  • editorWidget.background#f5f5f6
  • editorWidget.border#b6bbbf
  • focusBorder#7c92aa80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#6d7b8a
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#6d7b8a
  • input.background#f5f5f6
  • input.border#b6bbbf
  • input.foreground#171b20
  • input.placeholderForeground#6d7b8a
  • inputOption.activeBorder#7c92aa
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e69945
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7c92aa33
  • list.activeSelectionForeground#171b20
  • list.focusBackground#7c92aa26
  • list.highlightForeground#7c92aa
  • list.hoverBackground#7c92aa1a
  • list.inactiveSelectionBackground#7c92aa1a
  • minimap.background#f5f5f6
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#7c92aa4d
  • notificationLink.foreground#7c92aa
  • notifications.background#f5f5f6
  • notifications.foreground#171b20
  • panel.background#ebecec
  • panel.border#b6bbbf
  • panelTitle.activeBorder#7c92aa
  • panelTitle.activeForeground#171b20
  • panelTitle.inactiveForeground#6d7b8a
  • peekView.border#7c92aa
  • peekViewEditor.background#ebecec
  • peekViewResult.background#e1e2e3
  • peekViewTitle.background#ebecec
  • progressBar.background#7c92aa
  • scrollbar.shadow#0f121514
  • scrollbarSlider.activeBackground#171b204d
  • scrollbarSlider.background#171b201a
  • scrollbarSlider.hoverBackground#171b2033
  • selection.background#7c92aa33
  • sideBar.background#ebecec
  • sideBar.border#b6bbbf
  • sideBar.foreground#171b20
  • sideBarSectionHeader.background#7c92aa1a
  • sideBarSectionHeader.foreground#171b20
  • sideBarTitle.foreground#171b20
  • statusBar.background#7c92aa
  • statusBar.border#b6bbbf
  • statusBar.debuggingBackground#e69945
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#171b20
  • statusBar.noFolderBackground#e1e2e3
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#697c91
  • statusBarItem.remoteForeground#171b20
  • tab.activeBackground#f5f5f6
  • tab.activeBorder#7c92aa
  • tab.activeBorderTop#7c92aa00
  • tab.activeForeground#171b20
  • tab.border#b6bbbf
  • tab.inactiveBackground#ebecec
  • tab.inactiveForeground#6d7b8a
  • terminal.ansiBlack#171b20
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#6d7b8a
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f5f5f6
  • terminal.ansiYellow#d4a017
  • terminal.background#ebecec
  • terminal.foreground#171b20
  • terminalCursor.foreground#7c92aa
  • textLink.activeForeground#cc883e
  • textLink.foreground#e69945
  • titleBar.activeBackground#ebecec
  • titleBar.activeForeground#171b20
  • titleBar.border#b6bbbf
  • titleBar.inactiveBackground#ebecec
  • titleBar.inactiveForeground#6d7b8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6d7b8aitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5e6f81bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5e6f81bold
storage.type, storage.modifier#5e6f81bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8f5e2b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5e6f81
string.regexp#8f5e2b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007d62bold
variable.other.constant, variable.other.enummember#007d62bold
constant.character.escape#5e6d79
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#1b368citalic
entity.name.type.parameter#1b368citalic
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#171b20
variable.parameter#171b20italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5e6f81italic
variable.other.property, variable.other.object.property, meta.object-literal.key#171b20
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#5e6f81bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#5e6d79
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6d7b8a
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#1b368citalic
support.type.property-name.css, support.type.vendored.property-name.css#1b368c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#007d62
keyword.other.unit.css#38793a
support.type.property-name.json#1b368c
markup.heading, markup.heading entity.name, entity.name.section.markdown#5e6f81bold
markup.bold#007d62bold
markup.italic#1b368citalic
markup.inline.raw, markup.raw#8f5e2b
markup.underline.link#786d74
markup.quote#6d7b8aitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050