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#000000
  • activityBar.dropBorder#09e7fb
  • activityBar.foreground#e0e7ff
  • activityBarBadge.background#09e7fb
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • badge.foreground#e0e7ff
  • breadcrumb.activeSelectionForeground#09e7fb
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#e0e7ff
  • breadcrumb.foreground#525975
  • breadcrumbPicker.background#000000
  • button.background#717cb450
  • button.foreground#e0e7ff
  • checkbox.background#00000000
  • checkbox.foreground#e0e7ff
  • debugToolBar.background#000000
  • descriptionForeground#e0e7ff
  • diffEditor.insertedTextBackground#09e7fb15
  • diffEditor.removedTextBackground#de216320
  • dropdown.background#000000
  • dropdown.border#00000000
  • dropdown.foreground#e0e7ff
  • editor.background#000000
  • editor.foreground#e0e7ff
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#717cb450
  • editorCursor.foreground#09e7fb
  • editorError.foreground#de2163
  • editorGroup.border#00000000
  • editorGroup.dropBackground#00000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#09e7fb60
  • editorGutter.deletedBackground#de216360
  • editorGutter.modifiedBackground#00ffd860
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#e0e7ff10
  • editorIndentGuide.activeBackground#3b3f51
  • editorIndentGuide.background#3b3f51bb
  • editorInfo.foreground#00ffd8
  • editorLineNumber.foreground#3b3f51bb
  • editorLink.activeForeground#09e7fb
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#de2163
  • editorOverviewRuler.infoForeground#00ffd8
  • editorOverviewRuler.warningForeground#dec32c
  • editorRuler.foreground#3b3f51bb
  • editorSuggestWidget.selectedBackground#717cb450
  • editorWarning.foreground#dec32c
  • editorWidget.background#000000
  • editorWidget.border#000000
  • editorWidget.resizeBorder#09e7fb
  • errorForeground#dec32c
  • extensionButton.prominentBackground#09e7fb90
  • extensionButton.prominentHoverBackground#09e7fb
  • focusBorder#000000
  • gitDecoration.conflictingResourceForeground#00ffd890
  • gitDecoration.deletedResourceForeground#de216390
  • gitDecoration.ignoredResourceForeground#52597590
  • gitDecoration.modifiedResourceForeground#00ffd890
  • gitDecoration.untrackedResourceForeground#09e7fb90
  • input.background#0e131a
  • input.border#00000000
  • input.foreground#e0e7ff
  • input.placeholderForeground#e0e7ff60
  • inputOption.activeBackground#00000000
  • inputOption.activeForeground#09e7fb
  • inputValidation.errorForeground#de216350
  • inputValidation.infoForeground#00ffd850
  • inputValidation.warningForeground#dec32c50
  • list.activeSelectionBackground#00000000
  • list.activeSelectionForeground#e0e7ff
  • list.errorForeground#de2163
  • list.filterMatchBackground#717cb450
  • list.focusBackground#00000000
  • list.focusForeground#09e7fb
  • list.highlightForeground#09e7fb
  • list.hoverBackground#00000000
  • list.hoverForeground#e0e7ff
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#e0e7ff
  • list.warningForeground#dec32c
  • listFilterWidget.background#00000000
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • menu.background#000000
  • menu.foreground#e0e7ff
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000000
  • menu.selectionForeground#09e7fb
  • menu.separatorBackground#e0e7ff
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#09e7fb
  • notificationLink.foreground#09e7fb
  • notifications.background#000000
  • notifications.foreground#e0e7ff
  • panel.background#000000
  • panel.border#00000000
  • panel.dropBackground#00000000
  • panelTitle.activeBorder#09e7fb
  • panelTitle.activeForeground#e0e7ff
  • panelTitle.inactiveForeground#525975
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#717cb450
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#717cb450
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#e0e7ff60
  • peekViewTitleLabel.foreground#e0e7ff
  • pickerGroup.foreground#09e7fb
  • progressBar.background#09e7fb
  • quickInputList.focusBackground#717cb450
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#e0e7ff30
  • scrollbarSlider.background#e0e7ff20
  • scrollbarSlider.hoverBackground#e0e7ff25
  • settings.checkboxBackground#000000
  • settings.checkboxForeground#e0e7ff
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#e0e7ff
  • settings.headerForeground#09e7fb
  • settings.modifiedItemIndicator#09e7fb
  • settings.numberInputBackground#000000
  • settings.numberInputForeground#e0e7ff
  • settings.textInputBackground#000000
  • settings.textInputForeground#e0e7ff
  • sideBar.background#000000
  • sideBar.border#00000000
  • sideBar.foreground#525975
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#525975
  • sideBarTitle.foreground#e0e7ff
  • statusBar.background#000000
  • statusBar.debuggingBackground#09e7fb
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#4b526d
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#717cb450
  • tab.activeBorder#09e7fb
  • tab.activeForeground#e0e7ff
  • tab.border#00000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#525975
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#09e7fb
  • terminal.ansiBrightBlack#e0e7ffbb
  • terminal.ansiBrightBlue#09e7fb
  • terminal.ansiBrightCyan#09e7fb
  • terminal.ansiBrightGreen#00ffd8
  • terminal.ansiBrightMagenta#de2163
  • terminal.ansiBrightRed#de2163
  • terminal.ansiBrightWhite#e0e7ff
  • terminal.ansiBrightYellow#dec32c
  • terminal.ansiCyan#09e7fb
  • terminal.ansiGreen#00ffd8
  • terminal.ansiMagenta#de2163
  • terminal.ansiRed#de2163
  • terminal.ansiWhite#e0e7ff
  • terminal.ansiYellow#dec32c
  • terminal.foreground#e0e7ff
  • textLink.foreground#09e7fb
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e0e7ff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#525975

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name, support#09e7fb
keyword, storage#00ffd8
entity.name.variable, string#e0e7ff
constant#f78c6c
comment, punctuation.definition.comment#e0e7ffbbitalic
punctuation#e0e7ff
*url*, *uri*, *link*underline
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json#09e7fb
source.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json#00ffd8
markup.heading, punctuation.definition.list.begin.markdown#00ffd8
markup.boldbold
markup.italic, markup.quoteitalic
markup.underlineunderline