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#e3e9ec
  • activityBar.border#bbccd4
  • activityBar.foreground#7aabbb
  • activityBar.inactiveForeground#749fb2
  • activityBarBadge.background#e66f3c
  • activityBarBadge.foreground#f2f4f6
  • badge.background#7aabbb
  • badge.foreground#172023
  • breadcrumb.activeSelectionForeground#172023
  • breadcrumb.focusForeground#172023
  • breadcrumb.foreground#749fb2
  • button.background#7aabbb
  • button.foreground#172023
  • button.hoverBackground#6e9aa8
  • button.secondaryBackground#e3e9ec
  • button.secondaryForeground#172023
  • descriptionForeground#749fb2
  • dropdown.background#f6f8f9
  • dropdown.border#bbccd4
  • dropdown.foreground#172023
  • editor.background#f6f8f9
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#172023
  • editor.inactiveSelectionBackground#7aabbb1a
  • editor.lineHighlightBackground#7aabbb14
  • editor.lineHighlightBorder#7aabbb00
  • editor.selectionBackground#7aabbb33
  • editor.wordHighlightBackground#7aabbb26
  • editorBracketMatch.background#7aabbb33
  • editorBracketMatch.border#7aabbb80
  • editorCursor.foreground#7aabbb
  • editorError.foreground#bf1932
  • editorGroup.border#bbccd4
  • editorGroupHeader.tabsBackground#ecf0f2
  • editorGroupHeader.tabsBorder#bbccd4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1720232e
  • editorIndentGuide.background#17202314
  • editorInfo.foreground#e66f3c
  • editorLineNumber.activeForeground#172023
  • editorLineNumber.foreground#749fb2
  • editorRuler.foreground#17202314
  • editorSuggestWidget.selectedBackground#7aabbb26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1720231a
  • editorWidget.background#f6f8f9
  • editorWidget.border#bbccd4
  • focusBorder#7aabbb80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#749fb2
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#749fb2
  • input.background#f6f8f9
  • input.border#bbccd4
  • input.foreground#172023
  • input.placeholderForeground#749fb2
  • inputOption.activeBorder#7aabbb
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e66f3c
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7aabbb33
  • list.activeSelectionForeground#172023
  • list.focusBackground#7aabbb26
  • list.highlightForeground#7aabbb
  • list.hoverBackground#7aabbb1a
  • list.inactiveSelectionBackground#7aabbb1a
  • minimap.background#f6f8f9
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#7aabbb4d
  • notificationLink.foreground#7aabbb
  • notifications.background#f6f8f9
  • notifications.foreground#172023
  • panel.background#ecf0f2
  • panel.border#bbccd4
  • panelTitle.activeBorder#7aabbb
  • panelTitle.activeForeground#172023
  • panelTitle.inactiveForeground#749fb2
  • peekView.border#7aabbb
  • peekViewEditor.background#ecf0f2
  • peekViewResult.background#e3e9ec
  • peekViewTitle.background#ecf0f2
  • progressBar.background#7aabbb
  • scrollbar.shadow#0f151714
  • scrollbarSlider.activeBackground#1720234d
  • scrollbarSlider.background#1720231a
  • scrollbarSlider.hoverBackground#17202333
  • selection.background#7aabbb33
  • sideBar.background#ecf0f2
  • sideBar.border#bbccd4
  • sideBar.foreground#172023
  • sideBarSectionHeader.background#7aabbb1a
  • sideBarSectionHeader.foreground#172023
  • sideBarTitle.foreground#172023
  • statusBar.background#7aabbb
  • statusBar.border#bbccd4
  • statusBar.debuggingBackground#e66f3c
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#172023
  • statusBar.noFolderBackground#e3e9ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#68919f
  • statusBarItem.remoteForeground#172023
  • tab.activeBackground#f6f8f9
  • tab.activeBorder#7aabbb
  • tab.activeBorderTop#7aabbb00
  • tab.activeForeground#172023
  • tab.border#bbccd4
  • tab.inactiveBackground#ecf0f2
  • tab.inactiveForeground#749fb2
  • terminal.ansiBlack#172023
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#749fb2
  • 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#f6f8f9
  • terminal.ansiYellow#d4a017
  • terminal.background#ecf0f2
  • terminal.foreground#172023
  • terminalCursor.foreground#7aabbb
  • textLink.activeForeground#cc6236
  • textLink.foreground#e66f3c
  • titleBar.activeBackground#ecf0f2
  • titleBar.activeForeground#172023
  • titleBar.border#bbccd4
  • titleBar.inactiveBackground#ecf0f2
  • titleBar.inactiveForeground#749fb2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#749fb2italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4f6f79bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4f6f79bold
storage.type, storage.modifier#4f6f79bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#a8512c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4f6f79
string.regexp#a8512c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6667abbold
variable.other.constant, variable.other.enummember#6667abbold
constant.character.escape#566f79
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#5e6f81italic
entity.name.type.parameter#5e6f81italic
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#172023
variable.parameter#172023italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4f6f79italic
variable.other.property, variable.other.object.property, meta.object-literal.key#172023
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#4f6f79bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#566f79
punctuation, punctuation.separator, punctuation.terminator, meta.brace#749fb2
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5e6f81italic
support.type.property-name.css, support.type.vendored.property-name.css#5e6f81
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#6667ab
keyword.other.unit.css#3d7925
support.type.property-name.json#5e6f81
markup.heading, markup.heading entity.name, entity.name.section.markdown#4f6f79bold
markup.bold#6667abbold
markup.italic#5e6f81italic
markup.inline.raw, markup.raw#a8512c
markup.underline.link#786d74
markup.quote#749fb2italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050