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#e0e2e3
  • activityBar.border#b6b9bf
  • activityBar.foreground#7586a7
  • activityBar.inactiveForeground#697588
  • activityBarBadge.background#b19b71
  • activityBarBadge.foreground#f1f1f2
  • badge.background#7586a7
  • badge.foreground#16191f
  • breadcrumb.activeSelectionForeground#16191f
  • breadcrumb.focusForeground#16191f
  • breadcrumb.foreground#697588
  • button.background#7586a7
  • button.foreground#16191f
  • button.hoverBackground#697996
  • button.secondaryBackground#e0e2e3
  • button.secondaryForeground#16191f
  • descriptionForeground#697588
  • dropdown.background#f5f5f6
  • dropdown.border#b6b9bf
  • dropdown.foreground#16191f
  • editor.background#f5f5f6
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#16191f
  • editor.inactiveSelectionBackground#7586a71a
  • editor.lineHighlightBackground#7586a714
  • editor.lineHighlightBorder#7586a700
  • editor.selectionBackground#7586a733
  • editor.wordHighlightBackground#7586a726
  • editorBracketMatch.background#7586a733
  • editorBracketMatch.border#7586a780
  • editorCursor.foreground#7586a7
  • editorError.foreground#bf1932
  • editorGroup.border#b6b9bf
  • editorGroupHeader.tabsBackground#ebebec
  • editorGroupHeader.tabsBorder#b6b9bf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#16191f2e
  • editorIndentGuide.background#16191f14
  • editorInfo.foreground#b19b71
  • editorLineNumber.activeForeground#16191f
  • editorLineNumber.foreground#697588
  • editorRuler.foreground#16191f14
  • editorSuggestWidget.selectedBackground#7586a726
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#16191f1a
  • editorWidget.background#f5f5f6
  • editorWidget.border#b6b9bf
  • focusBorder#7586a780
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#697588
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#697588
  • input.background#f5f5f6
  • input.border#b6b9bf
  • input.foreground#16191f
  • input.placeholderForeground#697588
  • inputOption.activeBorder#7586a7
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#b19b71
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7586a733
  • list.activeSelectionForeground#16191f
  • list.focusBackground#7586a726
  • list.highlightForeground#7586a7
  • list.hoverBackground#7586a71a
  • list.inactiveSelectionBackground#7586a71a
  • minimap.background#f5f5f6
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#7586a74d
  • notificationLink.foreground#7586a7
  • notifications.background#f5f5f6
  • notifications.foreground#16191f
  • panel.background#ebebec
  • panel.border#b6b9bf
  • panelTitle.activeBorder#7586a7
  • panelTitle.activeForeground#16191f
  • panelTitle.inactiveForeground#697588
  • peekView.border#7586a7
  • peekViewEditor.background#ebebec
  • peekViewResult.background#e0e2e3
  • peekViewTitle.background#ebebec
  • progressBar.background#7586a7
  • scrollbar.shadow#0f111514
  • scrollbarSlider.activeBackground#16191f4d
  • scrollbarSlider.background#16191f1a
  • scrollbarSlider.hoverBackground#16191f33
  • selection.background#7586a733
  • sideBar.background#ebebec
  • sideBar.border#b6b9bf
  • sideBar.foreground#16191f
  • sideBarSectionHeader.background#7586a71a
  • sideBarSectionHeader.foreground#16191f
  • sideBarTitle.foreground#16191f
  • statusBar.background#7586a7
  • statusBar.border#b6b9bf
  • statusBar.debuggingBackground#b19b71
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#16191f
  • statusBar.noFolderBackground#e0e2e3
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#63728e
  • statusBarItem.remoteForeground#16191f
  • tab.activeBackground#f5f5f6
  • tab.activeBorder#7586a7
  • tab.activeBorderTop#7586a700
  • tab.activeForeground#16191f
  • tab.border#b6b9bf
  • tab.inactiveBackground#ebebec
  • tab.inactiveForeground#697588
  • terminal.ansiBlack#16191f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#697588
  • 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#16191f
  • terminalCursor.foreground#7586a7
  • textLink.activeForeground#9e8a64
  • textLink.foreground#b19b71
  • titleBar.activeBackground#ebebec
  • titleBar.activeForeground#16191f
  • titleBar.border#b6b9bf
  • titleBar.inactiveBackground#ebebec
  • titleBar.inactiveForeground#697588

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#697588italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#606f8abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#606f8abold
storage.type, storage.modifier#606f8abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#79674c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#606f8a
string.regexp#79674c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#367472bold
variable.other.constant, variable.other.enummember#367472bold
constant.character.escape#626f84
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#547182italic
entity.name.type.parameter#547182italic
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#16191f
variable.parameter#16191fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#606f8aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#16191f
entity.name.class, entity.name.type.class, support.class#96548abold italic
entity.other.inherited-class#96548aitalic
entity.name.tag, punctuation.definition.tag#606f8abold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#626f84
punctuation, punctuation.separator, punctuation.terminator, meta.brace#697588
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#547182italic
support.type.property-name.css, support.type.vendored.property-name.css#547182
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#96548abold
support.constant.property-value.css, support.constant.color.css#367472
keyword.other.unit.css#38793a
support.type.property-name.json#547182
markup.heading, markup.heading entity.name, entity.name.section.markdown#606f8abold
markup.bold#367472bold
markup.italic#547182italic
markup.inline.raw, markup.raw#79674c
markup.underline.link#7f6666
markup.quote#697588italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050