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#e8e7df
  • activityBar.border#c3c4ad
  • activityBar.foreground#4e9a2f
  • activityBar.inactiveForeground#6e8442
  • activityBarBadge.background#53057e
  • activityBarBadge.foreground#f5f4f1
  • badge.background#4e9a2f
  • badge.foreground#11220a
  • breadcrumb.activeSelectionForeground#11220a
  • breadcrumb.focusForeground#11220a
  • breadcrumb.foreground#6e8442
  • button.background#4e9a2f
  • button.foreground#11220a
  • button.hoverBackground#468b2a
  • button.secondaryBackground#e8e7df
  • button.secondaryForeground#11220a
  • descriptionForeground#6e8442
  • dropdown.background#f7f7f4
  • dropdown.border#c3c4ad
  • dropdown.foreground#11220a
  • editor.background#f7f7f4
  • editor.findMatchBackground#00b5cc59
  • editor.findMatchHighlightBackground#00b5cc26
  • editor.foreground#11220a
  • editor.inactiveSelectionBackground#4e9a2f1a
  • editor.lineHighlightBackground#4e9a2f14
  • editor.lineHighlightBorder#4e9a2f00
  • editor.selectionBackground#4e9a2f33
  • editor.wordHighlightBackground#4e9a2f26
  • editorBracketMatch.background#4e9a2f33
  • editorBracketMatch.border#4e9a2f80
  • editorCursor.foreground#4e9a2f
  • editorError.foreground#bf1932
  • editorGroup.border#c3c4ad
  • editorGroupHeader.tabsBackground#f0efe9
  • editorGroupHeader.tabsBorder#c3c4ad
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#11220a2e
  • editorIndentGuide.background#11220a14
  • editorInfo.foreground#53057e
  • editorLineNumber.activeForeground#11220a
  • editorLineNumber.foreground#6e8442
  • editorRuler.foreground#11220a14
  • editorSuggestWidget.selectedBackground#4e9a2f26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#11220a1a
  • editorWidget.background#f7f7f4
  • editorWidget.border#c3c4ad
  • focusBorder#4e9a2f80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#6e8442
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#6e8442
  • input.background#f7f7f4
  • input.border#c3c4ad
  • input.foreground#11220a
  • input.placeholderForeground#6e8442
  • inputOption.activeBorder#4e9a2f
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#53057e
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#4e9a2f33
  • list.activeSelectionForeground#11220a
  • list.focusBackground#4e9a2f26
  • list.highlightForeground#4e9a2f
  • list.hoverBackground#4e9a2f1a
  • list.inactiveSelectionBackground#4e9a2f1a
  • minimap.background#f7f7f4
  • minimap.findMatchHighlight#00b5cc80
  • minimap.selectionHighlight#4e9a2f4d
  • notificationLink.foreground#4e9a2f
  • notifications.background#f7f7f4
  • notifications.foreground#11220a
  • panel.background#f0efe9
  • panel.border#c3c4ad
  • panelTitle.activeBorder#4e9a2f
  • panelTitle.activeForeground#11220a
  • panelTitle.inactiveForeground#6e8442
  • peekView.border#4e9a2f
  • peekViewEditor.background#f0efe9
  • peekViewResult.background#e8e7df
  • peekViewTitle.background#f0efe9
  • progressBar.background#4e9a2f
  • scrollbar.shadow#080f0514
  • scrollbarSlider.activeBackground#11220a4d
  • scrollbarSlider.background#11220a1a
  • scrollbarSlider.hoverBackground#11220a33
  • selection.background#4e9a2f33
  • sideBar.background#f0efe9
  • sideBar.border#c3c4ad
  • sideBar.foreground#11220a
  • sideBarSectionHeader.background#4e9a2f1a
  • sideBarSectionHeader.foreground#11220a
  • sideBarTitle.foreground#11220a
  • statusBar.background#4e9a2f
  • statusBar.border#c3c4ad
  • statusBar.debuggingBackground#53057e
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#11220a
  • statusBar.noFolderBackground#e8e7df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#428328
  • statusBarItem.remoteForeground#11220a
  • tab.activeBackground#f7f7f4
  • tab.activeBorder#4e9a2f
  • tab.activeBorderTop#4e9a2f00
  • tab.activeForeground#11220a
  • tab.border#c3c4ad
  • tab.inactiveBackground#f0efe9
  • tab.inactiveForeground#6e8442
  • terminal.ansiBlack#11220a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#6e8442
  • 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#f7f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f0efe9
  • terminal.foreground#11220a
  • terminalCursor.foreground#4e9a2f
  • textLink.activeForeground#4a0570
  • textLink.foreground#53057e
  • titleBar.activeBackground#f0efe9
  • titleBar.activeForeground#11220a
  • titleBar.border#c3c4ad
  • titleBar.inactiveBackground#f0efe9
  • titleBar.inactiveForeground#6e8442

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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