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#e9e7de
  • activityBar.border#c7c8ab
  • activityBar.foreground#60981a
  • activityBar.inactiveForeground#7f923c
  • activityBarBadge.background#8259b9
  • activityBarBadge.foreground#f5f4f1
  • badge.background#60981a
  • badge.foreground#1a2a07
  • breadcrumb.activeSelectionForeground#1a2a07
  • breadcrumb.focusForeground#1a2a07
  • breadcrumb.foreground#7f923c
  • button.background#60981a
  • button.foreground#1a2a07
  • button.hoverBackground#568917
  • button.secondaryBackground#e9e7de
  • button.secondaryForeground#1a2a07
  • descriptionForeground#7f923c
  • dropdown.background#f8f7f4
  • dropdown.border#c7c8ab
  • dropdown.foreground#1a2a07
  • editor.background#f8f7f4
  • editor.findMatchBackground#00b5cc59
  • editor.findMatchHighlightBackground#00b5cc26
  • editor.foreground#1a2a07
  • editor.inactiveSelectionBackground#60981a1a
  • editor.lineHighlightBackground#60981a14
  • editor.lineHighlightBorder#60981a00
  • editor.selectionBackground#60981a33
  • editor.wordHighlightBackground#60981a26
  • editorBracketMatch.background#60981a33
  • editorBracketMatch.border#60981a80
  • editorCursor.foreground#60981a
  • editorError.foreground#bf1932
  • editorGroup.border#c7c8ab
  • editorGroupHeader.tabsBackground#f0efe9
  • editorGroupHeader.tabsBorder#c7c8ab
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1a2a072e
  • editorIndentGuide.background#1a2a0714
  • editorInfo.foreground#8259b9
  • editorLineNumber.activeForeground#1a2a07
  • editorLineNumber.foreground#7f923c
  • editorRuler.foreground#1a2a0714
  • editorSuggestWidget.selectedBackground#60981a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1a2a071a
  • editorWidget.background#f8f7f4
  • editorWidget.border#c7c8ab
  • focusBorder#60981a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7f923c
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7f923c
  • input.background#f8f7f4
  • input.border#c7c8ab
  • input.foreground#1a2a07
  • input.placeholderForeground#7f923c
  • inputOption.activeBorder#60981a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8259b9
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#60981a33
  • list.activeSelectionForeground#1a2a07
  • list.focusBackground#60981a26
  • list.highlightForeground#60981a
  • list.hoverBackground#60981a1a
  • list.inactiveSelectionBackground#60981a1a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#00b5cc80
  • minimap.selectionHighlight#60981a4d
  • notificationLink.foreground#60981a
  • notifications.background#f8f7f4
  • notifications.foreground#1a2a07
  • panel.background#f0efe9
  • panel.border#c7c8ab
  • panelTitle.activeBorder#60981a
  • panelTitle.activeForeground#1a2a07
  • panelTitle.inactiveForeground#7f923c
  • peekView.border#60981a
  • peekViewEditor.background#f0efe9
  • peekViewResult.background#e9e7de
  • peekViewTitle.background#f0efe9
  • progressBar.background#60981a
  • scrollbar.shadow#0c130314
  • scrollbarSlider.activeBackground#1a2a074d
  • scrollbarSlider.background#1a2a071a
  • scrollbarSlider.hoverBackground#1a2a0733
  • selection.background#60981a33
  • sideBar.background#f0efe9
  • sideBar.border#c7c8ab
  • sideBar.foreground#1a2a07
  • sideBarSectionHeader.background#60981a1a
  • sideBarSectionHeader.foreground#1a2a07
  • sideBarTitle.foreground#1a2a07
  • statusBar.background#60981a
  • statusBar.border#c7c8ab
  • statusBar.debuggingBackground#8259b9
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#1a2a07
  • statusBar.noFolderBackground#e9e7de
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#528116
  • statusBarItem.remoteForeground#1a2a07
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#60981a
  • tab.activeBorderTop#60981a00
  • tab.activeForeground#1a2a07
  • tab.border#c7c8ab
  • tab.inactiveBackground#f0efe9
  • tab.inactiveForeground#7f923c
  • terminal.ansiBlack#1a2a07
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7f923c
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f0efe9
  • terminal.foreground#1a2a07
  • terminalCursor.foreground#60981a
  • textLink.activeForeground#734fa4
  • textLink.foreground#8259b9
  • titleBar.activeBackground#f0efe9
  • titleBar.activeForeground#1a2a07
  • titleBar.border#c7c8ab
  • titleBar.inactiveBackground#f0efe9
  • titleBar.inactiveForeground#7f923c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7f923citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4f7d15bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4f7d15bold
storage.type, storage.modifier#4f7d15bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#845bbd
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4f7d15
string.regexp#845bbd
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007986
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#846617bold
variable.other.constant, variable.other.enummember#846617bold
constant.character.escape#557928
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#3d7925italic
entity.name.type.parameter#3d7925italic
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#1a2a07
variable.parameter#1a2a07italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4f7d15italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1a2a07
entity.name.class, entity.name.type.class, support.class#007d62bold italic
entity.other.inherited-class#007d62italic
entity.name.tag, punctuation.definition.tag#4f7d15bold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#557928
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7f923c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#3d7925italic
support.type.property-name.css, support.type.vendored.property-name.css#3d7925
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#007d62bold
support.constant.property-value.css, support.constant.color.css#846617
keyword.other.unit.css#007986
support.type.property-name.json#3d7925
markup.heading, markup.heading entity.name, entity.name.section.markdown#4f7d15bold
markup.bold#846617bold
markup.italic#3d7925italic
markup.inline.raw, markup.raw#845bbd
markup.underline.link#7f6666
markup.quote#7f923citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050