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#362a09
  • activityBar.border#57440f
  • activityBar.foreground#ffc72c
  • activityBar.inactiveForeground#a98e44
  • activityBarBadge.background#1b368c
  • activityBarBadge.foreground#f5f4f1
  • badge.background#ffc72c
  • badge.foreground#261e07
  • breadcrumb.activeSelectionForeground#e5decb
  • breadcrumb.focusForeground#e5decb
  • breadcrumb.foreground#a98e44
  • button.background#ffc72c
  • button.foreground#261e07
  • button.hoverBackground#ffcd41
  • button.secondaryBackground#42340b
  • button.secondaryForeground#e5decb
  • descriptionForeground#a98e44
  • dropdown.background#362a09
  • dropdown.border#57440f
  • dropdown.foreground#e5decb
  • editor.background#292007
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#e5decb
  • editor.inactiveSelectionBackground#ffc72c26
  • editor.lineHighlightBackground#ffc72c1a
  • editor.lineHighlightBorder#ffc72c00
  • editor.selectionBackground#ffc72c4d
  • editor.wordHighlightBackground#ffc72c33
  • editorBracketMatch.background#ffc72c40
  • editorBracketMatch.border#ffc72c99
  • editorCursor.foreground#ffc72c
  • editorError.foreground#dd4132
  • editorGroup.border#57440f
  • editorGroupHeader.tabsBackground#362a09
  • editorGroupHeader.tabsBorder#57440f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e5decb33
  • editorIndentGuide.background#e5decb14
  • editorInfo.foreground#1b368c
  • editorLineNumber.activeForeground#e5decb
  • editorLineNumber.foreground#a98e44
  • editorRuler.foreground#e5decb14
  • editorSuggestWidget.selectedBackground#ffc72c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e5decb1a
  • editorWidget.background#362a09
  • editorWidget.border#57440f
  • focusBorder#ffc72c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a98e44
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a98e44
  • input.background#362a09
  • input.border#57440f
  • input.foreground#e5decb
  • input.placeholderForeground#a98e44
  • inputOption.activeBorder#ffc72c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#1b368c
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ffc72c4d
  • list.activeSelectionForeground#e5decb
  • list.focusBackground#ffc72c33
  • list.highlightForeground#ffc72c
  • list.hoverBackground#ffc72c26
  • list.inactiveSelectionBackground#ffc72c26
  • minimap.background#292007
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#ffc72c66
  • notificationLink.foreground#ffc72c
  • notifications.background#42340b
  • notifications.foreground#e5decb
  • panel.background#362a09
  • panel.border#57440f
  • panelTitle.activeBorder#ffc72c
  • panelTitle.activeForeground#e5decb
  • panelTitle.inactiveForeground#a98e44
  • peekView.border#ffc72c
  • peekViewEditor.background#362a09
  • peekViewResult.background#42340b
  • peekViewTitle.background#362a09
  • progressBar.background#ffc72c
  • scrollbar.shadow#19140445
  • scrollbarSlider.activeBackground#e5decb59
  • scrollbarSlider.background#e5decb1f
  • scrollbarSlider.hoverBackground#e5decb40
  • selection.background#ffc72c4d
  • sideBar.background#42340b
  • sideBar.border#57440f
  • sideBar.foreground#e5decb
  • sideBarSectionHeader.background#ffc72c26
  • sideBarSectionHeader.foreground#e5decb
  • sideBarTitle.foreground#e5decb
  • statusBar.background#99771a
  • statusBar.border#57440f
  • statusBar.debuggingBackground#1b368c
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#ffdd80
  • statusBar.noFolderBackground#362a09
  • statusBarItem.hoverBackground#ffc72c4d
  • statusBarItem.remoteBackground#ffc72c
  • statusBarItem.remoteForeground#261e07
  • tab.activeBackground#292007
  • tab.activeBorder#ffc72c
  • tab.activeBorderTop#ffc72c00
  • tab.activeForeground#e5decb
  • tab.border#57440f
  • tab.inactiveBackground#362a09
  • tab.inactiveForeground#a98e44
  • terminal.ansiBlack#292007
  • terminal.ansiBlue#878a57
  • terminal.ansiBrightBlack#a98e44
  • 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#e5decb
  • terminal.ansiYellow#efc050
  • terminal.background#362a09
  • terminal.foreground#e5decb
  • terminalCursor.foreground#ffc72c
  • textLink.activeForeground#3d549d
  • textLink.foreground#1b368c
  • titleBar.activeBackground#362a09
  • titleBar.activeForeground#e5decb
  • titleBar.border#57440f
  • titleBar.inactiveBackground#362a09
  • titleBar.inactiveForeground#a98e44

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a98e44italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ffc72cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ffc72cbold
storage.type, storage.modifier#ffc72cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7f90bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ffc72c
string.regexp#7f90bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f9423abold
variable.other.constant, variable.other.enummember#f9423abold
constant.character.escape#ffcf4c
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#e8e835italic
entity.name.type.parameter#e8e835italic
entity.name.function, meta.function entity.name.function#f5b5c8bold
meta.function-call entity.name.function, support.function#f5b5c8
meta.method-call entity.name.function, entity.name.function.member#f5b5c8
variable, variable.other, variable.other.readwrite#e5decb
variable.parameter#e5decbitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#ffc72citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e5decb
entity.name.class, entity.name.type.class, support.class#a5889cbold italic
entity.other.inherited-class#a5889citalic
entity.name.tag, punctuation.definition.tag#ffc72cbold
entity.other.attribute-name#f5b5c8italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ffcf4c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a98e44
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#e8e835italic
support.type.property-name.css, support.type.vendored.property-name.css#e8e835
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a5889cbold
support.constant.property-value.css, support.constant.color.css#f9423a
keyword.other.unit.css#00b140
support.type.property-name.json#e8e835
markup.heading, markup.heading entity.name, entity.name.section.markdown#ffc72cbold
markup.bold#f9423abold
markup.italic#e8e835italic
markup.inline.raw, markup.raw#7f90bf
markup.underline.link#f5b5c8
markup.quote#a98e44italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050