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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

PVC - Coding Theme