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#e0e0e2
  • activityBar.border#b2b3bc
  • activityBar.foreground#6667ab
  • activityBar.inactiveForeground#585b79
  • activityBarBadge.background#d1d130
  • activityBarBadge.foreground#f1f1f2
  • badge.background#6667ab
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#0f0f1a
  • breadcrumb.focusForeground#0f0f1a
  • breadcrumb.foreground#585b79
  • button.background#6667ab
  • button.foreground#f1f1f2
  • button.hoverBackground#5c5d9a
  • button.secondaryBackground#e0e0e2
  • button.secondaryForeground#0f0f1a
  • descriptionForeground#585b79
  • dropdown.background#f5f5f5
  • dropdown.border#b2b3bc
  • dropdown.foreground#0f0f1a
  • editor.background#f5f5f5
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#0f0f1a
  • editor.inactiveSelectionBackground#6667ab1a
  • editor.lineHighlightBackground#6667ab14
  • editor.lineHighlightBorder#6667ab00
  • editor.selectionBackground#6667ab33
  • editor.wordHighlightBackground#6667ab26
  • editorBracketMatch.background#6667ab33
  • editorBracketMatch.border#6667ab80
  • editorCursor.foreground#6667ab
  • editorError.foreground#bf1932
  • editorGroup.border#b2b3bc
  • editorGroupHeader.tabsBackground#eaebec
  • editorGroupHeader.tabsBorder#b2b3bc
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0f0f1a2e
  • editorIndentGuide.background#0f0f1a14
  • editorInfo.foreground#d1d130
  • editorLineNumber.activeForeground#0f0f1a
  • editorLineNumber.foreground#585b79
  • editorRuler.foreground#0f0f1a14
  • editorSuggestWidget.selectedBackground#6667ab26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0f0f1a1a
  • editorWidget.background#f5f5f5
  • editorWidget.border#b2b3bc
  • focusBorder#6667ab80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#585b79
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#585b79
  • input.background#f5f5f5
  • input.border#b2b3bc
  • input.foreground#0f0f1a
  • input.placeholderForeground#585b79
  • inputOption.activeBorder#6667ab
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#d1d130
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#6667ab33
  • list.activeSelectionForeground#0f0f1a
  • list.focusBackground#6667ab26
  • list.highlightForeground#6667ab
  • list.hoverBackground#6667ab1a
  • list.inactiveSelectionBackground#6667ab1a
  • minimap.background#f5f5f5
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#6667ab4d
  • notificationLink.foreground#6667ab
  • notifications.background#f5f5f5
  • notifications.foreground#0f0f1a
  • panel.background#eaebec
  • panel.border#b2b3bc
  • panelTitle.activeBorder#6667ab
  • panelTitle.activeForeground#0f0f1a
  • panelTitle.inactiveForeground#585b79
  • peekView.border#6667ab
  • peekViewEditor.background#eaebec
  • peekViewResult.background#e0e0e2
  • peekViewTitle.background#eaebec
  • progressBar.background#6667ab
  • scrollbar.shadow#0a0a1114
  • scrollbarSlider.activeBackground#0f0f1a4d
  • scrollbarSlider.background#0f0f1a1a
  • scrollbarSlider.hoverBackground#0f0f1a33
  • selection.background#6667ab33
  • sideBar.background#eaebec
  • sideBar.border#b2b3bc
  • sideBar.foreground#0f0f1a
  • sideBarSectionHeader.background#6667ab1a
  • sideBarSectionHeader.foreground#0f0f1a
  • sideBarTitle.foreground#0f0f1a
  • statusBar.background#6667ab
  • statusBar.border#b2b3bc
  • statusBar.debuggingBackground#d1d130
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#e0e0e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#575891
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f5f5f5
  • tab.activeBorder#6667ab
  • tab.activeBorderTop#6667ab00
  • tab.activeForeground#0f0f1a
  • tab.border#b2b3bc
  • tab.inactiveBackground#eaebec
  • tab.inactiveForeground#585b79
  • terminal.ansiBlack#0f0f1a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#585b79
  • 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#f5f5f5
  • terminal.ansiYellow#d4a017
  • terminal.background#eaebec
  • terminal.foreground#0f0f1a
  • terminalCursor.foreground#6667ab
  • textLink.activeForeground#baba2a
  • textLink.foreground#d1d130
  • titleBar.activeBackground#eaebec
  • titleBar.activeForeground#0f0f1a
  • titleBar.border#b2b3bc
  • titleBar.inactiveBackground#eaebec
  • titleBar.inactiveForeground#585b79

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#585b79italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6667abbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6667abbold
storage.type, storage.modifier#6667abbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6e6e19
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6667ab
string.regexp#6e6e19
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#456e7ebold
variable.other.constant, variable.other.enummember#456e7ebold
constant.character.escape#6a6b9b
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#5f4b8bitalic
entity.name.type.parameter#5f4b8bitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#0f0f1a
variable.parameter#0f0f1aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#6667abitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#0f0f1a
entity.name.class, entity.name.type.class, support.class#c72f7cbold italic
entity.other.inherited-class#c72f7citalic
entity.name.tag, punctuation.definition.tag#6667abbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6a6b9b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#585b79
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5f4b8bitalic
support.type.property-name.css, support.type.vendored.property-name.css#5f4b8b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c72f7cbold
support.constant.property-value.css, support.constant.color.css#456e7e
keyword.other.unit.css#007f2e
support.type.property-name.json#5f4b8b
markup.heading, markup.heading entity.name, entity.name.section.markdown#6667abbold
markup.bold#456e7ebold
markup.italic#5f4b8bitalic
markup.inline.raw, markup.raw#6e6e19
markup.underline.link#7f6666
markup.quote#585b79italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050