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#2B3342
  • activityBar.border#343D4F
  • activityBar.dropBackground#2B3342cc
  • activityBar.foreground#d9d7ce
  • activityBarBadge.background#FFB520
  • activityBarBadge.foreground#000000e6
  • badge.background#FFBC33
  • badge.foreground#000000e6
  • button.background#FFB520
  • button.foreground#000000e6
  • button.hoverBackground#FFBC33
  • debugExceptionWidget.background#E9313B
  • debugExceptionWidget.border#E9313B
  • diffEditor.insertedTextBackground#9ADA421a
  • diffEditor.removedTextBackground#E9313B1a
  • dropdown.background#272E3B
  • dropdown.border#2F3849
  • dropdown.foreground#d9d7ce
  • dropdown.listBackground#2F3849
  • editor.background#202631
  • editor.findMatchBackground#ffdf803c
  • editor.findMatchHighlightBackground#ffffff16
  • editor.foreground#d9d7ce
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff0d
  • editor.rangeHighlightBackground#ffffff16
  • editor.selectionBackground#ffffff1a
  • editor.selectionHighlightBackground#ffffff16
  • editor.wordHighlightBackground#ffffff16
  • editor.wordHighlightStrongBackground#ffffff1a
  • editorBracketMatch.background#ffffff16
  • editorBracketMatch.border#ffffff16
  • editorCodeLens.foreground#ffffff16
  • editorCursor.foreground#ffd480
  • editorError.foreground#F28187
  • editorGroup.background#343D4F
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#2B3342cc
  • editorGroupHeader.noTabsBackground#272E3B
  • editorGroupHeader.tabsBackground#272E3B
  • editorGroupHeader.tabsBorder#343D4F
  • editorGutter.addedBackground#bae67eb3
  • editorGutter.background#232A36
  • editorGutter.deletedBackground#f07178b3
  • editorGutter.modifiedBackground#ffd580b3
  • editorHoverWidget.background#2F3849
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#5ccfe6
  • editorMarkerNavigation.background#2B3342
  • editorMarkerNavigationError.background#f07178b3
  • editorMarkerNavigationWarning.background#ffd580b3
  • editorOverviewRuler.addedForeground#9ADA42
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#24BFDD1a
  • editorOverviewRuler.deletedForeground#E9313B
  • editorOverviewRuler.errorForeground#E9313B
  • editorOverviewRuler.findMatchForeground#ffdf803c
  • editorOverviewRuler.incomingContentForeground#FFBC331a
  • editorOverviewRuler.infoForeground#FFBC33
  • editorOverviewRuler.modifiedForeground#FFBC33
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#FFBC33
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#2B3342
  • editorSuggestWidget.border#2B3342
  • editorSuggestWidget.foreground#d9d7ce
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#FFDB93
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#2B3342
  • editorWidget.border#222935
  • errorForeground#F28187
  • extensionButton.prominentBackground#FFB520
  • extensionButton.prominentForeground#000000e6
  • extensionButton.prominentHoverBackground#F9A700
  • focusBorder#ffffff33
  • foreground#d9d7ce
  • gitDecoration.conflictingResourceForeground#FFDB93
  • gitDecoration.deletedResourceForeground#F28187
  • gitDecoration.ignoredResourceForeground#d9d7cea6
  • gitDecoration.modifiedResourceForeground#6AD3E8
  • gitDecoration.untrackedResourceForeground#C2E98D
  • input.background#272E3B
  • input.border#2F3849
  • input.foreground#d9d7ce
  • input.placeholderForeground#d9d7cea6
  • inputOption.activeBorder#2B3342
  • inputValidation.errorBackground#272E3B
  • inputValidation.errorBorder#E9313B
  • inputValidation.infoBackground#272E3B
  • inputValidation.infoBorder#24BFDD
  • inputValidation.warningBackground#272E3B
  • inputValidation.warningBorder#FFBC33
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFD580
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#F28187
  • merge.border#E9313B
  • merge.currentContentBackground#24BFDD1a
  • merge.currentHeaderBackground#24BFDD
  • merge.incomingContentBackground#FFBC331a
  • merge.incomingHeaderBackground#FFBC33
  • notificationCenter.border#F9A700
  • notificationCenterHeader.background#F9A700
  • notificationCenterHeader.foreground#000000e6
  • notificationLink.foreground#5ccfe6
  • notifications.background#222935
  • notifications.border#222935
  • notifications.foreground#FEFEFE
  • notificationToast.border#2B3342
  • panel.background#222935
  • panel.border#343D4F
  • panelTitle.activeBorder#F9A700
  • panelTitle.activeForeground#FEFEFE
  • panelTitle.inactiveForeground#B4B09E
  • peekView.border#2B3342
  • peekViewEditor.background#2F3849
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#2F3849
  • peekViewResult.background#2F3849
  • peekViewResult.fileForeground#d9d7ce
  • peekViewResult.lineForeground#d9d7ce
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#d9d7ce
  • peekViewTitle.background#272E3B
  • peekViewTitleDescription.foreground#B4B09E
  • peekViewTitleLabel.foreground#EBEAE6
  • pickerGroup.border#2F3849
  • pickerGroup.foreground#C7C4B6
  • progressBar.background#FFD580
  • scrollbar.shadow#161921
  • scrollbarSlider.activeBackground#d9d7ce4d
  • scrollbarSlider.background#d9d7ce1a
  • scrollbarSlider.hoverBackground#d9d7ce33
  • selection.background#5ccfe6b3
  • sideBar.background#2B3342
  • sideBar.border#2B3342
  • sideBar.foreground#d9d7ce
  • sideBarSectionHeader.background#343D4F
  • sideBarSectionHeader.foreground#B4B09E
  • sideBarTitle.foreground#C7C4B6
  • statusBar.background#222935
  • statusBar.border#343D4F
  • statusBar.debuggingBackground#FFB520
  • statusBar.debuggingForeground#000000e6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#343D4F
  • statusBar.noFolderForeground#B4B09E
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#F9A700
  • statusBarItem.prominentHoverBackground#FFBC33
  • tab.activeBackground#343D4F
  • tab.activeBorder#F9A700
  • tab.activeForeground#FEFEFE
  • tab.border#343D4F
  • tab.hoverBackground#343D4F
  • tab.inactiveBackground#222935
  • tab.inactiveForeground#C7C4B6
  • tab.unfocusedActiveForeground#C7C4B6
  • tab.unfocusedHoverBackground#343D4F
  • tab.unfocusedInactiveForeground#B4B09E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#222935
  • terminal.foreground#d9d7ce
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#222935
  • titleBar.activeForeground#FEFEFE
  • titleBar.border#222935
  • titleBar.inactiveBackground#2F3849
  • titleBar.inactiveForeground#C7C4B6
  • walkThrough.embeddedEditorBackground#2B3342
  • welcomePage.buttonBackground#2F3849
  • welcomePage.buttonHoverBackground#343D4F
  • widget.shadow#161921

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d9d7ce
comment, punctuation.definition.comment#5d6874italic
variable, variable.other, variable.name#d9d7ce
variable.parameter#d9d7ce
variable.language, variable.scss, variable.less, variable.styl#f07076italic
punctuation.definition.variable#d9d7ceitalic
variable.other.constant#5ccfe6bold
constant, constant.other, constant.character#d3bdff
support.type.property-name, constant.numeric, support.constant#ffae57
meta.object-literal.key#ffd480
constant.language#f07076italic
constant.character.escape, constant.other.placeholder#ffd480italic
invalid, invalid.illegal#f07076
keyword, storage.type#d3bdff
storage.modifier#f07076
storage.modifier, storage.type, keyword.controlitalic
keyword.operator, punctuation.accessor.#ffc670
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#d9d7ce
entity.name#ffd480
entity.name.tag, meta.tag.sgml#f07076
entity.name.function, entity.name.label, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#5ccfe6
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#bbe77e
meta.tag.attribute, entity.other.attribute-name#ffae57italic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#748290
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class#ffc670
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id#5ccfe6
support.type.property-name.css#d9d7ce
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#9fa8b2italic
*url*, *link*, *uri*#5ccfe6italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5ccfe6italic
source.json meta.structure.dictionary.json support.type.property-name.json#ffd480
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffae57
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d3bdff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d9d7ce
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ccfe6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffc670
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#748290
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9fa8b2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07076
text.html.markdown, punctuation.definition.list_item.markdown#748290
text.html.markdown markup.inline.raw.markdown#d3bdff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9fa8b2
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f07076
beginning.punctuation.definition.list.markdown#ffae57
markup.italic#ffc670italic
markup.bold, markup.bold string#ffc670bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ffc670bold italic
markup.underline#5ccfe6underline
markup.strike#5d6874strike
beginning.punctuation.definition.quote#ffffff13
markup.quote#828e9bitalic
string.other.link.title.markdown#ffae57
string.other.link.description.title.markdown#bbe77e
constant.other.reference.link.markdown#ffc670
markup.raw.block#d9d7ce
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#d9d7ce
meta.separator#d9d7cebold
markup.table#d9d7ce
token.info-token#6AD3E8
token.warn-token#FFDB93
token.error-token#F28187
token.debug-token#5ccfe6
markup.deleted, punctuation.definition.deleted#F28187
markup.inserted, punctuation.definition.inserted#C2E98D
markup.changed, punctuation.definition.changed#6AD3E8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.phpitalic
keyword.other.namespace.php, keyword.other.use.phpitalic
meta.tag.sgml.doctype.htmlitalic