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.controlitalic
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.phpitalic
keyword.other.namespace.php, keyword.other.use.phpitalic
meta.tag.sgml.doctype.htmlitalic