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#271e0d
  • activityBar.border#463417
  • activityBar.foreground#e8ae4e
  • activityBar.inactiveForeground#c7a674
  • activityBarBadge.background#003da5
  • activityBarBadge.foreground#f9f8f5
  • badge.background#e8ae4e
  • badge.foreground#231a0c
  • breadcrumb.activeSelectionForeground#efe6d9
  • breadcrumb.focusForeground#efe6d9
  • breadcrumb.foreground#c7a674
  • button.background#e8ae4e
  • button.foreground#231a0c
  • button.hoverBackground#eab660
  • button.secondaryBackground#332611
  • button.secondaryForeground#efe6d9
  • descriptionForeground#c7a674
  • dropdown.background#271e0d
  • dropdown.border#463417
  • dropdown.foreground#efe6d9
  • editor.background#1c1509
  • editor.findMatchBackground#b163a366
  • editor.findMatchHighlightBackground#b163a333
  • editor.foreground#efe6d9
  • editor.inactiveSelectionBackground#e8ae4e26
  • editor.lineHighlightBackground#e8ae4e1a
  • editor.lineHighlightBorder#e8ae4e00
  • editor.selectionBackground#e8ae4e4d
  • editor.wordHighlightBackground#e8ae4e33
  • editorBracketMatch.background#e8ae4e40
  • editorBracketMatch.border#e8ae4e99
  • editorCursor.foreground#e8ae4e
  • editorError.foreground#dd4132
  • editorGroup.border#463417
  • editorGroupHeader.tabsBackground#271e0d
  • editorGroupHeader.tabsBorder#463417
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#efe6d933
  • editorIndentGuide.background#efe6d914
  • editorInfo.foreground#003da5
  • editorLineNumber.activeForeground#efe6d9
  • editorLineNumber.foreground#c7a674
  • editorRuler.foreground#efe6d914
  • editorSuggestWidget.selectedBackground#e8ae4e40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#efe6d91a
  • editorWidget.background#271e0d
  • editorWidget.border#463417
  • focusBorder#e8ae4e99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#c7a674
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#c7a674
  • input.background#271e0d
  • input.border#463417
  • input.foreground#efe6d9
  • input.placeholderForeground#c7a674
  • inputOption.activeBorder#e8ae4e
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#003da5
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#e8ae4e4d
  • list.activeSelectionForeground#efe6d9
  • list.focusBackground#e8ae4e33
  • list.highlightForeground#e8ae4e
  • list.hoverBackground#e8ae4e26
  • list.inactiveSelectionBackground#e8ae4e26
  • minimap.background#1c1509
  • minimap.findMatchHighlight#b163a399
  • minimap.selectionHighlight#e8ae4e66
  • notificationLink.foreground#e8ae4e
  • notifications.background#332611
  • notifications.foreground#efe6d9
  • panel.background#271e0d
  • panel.border#463417
  • panelTitle.activeBorder#e8ae4e
  • panelTitle.activeForeground#efe6d9
  • panelTitle.inactiveForeground#c7a674
  • peekView.border#e8ae4e
  • peekViewEditor.background#271e0d
  • peekViewResult.background#332611
  • peekViewTitle.background#271e0d
  • progressBar.background#e8ae4e
  • scrollbar.shadow#17110845
  • scrollbarSlider.activeBackground#efe6d959
  • scrollbarSlider.background#efe6d91f
  • scrollbarSlider.hoverBackground#efe6d940
  • selection.background#e8ae4e4d
  • sideBar.background#332611
  • sideBar.border#463417
  • sideBar.foreground#efe6d9
  • sideBarSectionHeader.background#e8ae4e26
  • sideBarSectionHeader.foreground#efe6d9
  • sideBarTitle.foreground#efe6d9
  • statusBar.background#8b682f
  • statusBar.border#463417
  • statusBar.debuggingBackground#003da5
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#f1ce95
  • statusBar.noFolderBackground#271e0d
  • statusBarItem.hoverBackground#e8ae4e4d
  • statusBarItem.remoteBackground#e8ae4e
  • statusBarItem.remoteForeground#231a0c
  • tab.activeBackground#1c1509
  • tab.activeBorder#e8ae4e
  • tab.activeBorderTop#e8ae4e00
  • tab.activeForeground#efe6d9
  • tab.border#463417
  • tab.inactiveBackground#271e0d
  • tab.inactiveForeground#c7a674
  • terminal.ansiBlack#1c1509
  • terminal.ansiBlue#7c7d68
  • terminal.ansiBrightBlack#c7a674
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f9f8f5
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#efe6d9
  • terminal.ansiYellow#efc050
  • terminal.background#271e0d
  • terminal.foreground#efe6d9
  • terminalCursor.foreground#e8ae4e
  • textLink.activeForeground#265ab3
  • textLink.foreground#003da5
  • titleBar.activeBackground#271e0d
  • titleBar.activeForeground#efe6d9
  • titleBar.border#463417
  • titleBar.inactiveBackground#271e0d
  • titleBar.inactiveForeground#c7a674

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#c7a674italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e8ae4ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e8ae4ebold
storage.type, storage.modifier#e8ae4ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#577fc4
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#e8ae4e
string.regexp#577fc4
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#b76faa
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#a3af86bold
variable.other.constant, variable.other.enummember#a3af86bold
constant.character.escape#ebba69
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#ffbe98italic
entity.name.type.parameter#ffbe98italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#efe6d9
variable.parameter#efe6d9italic
variable.language, variable.language.this, variable.language.self, variable.language.super#e8ae4eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#efe6d9
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#e8ae4ebold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ebba69
punctuation, punctuation.separator, punctuation.terminator, meta.brace#c7a674
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ffbe98italic
support.type.property-name.css, support.type.vendored.property-name.css#ffbe98
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#a3af86
keyword.other.unit.css#b76faa
support.type.property-name.json#ffbe98
markup.heading, markup.heading entity.name, entity.name.section.markdown#e8ae4ebold
markup.bold#a3af86bold
markup.italic#ffbe98italic
markup.inline.raw, markup.raw#577fc4
markup.underline.link#f7cac9
markup.quote#c7a674italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050