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#221915
  • activityBar.border#382922
  • activityBar.foreground#a47864
  • activityBar.inactiveForeground#cdb4a3
  • activityBarBadge.background#7bc4e2
  • activityBarBadge.foreground#fcfbfa
  • badge.background#a47864
  • badge.foreground#19120f
  • breadcrumb.activeSelectionForeground#f2ebe7
  • breadcrumb.focusForeground#f2ebe7
  • breadcrumb.foreground#cdb4a3
  • button.background#a47864
  • button.foreground#19120f
  • button.hoverBackground#ad8674
  • button.secondaryBackground#2b1f1a
  • button.secondaryForeground#f2ebe7
  • descriptionForeground#cdb4a3
  • dropdown.background#221915
  • dropdown.border#382922
  • dropdown.foreground#f2ebe7
  • editor.background#1a1310
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#f2ebe7
  • editor.inactiveSelectionBackground#a4786426
  • editor.lineHighlightBackground#a478641a
  • editor.lineHighlightBorder#a4786400
  • editor.selectionBackground#a478644d
  • editor.wordHighlightBackground#a4786433
  • editorBracketMatch.background#a4786440
  • editorBracketMatch.border#a4786499
  • editorCursor.foreground#a47864
  • editorError.foreground#dd4132
  • editorGroup.border#382922
  • editorGroupHeader.tabsBackground#221915
  • editorGroupHeader.tabsBorder#382922
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f2ebe733
  • editorIndentGuide.background#f2ebe714
  • editorInfo.foreground#7bc4e2
  • editorLineNumber.activeForeground#f2ebe7
  • editorLineNumber.foreground#cdb4a3
  • editorRuler.foreground#f2ebe714
  • editorSuggestWidget.selectedBackground#a4786440
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f2ebe71a
  • editorWidget.background#221915
  • editorWidget.border#382922
  • focusBorder#a4786499
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#cdb4a3
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#cdb4a3
  • input.background#221915
  • input.border#382922
  • input.foreground#f2ebe7
  • input.placeholderForeground#cdb4a3
  • inputOption.activeBorder#a47864
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7bc4e2
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#a478644d
  • list.activeSelectionForeground#f2ebe7
  • list.focusBackground#a4786433
  • list.highlightForeground#a47864
  • list.hoverBackground#a4786426
  • list.inactiveSelectionBackground#a4786426
  • minimap.background#1a1310
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#a4786466
  • notificationLink.foreground#a47864
  • notifications.background#2b1f1a
  • notifications.foreground#f2ebe7
  • panel.background#221915
  • panel.border#382922
  • panelTitle.activeBorder#a47864
  • panelTitle.activeForeground#f2ebe7
  • panelTitle.inactiveForeground#cdb4a3
  • peekView.border#a47864
  • peekViewEditor.background#221915
  • peekViewResult.background#2b1f1a
  • peekViewTitle.background#221915
  • progressBar.background#a47864
  • scrollbar.shadow#100c0a45
  • scrollbarSlider.activeBackground#f2ebe759
  • scrollbarSlider.background#f2ebe71f
  • scrollbarSlider.hoverBackground#f2ebe740
  • selection.background#a478644d
  • sideBar.background#2b1f1a
  • sideBar.border#382922
  • sideBar.foreground#f2ebe7
  • sideBarSectionHeader.background#a4786426
  • sideBarSectionHeader.foreground#f2ebe7
  • sideBarTitle.foreground#f2ebe7
  • statusBar.background#62483c
  • statusBar.border#382922
  • statusBar.debuggingBackground#7bc4e2
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#c8aea2
  • statusBar.noFolderBackground#221915
  • statusBarItem.hoverBackground#a478644d
  • statusBarItem.remoteBackground#a47864
  • statusBarItem.remoteForeground#19120f
  • tab.activeBackground#1a1310
  • tab.activeBorder#a47864
  • tab.activeBorderTop#a4786400
  • tab.activeForeground#f2ebe7
  • tab.border#382922
  • tab.inactiveBackground#221915
  • tab.inactiveForeground#cdb4a3
  • terminal.ansiBlack#1a1310
  • terminal.ansiBlue#5a6273
  • terminal.ansiBrightBlack#cdb4a3
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f2ebe7
  • terminal.ansiYellow#efc050
  • terminal.background#221915
  • terminal.foreground#f2ebe7
  • terminalCursor.foreground#a47864
  • textLink.activeForeground#8fcde6
  • textLink.foreground#7bc4e2
  • titleBar.activeBackground#221915
  • titleBar.activeForeground#f2ebe7
  • titleBar.border#382922
  • titleBar.inactiveBackground#221915
  • titleBar.inactiveForeground#cdb4a3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#cdb4a3italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a47864bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a47864bold
storage.type, storage.modifier#a47864bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7bc4e2
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#a47864
string.regexp#7bc4e2
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#dd487ebold
variable.other.constant, variable.other.enummember#dd487ebold
constant.character.escape#b28c7b
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#f9423aitalic
entity.name.type.parameter#f9423aitalic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#f2ebe7
variable.parameter#f2ebe7italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a47864italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f2ebe7
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#a47864bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b28c7b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#cdb4a3
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f9423aitalic
support.type.property-name.css, support.type.vendored.property-name.css#f9423a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#dd487e
keyword.other.unit.css#4e9a2f
support.type.property-name.json#f9423a
markup.heading, markup.heading entity.name, entity.name.section.markdown#a47864bold
markup.bold#dd487ebold
markup.italic#f9423aitalic
markup.inline.raw, markup.raw#7bc4e2
markup.underline.link#e8d4e2
markup.quote#cdb4a3italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050