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#272821
  • activityBar.border#2F3028
  • activityBar.dropBackground#272821cc
  • activityBar.foreground#fdfff1
  • activityBarBadge.background#D6C92B
  • activityBarBadge.foreground#000000e6
  • badge.background#D9CC39
  • badge.foreground#000000e6
  • button.background#D6C92B
  • button.foreground#000000e6
  • button.hoverBackground#D9CC39
  • debugExceptionWidget.background#DD0753
  • debugExceptionWidget.border#DD0753
  • diffEditor.insertedTextBackground#88BD1B1a
  • diffEditor.removedTextBackground#DD07531a
  • dropdown.background#23241E
  • dropdown.border#2B2C24
  • dropdown.foreground#fdfff1
  • dropdown.listBackground#2B2C24
  • editor.background#262720
  • editor.findMatchBackground#ead5953c
  • editor.findMatchHighlightBackground#dc741677
  • editor.foreground#979eab
  • 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#e4db72
  • editorError.foreground#F83379
  • editorGroup.background#2F3028
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#272821cc
  • editorGroupHeader.noTabsBackground#23241E
  • editorGroupHeader.tabsBackground#23241E
  • editorGroupHeader.tabsBorder#2F3028
  • editorGutter.addedBackground#a6e12db3
  • editorGutter.background#2A2B23
  • editorGutter.deletedBackground#f82570b3
  • editorGutter.modifiedBackground#e4db73b3
  • editorHoverWidget.background#2B2C24
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#68daee
  • editorMarkerNavigation.background#272821
  • editorMarkerNavigationError.background#f82570b3
  • editorMarkerNavigationWarning.background#e4db73b3
  • editorOverviewRuler.addedForeground#88BD1B
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#29CAE71a
  • editorOverviewRuler.deletedForeground#DD0753
  • editorOverviewRuler.errorForeground#DD0753
  • editorOverviewRuler.findMatchForeground#00003c
  • editorOverviewRuler.incomingContentForeground#D9CC391a
  • editorOverviewRuler.infoForeground#D9CC39
  • editorOverviewRuler.modifiedForeground#D9CC39
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#D9CC39
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#272821
  • editorSuggestWidget.border#272821
  • editorSuggestWidget.foreground#fdfff1
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#E7DF81
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#272821
  • editorWidget.border#1F201A
  • errorForeground#F83379
  • extensionButton.prominentBackground#D6C92B
  • extensionButton.prominentForeground#000000e6
  • extensionButton.prominentHoverBackground#BBAF24
  • focusBorder#ffffff33
  • foreground#aab1bb
  • gitDecoration.conflictingResourceForeground#E7DF81
  • gitDecoration.deletedResourceForeground#F83379
  • gitDecoration.ignoredResourceForeground#fdfff1a6
  • gitDecoration.modifiedResourceForeground#75DDF0
  • gitDecoration.untrackedResourceForeground#ABE339
  • input.background#23241E
  • input.border#2B2C24
  • input.foreground#aab1bb
  • input.placeholderForeground#fdfff1a6
  • inputOption.activeBorder#272821
  • inputValidation.errorBackground#23241E
  • inputValidation.errorBorder#DD0753
  • inputValidation.infoBackground#23241E
  • inputValidation.infoBorder#29CAE7
  • inputValidation.warningBackground#23241E
  • inputValidation.warningBorder#D9CC39
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E4DB73
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#E8EAEE
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#F83379
  • merge.border#DD0753
  • merge.currentContentBackground#29CAE71a
  • merge.currentHeaderBackground#29CAE7
  • merge.incomingContentBackground#D9CC391a
  • merge.incomingHeaderBackground#D9CC39
  • notificationCenter.border#BBAF24
  • notificationCenterHeader.background#BBAF24
  • notificationCenterHeader.foreground#000000e6
  • notificationLink.foreground#68daee
  • notifications.background#1F201A
  • notifications.border#1F201A
  • notifications.foreground#FFFFFF
  • notificationToast.border#272821
  • panel.background#1F201A
  • panel.border#2F3028
  • panelTitle.activeBorder#BBAF24
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#EFFF8E
  • peekView.border#272821
  • peekViewEditor.background#2B2C24
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#2B2C24
  • peekViewResult.background#2B2C24
  • peekViewResult.fileForeground#fdfff0
  • peekViewResult.lineForeground#fdfff0
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#fdfff0
  • peekViewTitle.background#23241E
  • peekViewTitleDescription.foreground#EFFF8E
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#2B2C24
  • pickerGroup.foreground#F6FFBF
  • progressBar.background#E4DB73
  • scrollbar.shadow#131411
  • scrollbarSlider.activeBackground#fdfff14d
  • scrollbarSlider.background#fdfff11a
  • scrollbarSlider.hoverBackground#fdfff133
  • selection.background#66d9eeb3
  • sideBar.background#272821
  • sideBar.border#272821
  • sideBar.foreground#fdfff1
  • sideBarSectionHeader.background#2F3028
  • sideBarSectionHeader.foreground#EFFF8E
  • sideBarTitle.foreground#F6FFBF
  • statusBar.background#1F201A
  • statusBar.border#2F3028
  • statusBar.debuggingBackground#D6C92B
  • statusBar.debuggingForeground#000000e6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#2F3028
  • statusBar.noFolderForeground#EFFF8E
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#BBAF24
  • statusBarItem.prominentHoverBackground#D9CC39
  • tab.activeBackground#2F3028
  • tab.activeBorder#BBAF24
  • tab.activeForeground#FFFFFF
  • tab.border#2F3028
  • tab.hoverBackground#2F3028
  • tab.inactiveBackground#1F201A
  • tab.inactiveForeground#F6FFBF
  • tab.unfocusedActiveForeground#F6FFBF
  • tab.unfocusedHoverBackground#2F3028
  • tab.unfocusedInactiveForeground#EFFF8E
  • 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#1F201A
  • terminal.foreground#fdfff1
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#1F201A
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1F201A
  • titleBar.inactiveBackground#2B2C24
  • titleBar.inactiveForeground#F6FFBF
  • walkThrough.embeddedEditorBackground#272821
  • welcomePage.buttonBackground#2B2C24
  • welcomePage.buttonHoverBackground#2F3028
  • widget.shadow#131411

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#aaac9ed7
comment, punctuation.definition.comment#5c6370italic
variable, variable.other, variable.name#abb2bf
variable.parameter#bbbbbbunderline
variable.language, variable.scss, variable.less, variable.styl#f8256fitalic
punctuation.definition.variable#fdfff0italic
variable.other.constant#68daeebold
constant, constant.other, constant.character#ac80ff
support.type.property-name, constant.numeric, support.constant#fc941d
meta.object-literal.key#e4db72
constant.language#f8256fitalic
constant.character.escape, constant.other.placeholder#e4db72italic
invalid, invalid.illegal#f8256f
keyword, storage.type#ac80ff
storage.modifier#f8256f
storage.modifier, storage.type, keyword.controlitalic
keyword.operator, punctuation.accessor.#eebe4f
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#fdfff0
entity.name#e4db72
entity.name.tag, meta.tag.sgml#f8256f
entity.name.function, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#a5e12d
string, entity.name.label#d68852
entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ffd706
meta.tag.attribute, entity.other.attribute-name#fc941ditalic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#888b7e
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#eebe4f
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#68daee
support.type.property-name.css#fdfff0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#adafa7italic
*url*, *link*, *uri*#68daeeitalic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#68daeeitalic
source.json meta.structure.dictionary.json support.type.property-name.json#e4db72
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fc941d
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#ac80ff
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#fdfff0
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#68daee
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#eebe4f
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#888b7e
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#adafa7
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#f8256f
text.html.markdown, punctuation.definition.list_item.markdown#888b7e
text.html.markdown markup.inline.raw.markdown#ac80ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#adafa7
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#f8256f
beginning.punctuation.definition.list.markdown#fc941d
markup.italic#eebe4fitalic
markup.bold, markup.bold string#eebe4fbold
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#eebe4fbold italic
markup.underline#68daeeunderline
markup.strike#6e7066strike
beginning.punctuation.definition.quote#ffffff13
markup.quote#95978citalic
string.other.link.title.markdown#fc941d
string.other.link.description.title.markdown#a5e12d
constant.other.reference.link.markdown#eebe4f
markup.raw.block#fdfff0
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#fdfff0
meta.separator#fdfff1bold
markup.table#fdfff0
token.info-token#75DDF0
token.warn-token#E7DF81
token.error-token#F83379
token.debug-token#68daee
markup.deleted, punctuation.definition.deleted#F83379
markup.inserted, punctuation.definition.inserted#ABE339
markup.changed, punctuation.definition.changed#75DDF0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.phpitalic
keyword.other.namespace.php, keyword.other.use.phpitalic
meta.tag.sgml.doctype.htmlitalic