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#000
  • activityBar.border#000
  • activityBar.foreground#fff
  • activityBarBadge.background#C839C5
  • activityBarBadge.foreground#fff
  • badge.background#000
  • badge.foreground#686868
  • button.background#000
  • button.foreground#fff
  • button.hoverBackground#686868
  • debugExceptionWidget.background#000
  • debugExceptionWidget.border#686868
  • debugToolBar.background#000
  • descriptionForeground#fff
  • diffEditor.insertedTextBackground#1DC121
  • diffEditor.insertedTextBorder#1DC121
  • diffEditor.removedTextBackground#C51E14
  • diffEditor.removedTextBorder#C51E14
  • dropdown.background#000
  • dropdown.border#686868
  • dropdown.foreground#fff
  • editor.background#000
  • editor.findMatchBackground#C7C7C7
  • editor.findMatchHighlightBackground#686868
  • editor.findRangeHighlightBackground#686868
  • editor.foreground#fff
  • editor.hoverHighlightBackground#000
  • editor.inactiveSelectionBackground#686868
  • editor.lineHighlightBackground#000
  • editor.lineHighlightBorder#686868
  • editor.rangeHighlightBackground#000
  • editor.selectionBackground#C839C5
  • editor.wordHighlightBackground#686868
  • editor.wordHighlightStrongBackground#C839C5
  • editorBracketMatch.background#000
  • editorBracketMatch.border#686868
  • editorCodeLens.foreground#C7C7C7
  • editorCursor.foreground#C839C5
  • editorError.border#C51E14
  • editorError.foreground#C51E14
  • editorGroup.border#686868
  • editorGroup.dropBackground#000
  • editorGroup.emptyBackground#000
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#686868
  • editorGutter.addedBackground#1DC121
  • editorGutter.background#000
  • editorGutter.deletedBackground#C51E14
  • editorGutter.modifiedBackground#68FDFE
  • editorHoverWidget.background#000
  • editorHoverWidget.border#686868
  • editorIndentGuide.background#686868
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#C51E14
  • editorMarkerNavigation.background#000
  • editorMarkerNavigationError.background#C51E14
  • editorMarkerNavigationWarning.background#C7C329
  • editorOverviewRuler.border#686868
  • editorOverviewRuler.commonContentForeground#000
  • editorOverviewRuler.currentContentForeground#C839C5
  • editorOverviewRuler.incomingContentForeground#fff
  • editorRuler.foreground#000
  • editorSuggestWidget.background#000
  • editorSuggestWidget.border#686868
  • editorSuggestWidget.foreground#fff
  • editorSuggestWidget.highlightForeground#68FDFE
  • editorSuggestWidget.selectedBackground#686868
  • editorWarning.border#C7C329
  • editorWarning.foreground#000
  • editorWhitespace.foreground#1DC121
  • editorWidget.background#000
  • editorWidget.border#C839C5
  • errorForeground#C51E14
  • extensionButton.prominentBackground#1DC121
  • extensionButton.prominentForeground#000
  • extensionButton.prominentHoverBackground#686868
  • focusBorder#686868
  • foreground#fff
  • gitDecoration.conflictingResourceForeground#C51E14
  • gitDecoration.deletedResourceForeground#FD6F6B
  • gitDecoration.ignoredResourceForeground#686868
  • gitDecoration.modifiedResourceForeground#FFFA72
  • gitDecoration.untrackedResourceForeground#67F86F
  • input.background#000
  • input.border#686868
  • input.foreground#68FDFE
  • input.placeholderForeground#C7C7C7
  • inputOption.activeBorder#C7C7C7
  • inputValidation.errorBackground#C51E14
  • inputValidation.errorBorder#C51E14
  • inputValidation.infoBackground#6A76FB
  • inputValidation.infoBorder#6A76FB
  • inputValidation.warningBackground#C7C329
  • inputValidation.warningBorder#C7C329
  • list.activeSelectionBackground#000
  • list.activeSelectionForeground#fff
  • list.dropBackground#000
  • list.focusBackground#000
  • list.focusForeground#20C5C6
  • list.highlightForeground#fff
  • list.hoverBackground#000
  • list.hoverForeground#FD7CFC
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#68FDFE
  • menu.background#000
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • notificationCenter.border#686868
  • notificationCenterHeader.background#000
  • notificationCenterHeader.foreground#fff
  • notificationLink.foreground#C839C5
  • notifications.background#000
  • notifications.border#686868
  • notifications.foreground#fff
  • notificationToast.border#686868
  • panel.background#000
  • panel.border#686868
  • panelTitle.activeBorder#C839C5
  • panelTitle.activeForeground#C839C5
  • panelTitle.inactiveForeground#686868
  • peekView.border#686868
  • peekViewEditor.background#193549
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#122738
  • peekViewResult.background#15232d
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#0d3a58
  • peekViewResult.selectionBackground#0d3a58
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#15232d
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#FFFA72
  • pickerGroup.border#686868
  • pickerGroup.foreground#fff
  • progressBar.background#000
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#686868
  • scrollbarSlider.background#000
  • scrollbarSlider.hoverBackground#686868
  • selection.background#686868
  • sideBar.background#000
  • sideBar.border#686868
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.foreground#fff
  • sideBarTitle.foreground#fff
  • statusBar.background#000
  • statusBar.border#686868
  • statusBar.debuggingBackground#C839C5
  • statusBar.debuggingBorder#C839C5
  • statusBar.debuggingForeground#000
  • statusBar.foreground#C7C7C7
  • statusBar.noFolderBackground#000
  • statusBar.noFolderBorder#C839C5
  • statusBar.noFolderForeground#C7C7C7
  • statusBarItem.activeBackground#686868
  • statusBarItem.hoverBackground#C839C5
  • statusBarItem.prominentBackground#000
  • statusBarItem.prominentHoverBackground#000
  • tab.activeBackground#000
  • tab.activeBorder#000
  • tab.activeForeground#fff
  • tab.border#686868
  • tab.inactiveBackground#000
  • tab.inactiveForeground#C7C7C7
  • tab.unfocusedActiveForeground#C7C7C7
  • tab.unfocusedInactiveForeground#C7C7C7
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0A2FC4
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6A76FB
  • terminal.ansiBrightCyan#68FDFE
  • terminal.ansiBrightGreen#67F86F
  • terminal.ansiBrightMagenta#FD7CFC
  • terminal.ansiBrightRed#FD6F6B
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#FFFA72
  • terminal.ansiCyan#20C5C6
  • terminal.ansiGreen#1DC121
  • terminal.ansiMagenta#C839C5
  • terminal.ansiRed#C51E14
  • terminal.ansiWhite#C7C7C7
  • terminal.ansiYellow#C7C329
  • terminal.background#000
  • terminal.foreground#fff
  • terminalCursor.background#C839C5
  • terminalCursor.foreground#C839C5
  • titleBar.activeBackground#000
  • titleBar.activeForeground#C7C7C7
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#686868

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C7C7C7italic
variable, string constant.other.placeholder#fff
constant.other.color#fff
invalid, invalid.illegal#C51E14
keyword, storage.type, storage.modifier#FD7CFC
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#68FDFE
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F08080
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6A76FB
meta.block variable.other#F08080
support.other.variable, string.other.link#F08080
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FD6F6B
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#67F86F
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFFA72
support.type#C7C7C7
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#C7C7C7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FD7CFC
variable.language#FD7CFCitalic
entity.name.method.js#6A76FBitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#6A76FB
entity.other.attribute-name#FD7CFC
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFFA72italic
entity.other.attribute-name.class#FFFA72
source.sass keyword.control#6A76FB
markup.inserted#67F86F
markup.deleted#FD7CFC
markup.changed#FD7CFC
string.regexp#68FDFE
constant.character.escape#68FDFE
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6A76FBitalic
source.js constant.other.object.key.js string.unquoted.label.js#FD6F6Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#FD7CFC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFFA72
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#FD6F6B
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#FD6F6B
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#F08080
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#6A76FB
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#F08080
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#FD7CFC
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#67F86F
text.html.markdown, punctuation.definition.list_item.markdown#fff
text.html.markdown markup.inline.raw.markdown#FD7CFC
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#686868
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#67F86F
markup.italic#F08080italic
markup.bold, markup.bold string#F08080bold
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#F08080bold
markup.underline#FD6F6Bunderline
markup.quote punctuation.definition.blockquote.markdown#C7C7C7
markup.quoteitalic
string.other.link.title.markdown#6A76FB
string.other.link.description.title.markdown#FD7CFC
constant.other.reference.link.markdown#FFFA72
markup.raw.block#FD7CFC
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fff
variable.language.fenced.markdown#C7C7C7
meta.separator#C7C7C7bold
markup.table#fff