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#faf5f1
  • activityBar.border#f3e1d7
  • activityBar.foreground#cc6236
  • activityBar.inactiveForeground#ebac8d
  • activityBarBadge.background#6fb0cb
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc6236
  • badge.foreground#26120a
  • breadcrumb.activeSelectionForeground#26120a
  • breadcrumb.focusForeground#26120a
  • breadcrumb.foreground#ebac8d
  • button.background#cc6236
  • button.foreground#26120a
  • button.hoverBackground#b85831
  • button.secondaryBackground#faf5f1
  • button.secondaryForeground#26120a
  • descriptionForeground#ebac8d
  • dropdown.background#fdfcfa
  • dropdown.border#f3e1d7
  • dropdown.foreground#26120a
  • editor.background#fdfcfa
  • editor.findMatchBackground#9063cd59
  • editor.findMatchHighlightBackground#9063cd26
  • editor.foreground#26120a
  • editor.inactiveSelectionBackground#cc62361a
  • editor.lineHighlightBackground#cc623614
  • editor.lineHighlightBorder#cc623600
  • editor.selectionBackground#cc623633
  • editor.wordHighlightBackground#cc623626
  • editorBracketMatch.background#cc623633
  • editorBracketMatch.border#cc623680
  • editorCursor.foreground#cc6236
  • editorError.foreground#bf1932
  • editorGroup.border#f3e1d7
  • editorGroupHeader.tabsBackground#fbf8f6
  • editorGroupHeader.tabsBorder#f3e1d7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#26120a2e
  • editorIndentGuide.background#26120a14
  • editorInfo.foreground#6fb0cb
  • editorLineNumber.activeForeground#26120a
  • editorLineNumber.foreground#ebac8d
  • editorRuler.foreground#26120a14
  • editorSuggestWidget.selectedBackground#cc623626
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#26120a1a
  • editorWidget.background#fdfcfa
  • editorWidget.border#f3e1d7
  • focusBorder#cc623680
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ebac8d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ebac8d
  • input.background#fdfcfa
  • input.border#f3e1d7
  • input.foreground#26120a
  • input.placeholderForeground#ebac8d
  • inputOption.activeBorder#cc6236
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#6fb0cb
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc623633
  • list.activeSelectionForeground#26120a
  • list.focusBackground#cc623626
  • list.highlightForeground#cc6236
  • list.hoverBackground#cc62361a
  • list.inactiveSelectionBackground#cc62361a
  • minimap.background#fdfcfa
  • minimap.findMatchHighlight#9063cd80
  • minimap.selectionHighlight#cc62364d
  • notificationLink.foreground#cc6236
  • notifications.background#fdfcfa
  • notifications.foreground#26120a
  • panel.background#fbf8f6
  • panel.border#f3e1d7
  • panelTitle.activeBorder#cc6236
  • panelTitle.activeForeground#26120a
  • panelTitle.inactiveForeground#ebac8d
  • peekView.border#cc6236
  • peekViewEditor.background#fbf8f6
  • peekViewResult.background#faf5f1
  • peekViewTitle.background#fbf8f6
  • progressBar.background#cc6236
  • scrollbar.shadow#190c0714
  • scrollbarSlider.activeBackground#26120a4d
  • scrollbarSlider.background#26120a1a
  • scrollbarSlider.hoverBackground#26120a33
  • selection.background#cc623633
  • sideBar.background#fbf8f6
  • sideBar.border#f3e1d7
  • sideBar.foreground#26120a
  • sideBarSectionHeader.background#cc62361a
  • sideBarSectionHeader.foreground#26120a
  • sideBarTitle.foreground#26120a
  • statusBar.background#cc6236
  • statusBar.border#f3e1d7
  • statusBar.debuggingBackground#6fb0cb
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#26120a
  • statusBar.noFolderBackground#faf5f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad532e
  • statusBarItem.remoteForeground#26120a
  • tab.activeBackground#fdfcfa
  • tab.activeBorder#cc6236
  • tab.activeBorderTop#cc623600
  • tab.activeForeground#26120a
  • tab.border#f3e1d7
  • tab.inactiveBackground#fbf8f6
  • tab.inactiveForeground#ebac8d
  • terminal.ansiBlack#26120a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ebac8d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f6
  • terminal.foreground#26120a
  • terminalCursor.foreground#cc6236
  • textLink.activeForeground#629db5
  • textLink.foreground#6fb0cb
  • titleBar.activeBackground#fbf8f6
  • titleBar.activeForeground#26120a
  • titleBar.border#f3e1d7
  • titleBar.inactiveBackground#fbf8f6
  • titleBar.inactiveForeground#ebac8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ebac8ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b75830bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b75830bold
storage.type, storage.modifier#b75830bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4b7889
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b75830
string.regexp#4b7889
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#845bbd
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c74375bold
variable.other.constant, variable.other.enummember#c74375bold
constant.character.escape#a85e3f
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#d33831italic
entity.name.type.parameter#d33831italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#26120a
variable.parameter#26120aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#b75830italic
variable.other.property, variable.other.object.property, meta.object-literal.key#26120a
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#b75830bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a85e3f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ebac8d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#d33831italic
support.type.property-name.css, support.type.vendored.property-name.css#d33831
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#c74375
keyword.other.unit.css#845bbd
support.type.property-name.json#d33831
markup.heading, markup.heading entity.name, entity.name.section.markdown#b75830bold
markup.bold#c74375bold
markup.italic#d33831italic
markup.inline.raw, markup.raw#4b7889
markup.underline.link#38793a
markup.quote#ebac8ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme