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#c8c3ac
  • activityBar.foreground#8a8d28
  • activityBar.inactiveForeground#867f3f
  • activityBarBadge.background#5c5d9a
  • activityBarBadge.foreground#f5f4f1
  • badge.background#8a8d28
  • badge.foreground#1e1f09
  • breadcrumb.activeSelectionForeground#1e1f09
  • breadcrumb.focusForeground#1e1f09
  • breadcrumb.foreground#867f3f
  • button.background#8a8d28
  • button.foreground#1e1f09
  • button.hoverBackground#7c7f24
  • button.secondaryBackground#e9e7de
  • button.secondaryForeground#1e1f09
  • descriptionForeground#867f3f
  • dropdown.background#f8f7f4
  • dropdown.border#c8c3ac
  • dropdown.foreground#1e1f09
  • editor.background#f8f7f4
  • editor.findMatchBackground#e8d4e259
  • editor.findMatchHighlightBackground#e8d4e226
  • editor.foreground#1e1f09
  • editor.inactiveSelectionBackground#8a8d281a
  • editor.lineHighlightBackground#8a8d2814
  • editor.lineHighlightBorder#8a8d2800
  • editor.selectionBackground#8a8d2833
  • editor.wordHighlightBackground#8a8d2826
  • editorBracketMatch.background#8a8d2833
  • editorBracketMatch.border#8a8d2880
  • editorCursor.foreground#8a8d28
  • editorError.foreground#bf1932
  • editorGroup.border#c8c3ac
  • editorGroupHeader.tabsBackground#f0efe9
  • editorGroupHeader.tabsBorder#c8c3ac
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1e1f092e
  • editorIndentGuide.background#1e1f0914
  • editorInfo.foreground#5c5d9a
  • editorLineNumber.activeForeground#1e1f09
  • editorLineNumber.foreground#867f3f
  • editorRuler.foreground#1e1f0914
  • editorSuggestWidget.selectedBackground#8a8d2826
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1e1f091a
  • editorWidget.background#f8f7f4
  • editorWidget.border#c8c3ac
  • focusBorder#8a8d2880
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#867f3f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#867f3f
  • input.background#f8f7f4
  • input.border#c8c3ac
  • input.foreground#1e1f09
  • input.placeholderForeground#867f3f
  • inputOption.activeBorder#8a8d28
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#5c5d9a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#8a8d2833
  • list.activeSelectionForeground#1e1f09
  • list.focusBackground#8a8d2826
  • list.highlightForeground#8a8d28
  • list.hoverBackground#8a8d281a
  • list.inactiveSelectionBackground#8a8d281a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#e8d4e280
  • minimap.selectionHighlight#8a8d284d
  • notificationLink.foreground#8a8d28
  • notifications.background#f8f7f4
  • notifications.foreground#1e1f09
  • panel.background#f0efe9
  • panel.border#c8c3ac
  • panelTitle.activeBorder#8a8d28
  • panelTitle.activeForeground#1e1f09
  • panelTitle.inactiveForeground#867f3f
  • peekView.border#8a8d28
  • peekViewEditor.background#f0efe9
  • peekViewResult.background#e9e7de
  • peekViewTitle.background#f0efe9
  • progressBar.background#8a8d28
  • scrollbar.shadow#0e0e0414
  • scrollbarSlider.activeBackground#1e1f094d
  • scrollbarSlider.background#1e1f091a
  • scrollbarSlider.hoverBackground#1e1f0933
  • selection.background#8a8d2833
  • sideBar.background#f0efe9
  • sideBar.border#c8c3ac
  • sideBar.foreground#1e1f09
  • sideBarSectionHeader.background#8a8d281a
  • sideBarSectionHeader.foreground#1e1f09
  • sideBarTitle.foreground#1e1f09
  • statusBar.background#8a8d28
  • statusBar.border#c8c3ac
  • statusBar.debuggingBackground#5c5d9a
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#1e1f09
  • statusBar.noFolderBackground#e9e7de
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#757822
  • statusBarItem.remoteForeground#1e1f09
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#8a8d28
  • tab.activeBorderTop#8a8d2800
  • tab.activeForeground#1e1f09
  • tab.border#c8c3ac
  • tab.inactiveBackground#f0efe9
  • tab.inactiveForeground#867f3f
  • terminal.ansiBlack#1e1f09
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#867f3f
  • 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#1e1f09
  • terminalCursor.foreground#8a8d28
  • textLink.activeForeground#525289
  • textLink.foreground#5c5d9a
  • titleBar.activeBackground#f0efe9
  • titleBar.activeForeground#1e1f09
  • titleBar.border#c8c3ac
  • titleBar.inactiveBackground#f0efe9
  • titleBar.inactiveForeground#867f3f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#867f3fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6c6e1fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6c6e1fbold
storage.type, storage.modifier#6c6e1fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6667ab
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6c6e1f
string.regexp#6667ab
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#786d74
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#3d7925bold
variable.other.constant, variable.other.enummember#3d7925bold
constant.character.escape#6f7034
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#6c7358italic
entity.name.type.parameter#6c7358italic
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#1e1f09
variable.parameter#1e1f09italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6c6e1fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e1f09
entity.name.class, entity.name.type.class, support.class#d4145abold italic
entity.other.inherited-class#d4145aitalic
entity.name.tag, punctuation.definition.tag#6c6e1fbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6f7034
punctuation, punctuation.separator, punctuation.terminator, meta.brace#867f3f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6c7358italic
support.type.property-name.css, support.type.vendored.property-name.css#6c7358
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d4145abold
support.constant.property-value.css, support.constant.color.css#3d7925
keyword.other.unit.css#786d74
support.type.property-name.json#6c7358
markup.heading, markup.heading entity.name, entity.name.section.markdown#6c6e1fbold
markup.bold#3d7925bold
markup.italic#6c7358italic
markup.inline.raw, markup.raw#6667ab
markup.underline.link#7f6666
markup.quote#867f3fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050