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#e9e6df
  • activityBar.border#c8c1af
  • activityBar.foreground#84754e
  • activityBar.inactiveForeground#84754e
  • activityBarBadge.background#18317e
  • activityBarBadge.foreground#f5f4f1
  • badge.background#84754e
  • badge.foreground#1d1a11
  • breadcrumb.activeSelectionForeground#1d1a11
  • breadcrumb.focusForeground#1d1a11
  • breadcrumb.foreground#84754e
  • button.background#84754e
  • button.foreground#1d1a11
  • button.hoverBackground#776946
  • button.secondaryBackground#e9e6df
  • button.secondaryForeground#1d1a11
  • descriptionForeground#84754e
  • dropdown.background#f8f7f4
  • dropdown.border#c8c1af
  • dropdown.foreground#1d1a11
  • editor.background#f8f7f4
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#1d1a11
  • editor.inactiveSelectionBackground#84754e1a
  • editor.lineHighlightBackground#84754e14
  • editor.lineHighlightBorder#84754e00
  • editor.selectionBackground#84754e33
  • editor.wordHighlightBackground#84754e26
  • editorBracketMatch.background#84754e33
  • editorBracketMatch.border#84754e80
  • editorCursor.foreground#84754e
  • editorError.foreground#bf1932
  • editorGroup.border#c8c1af
  • editorGroupHeader.tabsBackground#f0eeea
  • editorGroupHeader.tabsBorder#c8c1af
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1d1a112e
  • editorIndentGuide.background#1d1a1114
  • editorInfo.foreground#18317e
  • editorLineNumber.activeForeground#1d1a11
  • editorLineNumber.foreground#84754e
  • editorRuler.foreground#1d1a1114
  • editorSuggestWidget.selectedBackground#84754e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1d1a111a
  • editorWidget.background#f8f7f4
  • editorWidget.border#c8c1af
  • focusBorder#84754e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#84754e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#84754e
  • input.background#f8f7f4
  • input.border#c8c1af
  • input.foreground#1d1a11
  • input.placeholderForeground#84754e
  • inputOption.activeBorder#84754e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#18317e
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#84754e33
  • list.activeSelectionForeground#1d1a11
  • list.focusBackground#84754e26
  • list.highlightForeground#84754e
  • list.hoverBackground#84754e1a
  • list.inactiveSelectionBackground#84754e1a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#84754e4d
  • notificationLink.foreground#84754e
  • notifications.background#f8f7f4
  • notifications.foreground#1d1a11
  • panel.background#f0eeea
  • panel.border#c8c1af
  • panelTitle.activeBorder#84754e
  • panelTitle.activeForeground#1d1a11
  • panelTitle.inactiveForeground#84754e
  • peekView.border#84754e
  • peekViewEditor.background#f0eeea
  • peekViewResult.background#e9e6df
  • peekViewTitle.background#f0eeea
  • progressBar.background#84754e
  • scrollbar.shadow#0d0c0814
  • scrollbarSlider.activeBackground#1d1a114d
  • scrollbarSlider.background#1d1a111a
  • scrollbarSlider.hoverBackground#1d1a1133
  • selection.background#84754e33
  • sideBar.background#f0eeea
  • sideBar.border#c8c1af
  • sideBar.foreground#1d1a11
  • sideBarSectionHeader.background#84754e1a
  • sideBarSectionHeader.foreground#1d1a11
  • sideBarTitle.foreground#1d1a11
  • statusBar.background#84754e
  • statusBar.border#c8c1af
  • statusBar.debuggingBackground#18317e
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#1d1a11
  • statusBar.noFolderBackground#e9e6df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#706342
  • statusBarItem.remoteForeground#1d1a11
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#84754e
  • tab.activeBorderTop#84754e00
  • tab.activeForeground#1d1a11
  • tab.border#c8c1af
  • tab.inactiveBackground#f0eeea
  • tab.inactiveForeground#84754e
  • terminal.ansiBlack#1d1a11
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#84754e
  • 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#f0eeea
  • terminal.foreground#1d1a11
  • terminalCursor.foreground#84754e
  • textLink.activeForeground#162b70
  • textLink.foreground#18317e
  • titleBar.activeBackground#f0eeea
  • titleBar.activeForeground#1d1a11
  • titleBar.border#c8c1af
  • titleBar.inactiveBackground#f0eeea
  • titleBar.inactiveForeground#84754e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#84754eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#796c48bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#796c48bold
storage.type, storage.modifier#796c48bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#1b368c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#796c48
string.regexp#1b368c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5a7431bold
variable.other.constant, variable.other.enummember#5a7431bold
constant.character.escape#756c52
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#716962italic
entity.name.type.parameter#716962italic
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#1d1a11
variable.parameter#1d1a11italic
variable.language, variable.language.this, variable.language.self, variable.language.super#796c48italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1d1a11
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#796c48bold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#756c52
punctuation, punctuation.separator, punctuation.terminator, meta.brace#84754e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#716962italic
support.type.property-name.css, support.type.vendored.property-name.css#716962
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#5a7431
keyword.other.unit.css#007f2e
support.type.property-name.json#716962
markup.heading, markup.heading entity.name, entity.name.section.markdown#796c48bold
markup.bold#5a7431bold
markup.italic#716962italic
markup.inline.raw, markup.raw#1b368c
markup.underline.link#7f6666
markup.quote#84754eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050