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#242830
  • activityBar.border#2B303A
  • activityBar.dropBackground#242830cc
  • activityBar.foreground#d4d4d4
  • activityBarBadge.background#C34B07
  • activityBarBadge.foreground#ffffffe6
  • badge.background#D04F07
  • badge.foreground#ffffffe6
  • button.background#C34B07
  • button.foreground#ffffffe6
  • button.hoverBackground#D04F07
  • debugExceptionWidget.background#EC353A
  • debugExceptionWidget.border#EC353A
  • diffEditor.insertedTextBackground#69B4691a
  • diffEditor.removedTextBackground#EC353A1a
  • dropdown.background#20242B
  • dropdown.border#282C35
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#282C35
  • editor.background#282c35
  • editor.findMatchBackground#f2d98c3c
  • editor.findMatchHighlightBackground#ffffff16
  • editor.foreground#d4d4d4
  • 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#de935e
  • editorError.foreground#F4878A
  • editorGroup.background#2B303A
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#242830cc
  • editorGroupHeader.noTabsBackground#20242B
  • editorGroupHeader.tabsBackground#20242B
  • editorGroupHeader.tabsBorder#2B303A
  • editorGutter.addedBackground#99cc99b3
  • editorGutter.background#2C303A
  • editorGutter.deletedBackground#f2777ab3
  • editorGutter.modifiedBackground#ffcc66b3
  • editorHoverWidget.background#282C35
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#82a3bf
  • editorMarkerNavigation.background#242830
  • editorMarkerNavigationError.background#f2777ab3
  • editorMarkerNavigationWarning.background#ffcc66b3
  • editorOverviewRuler.addedForeground#69B469
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#3D7AB81a
  • editorOverviewRuler.deletedForeground#EC353A
  • editorOverviewRuler.errorForeground#EC353A
  • editorOverviewRuler.findMatchForeground#f2d98c3c
  • editorOverviewRuler.incomingContentForeground#FFB41F1a
  • editorOverviewRuler.infoForeground#FFB41F
  • editorOverviewRuler.modifiedForeground#FFB41F
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#FFB41F
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#242830
  • editorSuggestWidget.border#242830
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#FFD278
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#242830
  • editorWidget.border#1D2026
  • errorForeground#F4878A
  • extensionButton.prominentBackground#C34B07
  • extensionButton.prominentForeground#ffffffe6
  • extensionButton.prominentHoverBackground#A94106
  • focusBorder#ffffff33
  • foreground#d4d4d4
  • gitDecoration.conflictingResourceForeground#FFD278
  • gitDecoration.deletedResourceForeground#F4878A
  • gitDecoration.ignoredResourceForeground#d4d4d4a6
  • gitDecoration.modifiedResourceForeground#71A1D0
  • gitDecoration.untrackedResourceForeground#A5D2A5
  • input.background#20242B
  • input.border#282C35
  • input.foreground#d4d4d4
  • input.placeholderForeground#d4d4d4a6
  • inputOption.activeBorder#242830
  • inputValidation.errorBackground#20242B
  • inputValidation.errorBorder#EC353A
  • inputValidation.infoBackground#20242B
  • inputValidation.infoBorder#3D7AB8
  • inputValidation.warningBackground#20242B
  • inputValidation.warningBorder#FFB41F
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#F76716
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#F4878A
  • merge.border#EC353A
  • merge.currentContentBackground#3D7AB81a
  • merge.currentHeaderBackground#3D7AB8
  • merge.incomingContentBackground#FFB41F1a
  • merge.incomingHeaderBackground#FFB41F
  • notificationCenter.border#A94106
  • notificationCenterHeader.background#A94106
  • notificationCenterHeader.foreground#ffffffe6
  • notificationLink.foreground#82a3bf
  • notifications.background#1D2026
  • notifications.border#1D2026
  • notifications.foreground#FEFEFE
  • notificationToast.border#242830
  • panel.background#1D2026
  • panel.border#2B303A
  • panelTitle.activeBorder#A94106
  • panelTitle.activeForeground#FEFEFE
  • panelTitle.inactiveForeground#AAAAAA
  • peekView.border#242830
  • peekViewEditor.background#282C35
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#282C35
  • peekViewResult.background#282C35
  • peekViewResult.fileForeground#d4d4d4
  • peekViewResult.lineForeground#d4d4d4
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#d4d4d4
  • peekViewTitle.background#20242B
  • peekViewTitleDescription.foreground#AAAAAA
  • peekViewTitleLabel.foreground#E9E9E9
  • pickerGroup.border#282C35
  • pickerGroup.foreground#BFBFBF
  • progressBar.background#F76716
  • scrollbar.shadow#121418
  • scrollbarSlider.activeBackground#d4d4d44d
  • scrollbarSlider.background#d4d4d41a
  • scrollbarSlider.hoverBackground#d4d4d433
  • selection.background#6699ccb3
  • sideBar.background#242830
  • sideBar.border#242830
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#2B303A
  • sideBarSectionHeader.foreground#AAAAAA
  • sideBarTitle.foreground#BFBFBF
  • statusBar.background#1D2026
  • statusBar.border#2B303A
  • statusBar.debuggingBackground#C34B07
  • statusBar.debuggingForeground#ffffffe6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#2B303A
  • statusBar.noFolderForeground#AAAAAA
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#A94106
  • statusBarItem.prominentHoverBackground#D04F07
  • tab.activeBackground#2B303A
  • tab.activeBorder#A94106
  • tab.activeForeground#FEFEFE
  • tab.border#2B303A
  • tab.hoverBackground#2B303A
  • tab.inactiveBackground#1D2026
  • tab.inactiveForeground#BFBFBF
  • tab.unfocusedActiveForeground#BFBFBF
  • tab.unfocusedHoverBackground#2B303A
  • tab.unfocusedInactiveForeground#AAAAAA
  • 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#1D2026
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#1D2026
  • titleBar.activeForeground#FEFEFE
  • titleBar.border#1D2026
  • titleBar.inactiveBackground#282C35
  • titleBar.inactiveForeground#BFBFBF
  • walkThrough.embeddedEditorBackground#242830
  • welcomePage.buttonBackground#282C35
  • welcomePage.buttonHoverBackground#2B303A
  • widget.shadow#121418

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#d4d4d4—
comment, punctuation.definition.comment#959795italic
variable, variable.other, variable.name#c5c9c6—
variable.parameter#c5c9c6—
variable.language, variable.scss, variable.less, variable.styl#cc6666italic
punctuation.definition.variable#c5c9c6italic
variable.other.constant#82a3bfbold
constant, constant.other, constant.character#b295bb—
support.type.property-name, constant.numeric, support.constant#de935e—
meta.object-literal.key#f0c775—
constant.language#cc6666italic
constant.character.escape, constant.other.placeholder#f0c775italic
invalid, invalid.illegal#cc6666—
keyword, storage.type#b295bb—
storage.modifier#cc6666—
storage.modifier, storage.type, keyword.control—italic
keyword.operator, punctuation.accessor.#e9b36d—
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#c5c9c6—
entity.name#f0c775—
entity.name.tag, meta.tag.sgml#cc6666
entity.name.function, entity.name.label, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#82a3bf
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#b4bc67
meta.tag.attribute, entity.other.attribute-name#de935eitalic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#afb1af—
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#e9b36d—
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#82a3bf—
support.type.property-name.css#c5c9c6—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#d6d7d6italic
*url*, *link*, *uri*#82a3bfitalic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82a3bfitalic
source.json meta.structure.dictionary.json support.type.property-name.json#f0c775—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#de935e—
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#b295bb—
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#c5c9c6—
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#82a3bf—
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#e9b36d—
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#afb1af—
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#d6d7d6—
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#cc6666—
text.html.markdown, punctuation.definition.list_item.markdown#afb1af—
text.html.markdown markup.inline.raw.markdown#b295bb—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#d6d7d6—
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#cc6666—
beginning.punctuation.definition.list.markdown#de935e—
markup.italic#e9b36ditalic
markup.bold, markup.bold string#e9b36dbold
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#e9b36dbold italic
markup.underline#82a3bfunderline
markup.strike#959795strike
beginning.punctuation.definition.quote#ffffff13—
markup.quote#bcbdbcitalic
string.other.link.title.markdown#de935e—
string.other.link.description.title.markdown#b4bc67—
constant.other.reference.link.markdown#e9b36d—
markup.raw.block#c5c9c6—
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#c5c9c6—
meta.separator#d4d4d4bold
markup.table#d4d4d4—
token.info-token#71A1D0—
token.warn-token#FFD278—
token.error-token#F4878A—
token.debug-token#82a3bf—
markup.deleted, punctuation.definition.deleted#F4878A—
markup.inserted, punctuation.definition.inserted#A5D2A5—
markup.changed, punctuation.definition.changed#71A1D0—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php—italic
keyword.other.namespace.php, keyword.other.use.php—italic
meta.tag.sgml.doctype.html—italic