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#0f0f0f
  • activityBar.border#1c1c1c
  • activityBar.foreground#cccccc
  • activityBarBadge.background#a5a5a5
  • activityBarBadge.foreground#0f0f0f
  • badge.background#a5a5a5
  • badge.foreground#0f0f0f
  • breadcrumb.activeSelectionForeground#cccccc
  • breadcrumb.background#0f0f0f
  • breadcrumb.focusForeground#a5a5a5
  • breadcrumb.foreground#333333
  • breadcrumbPicker.background#0f0f0f
  • button.background#595959
  • button.foreground#f2f2f2
  • button.hoverBackground#7f7f7f
  • debugExceptionWidget.background#1c1c1c
  • debugExceptionWidget.border#a5a5a5
  • diffEditor.insertedTextBackground#a5a5a520
  • diffEditor.removedTextBackground#59595915
  • dropdown.background#0f0f0f
  • dropdown.border#1c1c1c
  • dropdown.foreground#a5a5a5
  • dropdown.listBackground#1c1c1c
  • editor.background#0f0f0f
  • editor.findMatchBackground#a5a5a550
  • editor.findMatchHighlightBackground#a5a5a525
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#a5a5a540
  • editor.lineHighlightBackground#1c1c1c
  • editor.rangeHighlightBackground#a5a5a515
  • editor.selectionBackground#59595966
  • editor.selectionHighlightBackground#59595944
  • editor.wordHighlightBackground#59595944
  • editor.wordHighlightStrongBackground#59595966
  • editorBracketMatch.background#a5a5a520
  • editorBracketMatch.border#a5a5a5
  • editorCodeLens.foreground#333333
  • editorCursor.foreground#a5a5a5
  • editorError.foreground#f14c4c
  • editorGroup.border#1c1c1c
  • editorGroup.dropBackground#1c1c1ccc
  • editorGroupHeader.noTabsBackground#0f0f0f
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorGroupHeader.tabsBorder#1c1c1c
  • editorGutter.addedBackground#a5a5a5b3
  • editorGutter.background#0f0f0f
  • editorGutter.deletedBackground#595959b3
  • editorGutter.modifiedBackground#7f7f7fb3
  • editorHoverWidget.background#1c1c1c
  • editorHoverWidget.border#262626
  • editorLineNumber.activeForeground#595959
  • editorLineNumber.foreground#262626
  • editorLink.activeForeground#a5a5a5
  • editorMarkerNavigation.background#1c1c1c
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#a5a5a5
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#a5a5a520
  • editorOverviewRuler.deletedForeground#595959
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#a5a5a550
  • editorOverviewRuler.incomingContentForeground#59595920
  • editorOverviewRuler.infoForeground#a5a5a5
  • editorOverviewRuler.modifiedForeground#7f7f7f
  • editorOverviewRuler.rangeHighlightForeground#a5a5a544
  • editorOverviewRuler.selectionHighlightForeground#59595944
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#59595944
  • editorOverviewRuler.wordHighlightStrongForeground#59595966
  • editorRuler.foreground#1c1c1c
  • editorSuggestWidget.background#1c1c1c
  • editorSuggestWidget.border#262626
  • editorSuggestWidget.foreground#cccccc
  • editorSuggestWidget.highlightForeground#cccccc
  • editorSuggestWidget.selectedBackground#59595966
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#1c1c1c66
  • editorWidget.background#1c1c1c
  • editorWidget.border#262626
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#595959
  • extensionButton.prominentForeground#f2f2f2
  • extensionButton.prominentHoverBackground#7f7f7f
  • focusBorder#a5a5a580
  • foreground#a5a5a5
  • gitDecoration.conflictingResourceForeground#7f7f7f
  • gitDecoration.deletedResourceForeground#595959
  • gitDecoration.ignoredResourceForeground#333333
  • gitDecoration.modifiedResourceForeground#a5a5a5
  • gitDecoration.untrackedResourceForeground#cccccc
  • input.background#1c1c1c
  • input.border#262626
  • input.foreground#cccccc
  • input.placeholderForeground#333333
  • inputOption.activeBorder#a5a5a5
  • inputValidation.errorBackground#0f0f0f
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#0f0f0f
  • inputValidation.infoBorder#a5a5a5
  • inputValidation.warningBackground#0f0f0f
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#59595966
  • list.activeSelectionForeground#cccccc
  • list.dropBackground#59595944
  • list.focusBackground#59595966
  • list.focusForeground#cccccc
  • list.highlightForeground#a5a5a5
  • list.hoverBackground#1c1c1c
  • list.hoverForeground#cccccc
  • list.inactiveFocusBackground#59595940
  • list.inactiveSelectionBackground#59595944
  • list.inactiveSelectionForeground#cccccc
  • list.invalidItemForeground#7f7f7f
  • merge.border#a5a5a580
  • merge.currentContentBackground#a5a5a520
  • merge.currentHeaderBackground#a5a5a540
  • merge.incomingContentBackground#59595920
  • merge.incomingHeaderBackground#59595940
  • notificationCenter.border#a5a5a5
  • notificationCenterHeader.background#595959
  • notificationCenterHeader.foreground#f2f2f2
  • notificationLink.foreground#a5a5a5
  • notifications.background#1c1c1c
  • notifications.border#262626
  • notifications.foreground#cccccc
  • notificationToast.border#262626
  • panel.background#0f0f0f
  • panel.border#1c1c1c
  • panelTitle.activeBorder#a5a5a5
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#333333
  • peekView.border#262626
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#a5a5a530
  • peekViewEditorGutter.background#1c1c1c
  • peekViewResult.background#0f0f0f
  • peekViewResult.fileForeground#cccccc
  • peekViewResult.lineForeground#a5a5a5
  • peekViewResult.matchHighlightBackground#a5a5a530
  • peekViewResult.selectionBackground#59595966
  • peekViewResult.selectionForeground#cccccc
  • peekViewTitle.background#0f0f0f
  • peekViewTitleDescription.foreground#333333
  • peekViewTitleLabel.foreground#cccccc
  • pickerGroup.border#1c1c1c
  • pickerGroup.foreground#333333
  • progressBar.background#a5a5a5
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#a5a5a566
  • scrollbarSlider.background#a5a5a522
  • scrollbarSlider.hoverBackground#a5a5a544
  • selection.background#59595966
  • sideBar.background#0f0f0f
  • sideBar.border#1c1c1c
  • sideBar.foreground#a5a5a5
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#595959
  • sideBarTitle.foreground#a5a5a5
  • statusBar.background#0f0f0f
  • statusBar.border#1c1c1c
  • statusBar.debuggingBackground#595959
  • statusBar.debuggingForeground#f2f2f2
  • statusBar.foreground#595959
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#595959
  • statusBarItem.activeBackground#59595966
  • statusBarItem.hoverBackground#59595944
  • statusBarItem.prominentBackground#595959
  • statusBarItem.prominentHoverBackground#7f7f7f
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#a5a5a5
  • tab.activeForeground#cccccc
  • tab.border#1c1c1c
  • tab.hoverBackground#1c1c1c
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#333333
  • tab.unfocusedActiveForeground#7f7f7f
  • tab.unfocusedHoverBackground#1c1c1c
  • tab.unfocusedInactiveForeground#333333
  • terminal.ansiBlack#0f0f0f
  • terminal.ansiBlue#6090b0
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#a5a5a5
  • terminal.ansiBrightCyan#cccccc
  • terminal.ansiBrightGreen#cccccc
  • terminal.ansiBrightMagenta#7f7f7f
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#f2f2f2
  • terminal.ansiCyan#4090a0
  • terminal.ansiGreen#6aaa6a
  • terminal.ansiMagenta#9070b8
  • terminal.ansiRed#f14c4c
  • terminal.ansiWhite#a5a5a5
  • terminal.ansiYellow#c8a040
  • terminal.background#0f0f0f
  • terminal.foreground#cccccc
  • terminal.selectionBackground#59595966
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#cccccc
  • titleBar.border#1c1c1c
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#333333
  • walkThrough.embeddedEditorBackground#0f0f0f
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#333333italic
keyword, storage.type, storage.modifier#c084fcitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#7f7f7f
keyword.control.import, keyword.control.export, keyword.control.from#c084fc
string, string.quoted, string.template#86efac
punctuation.definition.string.begin, punctuation.definition.string.end#4ade80
constant.character.escape, constant.other.placeholder#a3e635italic
entity.name.function, meta.function-call, variable.function, support.function#67e8f9
entity.name.label#67e8f9
entity.name.type.class, entity.name.type, support.class, support.type#fbbf24italic
meta.type.annotation, meta.type.parameters#fbbf24italic
entity.name.type.module, meta.import variable.other#fbbf24
variable, variable.name, variable.other#cccccc
variable.parameter#e2e8f0
variable.language#c084fcitalic
variable.other.property, variable.other.object.property, support.variable.property#fb923c
constant.numeric#f472b6
constant.language#c084fc
constant, constant.other, constant.character#f472b6
entity.name.tag, meta.tag.sgml#67e8f9
entity.name.tag support.class.component#fbbf24
meta.tag.attribute, entity.other.attribute-name#fb923citalic
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#7f7f7f
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#333333
punctuation.accessor#7f7f7f
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#fbbf24
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#fb923c
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#67e8f9
meta.property-value.css, support.constant.property-value.css#86efac
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#f472b6italic
meta.object-literal.key#fb923c
source.json meta.structure.dictionary.json support.type.property-name.json#67e8f9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fb923c
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#fbbf24
*url*, *link*, *uri*#67e8f9underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c084fcitalic
markup.heading, entity.name.section#67e8f9bold
markup.italic#e2e8f0italic
markup.bold#ccccccbold
markup.underline#86efacunderline
markup.strike#333333strikethrough
markup.quote#7f7f7fitalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#f472b6
markup.deleted, punctuation.definition.deleted#595959
markup.inserted, punctuation.definition.inserted#86efac
markup.changed, punctuation.definition.changed#fb923c
entity.other.inherited-class#fbbf24
invalid, invalid.illegal#f14c4c
token.info-token#a5a5a5
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#595959