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.activeBackground#ffaa001a
  • activityBar.activeBorder#ffaa00ff
  • activityBar.activeFocusBorder#ffaa00ff
  • activityBar.background#ffffffff
  • activityBar.dropBorder#ffaa00ff
  • activityBar.foreground#242728ff
  • activityBar.inactiveForeground#3d4041ff
  • activityBarBadge.background#ffaa00ff
  • activityBarBadge.foreground#242728ff
  • badge.background#ffaa00ff
  • badge.foreground#242728ff
  • button.background#ffaa00ff
  • button.foreground#242728ff
  • button.hoverBackground#b37700ff
  • checkbox.background#f2f2f2ff
  • diffEditor.insertedTextBackground#77993333
  • diffEditor.removedTextBackground#ac393933
  • dropdown.background#f2f2f2ff
  • dropdown.border#e5e5e5ff
  • editor.background#ffffffff
  • editor.findMatchBackground#ffaa001a
  • editor.findMatchHighlightBackground#ffaa004d
  • editor.findRangeHighlightBackground#ffaa000d
  • editor.foldBackground#7733ff54
  • editor.foreground#242728ff
  • editor.lineHighlightBackground#f2f2f2ff
  • editor.rangeHighlightBackground#ffaa0033
  • editor.selectionBackground#d9d9d9ff
  • editor.wordHighlightBackground#fafafaff
  • editorBracketMatch.background#ffffffff
  • editorBracketMatch.border#ffffffff
  • editorCursor.background#242728ff
  • editorCursor.foreground#ffaa00ff
  • editorError.foreground#e60000ff
  • editorGroup.border#e6e6e6ff
  • editorGroup.dropBackground#ffaa0033
  • editorGroupHeader.noTabsBackground#f2f2f2ff
  • editorGroupHeader.tabsBackground#f2f2f2ff
  • editorGutter.addedBackground#7aa329ff
  • editorGutter.deletedBackground#da0b0bff
  • editorGutter.modifiedBackground#3399ccff
  • editorIndentGuide.activeBackground#ffaa00ff
  • editorIndentGuide.background#f2f2f2ff
  • editorInfo.foreground#ff006aff
  • editorLineNumber.activeForeground#575a5bff
  • editorLineNumber.foreground#bdc0c1ff
  • editorLink.activeForeground#ffaa00ff
  • editorMarkerNavigation.background#ffffffff
  • editorMarkerNavigationError.background#e60000ff
  • editorMarkerNavigationInfo.background#ff006aff
  • editorMarkerNavigationWarning.background#e67300ff
  • editorOverviewRuler.addedForeground#779933ff
  • editorOverviewRuler.border#e6e6e6ff
  • editorOverviewRuler.bracketMatchForeground#ffaa00ff
  • editorOverviewRuler.deletedForeground#ac3939ff
  • editorOverviewRuler.errorForeground#e60000ff
  • editorOverviewRuler.infoForeground#ff006aff
  • editorOverviewRuler.modifiedForeground#4095bfff
  • editorOverviewRuler.selectionHighlightForeground#ffaa00ff
  • editorOverviewRuler.warningForeground#e67300ff
  • editorPane.background#f2f2f2ff
  • editorRuler.foreground#f2f2f2ff
  • editorSuggestWidget.highlightForeground#ffaa00ff
  • editorWarning.foreground#e67300ff
  • editorWhitespace.foreground#e6e6e6ff
  • editorWidget.background#fafafaff
  • editorWidget.border#f5f5f5ff
  • editorWidget.resizeBorder#f5f5f5ff
  • errorForeground#e60000ff
  • extensionButton.prominentBackground#ffaa00ff
  • extensionButton.prominentForeground#242728ff
  • extensionButton.prominentHoverBackground#ffc319ff
  • focusBorder#ffaa00ff
  • foreground#242728ff
  • gitDecoration.addedResourceForeground#779933ff
  • gitDecoration.deletedResourceForeground#ac3939ff
  • gitDecoration.modifiedResourceForeground#4095bfff
  • gitDecoration.stageDeletedResourceForeground#ac3939ff
  • gitDecoration.stageModifiedResourceForeground#4095bfff
  • input.background#f2f2f2ff
  • input.border#e5e5e5ff
  • inputValidation.errorBackground#e6000099
  • inputValidation.errorBorder#e60000ff
  • inputValidation.errorForeground#ffffffff
  • inputValidation.infoBackground#ff006a99
  • inputValidation.infoBorder#ff006aff
  • inputValidation.infoForeground#000000ff
  • inputValidation.warningBackground#e6730099
  • inputValidation.warningBorder#e67300ff
  • inputValidation.warningForeground#242728ff
  • list.activeSelectionBackground#ffaa001a
  • list.activeSelectionForeground#242728ff
  • list.errorForeground#e60000ff
  • list.focusBackground#ffaa0033
  • list.focusForeground#242728ff
  • list.highlightForeground#ffaa00ff
  • list.hoverBackground#f2f2f2ff
  • list.hoverForeground#242728ff
  • list.inactiveSelectionBackground#ffaa0026
  • list.inactiveSelectionForeground#242728ff
  • list.warningForeground#e67300ff
  • menu.background#ffffffff
  • menu.foreground#242728ff
  • menu.selectionBackground#ffaa00cc
  • menu.selectionForeground#242728ff
  • menu.separatorBackground#e6e6e6ff
  • minimap.errorHighlight#e6000066
  • minimap.selectionHighlight#ffaa0066
  • minimap.warningHighlight#e6730066
  • minimapGutter.addedBackground#779933ff
  • minimapGutter.deletedBackground#ac3939ff
  • minimapGutter.modifiedBackground#4095bfff
  • notifications.background#ffffffff
  • notificationsErrorIcon.foreground#e60000ff
  • notificationsInfoIcon.foreground#ff006aff
  • notificationsWarningIcon.foreground#e67300ff
  • panel.dropBorder#ffaa00ff
  • panelTitle.activeBorder#ffaa00ff
  • peekViewResult.background#f7f7f7ff
  • peekViewTitle.background#f7f7f7ff
  • pickerGroup.border#ffffffff
  • pickerGroup.foreground#ffaa00ff
  • problemsErrorIcon.foreground#e60000ff
  • problemsInfoIcon.foreground#ff006aff
  • problemsWarningIcon.foreground#e67300ff
  • progressBar.background#ffaa00ff
  • scrollbar.shadow#fcfcfd00
  • scrollbarSlider.activeBackground#e6e6e666
  • scrollbarSlider.background#e6e6e699
  • scrollbarSlider.hoverBackground#e6e6e6cc
  • selection.background#d9d9d9ff
  • settings.modifiedItemIndicator#4095bfff
  • sideBar.background#ffffffff
  • sideBar.border#f2f2f2ff
  • sideBarSectionHeader.background#ffffffff
  • statusBar.background#ffffffff
  • statusBar.debuggingBackground#e67300ff
  • statusBar.debuggingForeground#242728ff
  • statusBar.foreground#242728ff
  • statusBar.noFolderBackground#ffffffff
  • statusBar.noFolderForeground#242728ff
  • statusBarItem.hoverBackground#e6e6e6ff
  • statusBarItem.prominentBackground#ffaa00ff
  • statusBarItem.prominentForeground#242728ff
  • statusBarItem.prominentHoverBackground#ffc319ff
  • statusBarItem.remoteBackground#a1e519ff
  • statusBarItem.remoteForeground#242728ff
  • tab.activeBackground#ffffffff
  • tab.activeBorder#ffaa00ff
  • tab.activeModifiedBorder#4095bfff
  • tab.border#e6e6e6ff
  • tab.hoverBackground#e6e6e6ff
  • tab.inactiveBackground#f2f2f2ff
  • tab.lastPinnedBorder#ffaa0066
  • terminal.ansiBlack#020303ff
  • terminal.ansiBlue#7733ffff
  • terminal.ansiBrightBlack#020303ff
  • terminal.ansiBrightBlue#7733ffff
  • terminal.ansiBrightCyan#00aaffff
  • terminal.ansiBrightGreen#88cc00ff
  • terminal.ansiBrightMagenta#ff006aff
  • terminal.ansiBrightRed#e60000ff
  • terminal.ansiBrightWhite#fcfcfdff
  • terminal.ansiBrightYellow#e6bf00ff
  • terminal.ansiCyan#00aaffff
  • terminal.ansiGreen#88cc00ff
  • terminal.ansiMagenta#ff006aff
  • terminal.ansiRed#e60000ff
  • terminal.ansiWhite#fcfcfdff
  • terminal.ansiYellow#e6bf00ff
  • terminal.selectionBackground#ffaa00ff
  • terminalCursor.background#242728ff
  • terminalCursor.foreground#ffaa00ff
  • textLink.activeForeground#cc8800ff
  • textLink.foreground#ffaa00ff
  • textPreformat.foreground#242728ff
  • textSeparator.foreground#e6e6e6ff
  • titleBar.activeBackground#f2f2f2ff
  • titleBar.border#f2f2f2ff
  • titleBar.inactiveBackground#ffffffff
  • widget.shadow#e6e6e6ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#798286ff—
meta.embedded, source.groovy.embedded#242728ff—
string#e6bf00ff—
punctuation.definition.template-expression, punctuation.section.embedded#ff006aff—
meta.template.expression#242728ff—
constant.numeric#7733ffff—
constant.language#7733ffff—
constant.character, constant.other#7733ffff—
variable#242728ff—
keyword#ff006aff—
storage#ff006aff—
storage.type#00aaffff—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#88cc00ff—
entity.other.inherited-class#88cc00ff—
entity.name.function#88cc00ff—
variable.parameter#e67300ff—
entity.name.tag#ff006aff—
entity.other.attribute-name#88cc00ff—
support.function#00aaffff—
support.constant#00aaffff—
support.type, support.class#00aaffff—
invalid#e60000ff—
invalid.deprecated#e60000ff—
meta.structure.dictionary.json string.quoted.double.json#242728ff—
meta.diff, meta.diff.header#798286ff—
markup.deleted#e60000ff—
markup.inserted#88cc00ff—
markup.changed#e6bf00ff—
constant.numeric.line-number.find-in-files - match#7733ffff—
entity.name.filename.find-in-files#e6bf00ff—
markup.quote#ff006aff—
markup.list#e6bf00ff—
markup.bold, markup.italic#00aaffff—
markup.inline.raw#e67300ff—
markup.heading#88cc00ff—
markup.heading.setext#88cc00ff—
markup.quote.markdown#798286ff—
string.other.link.title.markdown,string.other.link.description.markdown#7733ffff—
markup.underline.link.markdown,markup.underline.link.image.markdown#e6bf00ff—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#242728ff—
punctuation.definition.list.begin.markdown#88cc00ff—
token.info-token#00aaffff—
token.warn-token#e67300ff—
token.error-token#e60000ff—
token.debug-token#7733ffff—
variable.language#e67300ff—