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#e0e0e3
  • activityBar.border#b5b3be
  • activityBar.foreground#9063cd
  • activityBar.inactiveForeground#685987
  • activityBarBadge.background#6cab1d
  • activityBarBadge.foreground#f1f1f2
  • badge.background#9063cd
  • badge.foreground#160f1f
  • breadcrumb.activeSelectionForeground#160f1f
  • breadcrumb.focusForeground#160f1f
  • breadcrumb.foreground#685987
  • button.background#9063cd
  • button.foreground#160f1f
  • button.hoverBackground#8259b9
  • button.secondaryBackground#e0e0e3
  • button.secondaryForeground#160f1f
  • descriptionForeground#685987
  • dropdown.background#f5f5f6
  • dropdown.border#b5b3be
  • dropdown.foreground#160f1f
  • editor.background#f5f5f6
  • editor.findMatchBackground#53b0ae59
  • editor.findMatchHighlightBackground#53b0ae26
  • editor.foreground#160f1f
  • editor.inactiveSelectionBackground#9063cd1a
  • editor.lineHighlightBackground#9063cd14
  • editor.lineHighlightBorder#9063cd00
  • editor.selectionBackground#9063cd33
  • editor.wordHighlightBackground#9063cd26
  • editorBracketMatch.background#9063cd33
  • editorBracketMatch.border#9063cd80
  • editorCursor.foreground#9063cd
  • editorError.foreground#bf1932
  • editorGroup.border#b5b3be
  • editorGroupHeader.tabsBackground#ebebec
  • editorGroupHeader.tabsBorder#b5b3be
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#160f1f2e
  • editorIndentGuide.background#160f1f14
  • editorInfo.foreground#6cab1d
  • editorLineNumber.activeForeground#160f1f
  • editorLineNumber.foreground#685987
  • editorRuler.foreground#160f1f14
  • editorSuggestWidget.selectedBackground#9063cd26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#160f1f1a
  • editorWidget.background#f5f5f6
  • editorWidget.border#b5b3be
  • focusBorder#9063cd80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#685987
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#685987
  • input.background#f5f5f6
  • input.border#b5b3be
  • input.foreground#160f1f
  • input.placeholderForeground#685987
  • inputOption.activeBorder#9063cd
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#6cab1d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9063cd33
  • list.activeSelectionForeground#160f1f
  • list.focusBackground#9063cd26
  • list.highlightForeground#9063cd
  • list.hoverBackground#9063cd1a
  • list.inactiveSelectionBackground#9063cd1a
  • minimap.background#f5f5f6
  • minimap.findMatchHighlight#53b0ae80
  • minimap.selectionHighlight#9063cd4d
  • notificationLink.foreground#9063cd
  • notifications.background#f5f5f6
  • notifications.foreground#160f1f
  • panel.background#ebebec
  • panel.border#b5b3be
  • panelTitle.activeBorder#9063cd
  • panelTitle.activeForeground#160f1f
  • panelTitle.inactiveForeground#685987
  • peekView.border#9063cd
  • peekViewEditor.background#ebebec
  • peekViewResult.background#e0e0e3
  • peekViewTitle.background#ebebec
  • progressBar.background#9063cd
  • scrollbar.shadow#0e0a1414
  • scrollbarSlider.activeBackground#160f1f4d
  • scrollbarSlider.background#160f1f1a
  • scrollbarSlider.hoverBackground#160f1f33
  • selection.background#9063cd33
  • sideBar.background#ebebec
  • sideBar.border#b5b3be
  • sideBar.foreground#160f1f
  • sideBarSectionHeader.background#9063cd1a
  • sideBarSectionHeader.foreground#160f1f
  • sideBarTitle.foreground#160f1f
  • statusBar.background#9063cd
  • statusBar.border#b5b3be
  • statusBar.debuggingBackground#6cab1d
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#160f1f
  • statusBar.noFolderBackground#e0e0e3
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#7a54ae
  • statusBarItem.remoteForeground#160f1f
  • tab.activeBackground#f5f5f6
  • tab.activeBorder#9063cd
  • tab.activeBorderTop#9063cd00
  • tab.activeForeground#160f1f
  • tab.border#b5b3be
  • tab.inactiveBackground#ebebec
  • tab.inactiveForeground#685987
  • terminal.ansiBlack#160f1f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#685987
  • 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#ebebec
  • terminal.foreground#160f1f
  • terminalCursor.foreground#9063cd
  • textLink.activeForeground#60981a
  • textLink.foreground#6cab1d
  • titleBar.activeBackground#ebebec
  • titleBar.activeForeground#160f1f
  • titleBar.border#b5b3be
  • titleBar.inactiveBackground#ebebec
  • titleBar.inactiveForeground#685987

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#685987italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#845bbdbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#845bbdbold
storage.type, storage.modifier#845bbdbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4f7d15
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#845bbd
string.regexp#4f7d15
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#367472
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#96548abold
variable.other.constant, variable.other.enummember#96548abold
constant.character.escape#7d5fa6
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#6667abitalic
entity.name.type.parameter#6667abitalic
entity.name.function, meta.function entity.name.function#716962bold
meta.function-call entity.name.function, support.function#716962
meta.method-call entity.name.function, entity.name.function.member#716962
variable, variable.other, variable.other.readwrite#160f1f
variable.parameter#160f1fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#845bbditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#160f1f
entity.name.class, entity.name.type.class, support.class#b8435fbold italic
entity.other.inherited-class#b8435fitalic
entity.name.tag, punctuation.definition.tag#845bbdbold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#7d5fa6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#685987
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6667abitalic
support.type.property-name.css, support.type.vendored.property-name.css#6667ab
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b8435fbold
support.constant.property-value.css, support.constant.color.css#96548a
keyword.other.unit.css#367472
support.type.property-name.json#6667ab
markup.heading, markup.heading entity.name, entity.name.section.markdown#845bbdbold
markup.bold#96548abold
markup.italic#6667abitalic
markup.inline.raw, markup.raw#4f7d15
markup.underline.link#716962
markup.quote#685987italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050