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#2a260d
  • activityBar.border#4a4317
  • activityBar.foreground#f5df4d
  • activityBar.inactiveForeground#a6954e
  • activityBarBadge.background#1b2a6b
  • activityBarBadge.foreground#f5f4f1
  • badge.background#f5df4d
  • badge.foreground#25210c
  • breadcrumb.activeSelectionForeground#e4e0cd
  • breadcrumb.focusForeground#e4e0cd
  • breadcrumb.foreground#a6954e
  • button.background#f5df4d
  • button.foreground#25210c
  • button.hoverBackground#f6e25f
  • button.secondaryBackground#363111
  • button.secondaryForeground#e4e0cd
  • descriptionForeground#a6954e
  • dropdown.background#2a260d
  • dropdown.border#4a4317
  • dropdown.foreground#e4e0cd
  • editor.background#1d1b09
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#e4e0cd
  • editor.inactiveSelectionBackground#f5df4d26
  • editor.lineHighlightBackground#f5df4d1a
  • editor.lineHighlightBorder#f5df4d00
  • editor.selectionBackground#f5df4d4d
  • editor.wordHighlightBackground#f5df4d33
  • editorBracketMatch.background#f5df4d40
  • editorBracketMatch.border#f5df4d99
  • editorCursor.foreground#f5df4d
  • editorError.foreground#dd4132
  • editorGroup.border#4a4317
  • editorGroupHeader.tabsBackground#2a260d
  • editorGroupHeader.tabsBorder#4a4317
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e4e0cd33
  • editorIndentGuide.background#e4e0cd14
  • editorInfo.foreground#1b2a6b
  • editorLineNumber.activeForeground#e4e0cd
  • editorLineNumber.foreground#a6954e
  • editorRuler.foreground#e4e0cd14
  • editorSuggestWidget.selectedBackground#f5df4d40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e4e0cd1a
  • editorWidget.background#2a260d
  • editorWidget.border#4a4317
  • focusBorder#f5df4d99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a6954e
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a6954e
  • input.background#2a260d
  • input.border#4a4317
  • input.foreground#e4e0cd
  • input.placeholderForeground#a6954e
  • inputOption.activeBorder#f5df4d
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#1b2a6b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f5df4d4d
  • list.activeSelectionForeground#e4e0cd
  • list.focusBackground#f5df4d33
  • list.highlightForeground#f5df4d
  • list.hoverBackground#f5df4d26
  • list.inactiveSelectionBackground#f5df4d26
  • minimap.background#1d1b09
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#f5df4d66
  • notificationLink.foreground#f5df4d
  • notifications.background#363111
  • notifications.foreground#e4e0cd
  • panel.background#2a260d
  • panel.border#4a4317
  • panelTitle.activeBorder#f5df4d
  • panelTitle.activeForeground#e4e0cd
  • panelTitle.inactiveForeground#a6954e
  • peekView.border#f5df4d
  • peekViewEditor.background#2a260d
  • peekViewResult.background#363111
  • peekViewTitle.background#2a260d
  • progressBar.background#f5df4d
  • scrollbar.shadow#18160845
  • scrollbarSlider.activeBackground#e4e0cd59
  • scrollbarSlider.background#e4e0cd1f
  • scrollbarSlider.hoverBackground#e4e0cd40
  • selection.background#f5df4d4d
  • sideBar.background#363111
  • sideBar.border#4a4317
  • sideBar.foreground#e4e0cd
  • sideBarSectionHeader.background#f5df4d26
  • sideBarSectionHeader.foreground#e4e0cd
  • sideBarTitle.foreground#e4e0cd
  • statusBar.background#93862e
  • statusBar.border#4a4317
  • statusBar.debuggingBackground#1b2a6b
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#f9ec94
  • statusBar.noFolderBackground#2a260d
  • statusBarItem.hoverBackground#f5df4d4d
  • statusBarItem.remoteBackground#f5df4d
  • statusBarItem.remoteForeground#25210c
  • tab.activeBackground#1d1b09
  • tab.activeBorder#f5df4d
  • tab.activeBorderTop#f5df4d00
  • tab.activeForeground#e4e0cd
  • tab.border#4a4317
  • tab.inactiveBackground#2a260d
  • tab.inactiveForeground#a6954e
  • terminal.ansiBlack#1d1b09
  • terminal.ansiBlue#829667
  • terminal.ansiBrightBlack#a6954e
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e4e0cd
  • terminal.ansiYellow#efc050
  • terminal.background#2a260d
  • terminal.foreground#e4e0cd
  • terminalCursor.foreground#f5df4d
  • textLink.activeForeground#3d4a81
  • textLink.foreground#1b2a6b
  • titleBar.activeBackground#2a260d
  • titleBar.activeForeground#e4e0cd
  • titleBar.border#4a4317
  • titleBar.inactiveBackground#2a260d
  • titleBar.inactiveForeground#a6954e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a6954eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f5df4dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f5df4dbold
storage.type, storage.modifier#f5df4dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7f87ac
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f5df4d
string.regexp#7f87ac
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f7a08bbold
variable.other.constant, variable.other.enummember#f7a08bbold
constant.character.escape#f7e468
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#b9a384italic
entity.name.type.parameter#b9a384italic
entity.name.function, meta.function entity.name.function#b0d7e1bold
meta.function-call entity.name.function, support.function#b0d7e1
meta.method-call entity.name.function, entity.name.function.member#b0d7e1
variable, variable.other, variable.other.readwrite#e4e0cd
variable.parameter#e4e0cditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#f5df4ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e4e0cd
entity.name.class, entity.name.type.class, support.class#ff3ca0bold italic
entity.other.inherited-class#ff3ca0italic
entity.name.tag, punctuation.definition.tag#f5df4dbold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f7e468
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a6954e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b9a384italic
support.type.property-name.css, support.type.vendored.property-name.css#b9a384
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff3ca0bold
support.constant.property-value.css, support.constant.color.css#f7a08b
keyword.other.unit.css#00b140
support.type.property-name.json#b9a384
markup.heading, markup.heading entity.name, entity.name.section.markdown#f5df4dbold
markup.bold#f7a08bbold
markup.italic#b9a384italic
markup.inline.raw, markup.raw#7f87ac
markup.underline.link#b0d7e1
markup.quote#a6954eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme