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#21222c
  • activityBar.foreground#bd93f9
  • activityBar.inactiveForeground#6272a4
  • activityBarBadge.background#bd93f9
  • activityBarBadge.foreground#282a36
  • badge.background#bd93f9
  • badge.foreground#282a36
  • button.background#bd93f9
  • button.foreground#282a36
  • button.hoverBackground#a47ee5
  • debugToolBar.background#21222c
  • debugToolBar.border#6272a4
  • editor.background#282a36
  • editor.findMatchBackground#ffb86c44
  • editor.findMatchHighlightBackground#ffb86c22
  • editor.foreground#f8f8f2
  • editor.inactiveSelectionBackground#44475a75
  • editor.lineHighlightBackground#44475a
  • editor.selectionBackground#44475a
  • editor.wordHighlightBackground#44475a99
  • editor.wordHighlightStrongBackground#44475acc
  • editorBracketMatch.background#44475a
  • editorBracketMatch.border#f8f8f2
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#ff5555
  • editorGroupHeader.tabsBackground#21222c
  • editorHint.foreground#50fa7b
  • editorIndentGuide.activeBackground#6272a4
  • editorIndentGuide.background#44475a
  • editorInfo.foreground#8be9fd
  • editorLineNumber.activeForeground#f8f8f2
  • editorLineNumber.foreground#6272a4
  • editorSuggestWidget.background#21222c
  • editorSuggestWidget.border#6272a4
  • editorSuggestWidget.selectedBackground#44475a
  • editorWarning.foreground#ffb86c
  • editorWhitespace.foreground#44475a
  • editorWidget.background#21222c
  • editorWidget.border#6272a4
  • extensionButton.prominentBackground#bd93f9
  • extensionButton.prominentForeground#282a36
  • extensionButton.prominentHoverBackground#a47ee5
  • gitDecoration.conflictingResourceForeground#ff79c6
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.ignoredResourceForeground#6272a4
  • gitDecoration.modifiedResourceForeground#f1fa8c
  • gitDecoration.untrackedResourceForeground#50fa7b
  • input.background#282a36
  • input.border#6272a4
  • input.foreground#f8f8f2
  • inputOption.activeBackground#44475a
  • inputOption.activeForeground#f8f8f2
  • list.activeSelectionBackground#44475a
  • list.activeSelectionForeground#f8f8f2
  • list.hoverBackground#44475a
  • list.hoverForeground#f8f8f2
  • list.inactiveSelectionBackground#44475a
  • notificationCenter.border#6272a4
  • notifications.background#21222c
  • notifications.border#6272a4
  • notificationToast.border#6272a4
  • panel.background#21222c
  • panel.border#282a36
  • panelTitle.activeBorder#bd93f9
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#6272a4
  • peekViewEditor.background#21222c
  • peekViewResult.background#21222c
  • peekViewTitle.background#282a36
  • pickerGroup.border#6272a4
  • pickerGroup.foreground#bd93f9
  • scrollbarSlider.activeBackground#6272a4
  • scrollbarSlider.background#44475a80
  • scrollbarSlider.hoverBackground#44475a
  • sideBar.background#21222c
  • sideBar.foreground#f8f8f2
  • sideBarSectionHeader.background#282a36
  • sideBarSectionHeader.foreground#bd93f9
  • sideBarTitle.foreground#f8f8f2
  • statusBar.background#21222c
  • statusBar.debuggingBackground#ff5555
  • statusBar.debuggingForeground#f8f8f2
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#21222c
  • tab.activeBackground#282a36
  • tab.activeForeground#f8f8f2
  • tab.border#191a21
  • tab.inactiveBackground#21222c
  • tab.inactiveForeground#6272a4
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#bd93f9
  • terminal.ansiBrightBlack#6272a4
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#f8f8f2
  • terminal.ansiYellow#f1fa8c
  • terminal.background#282a36
  • terminal.foreground#f8f8f2
  • titleBar.activeBackground#21222c
  • titleBar.activeForeground#f8f8f2
  • titleBar.inactiveBackground#21222c
  • titleBar.inactiveForeground#6272a4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272a4italic
keyword, storage.type, storage.modifier#ff79c6—
keyword.control, keyword.operator#ff79c6—
string, string.quoted#f1fa8c—
constant.numeric, constant.language#bd93f9—
constant.character.escape#ff79c6—
entity.name.function, support.function#50fa7b—
entity.name.class, entity.name.type, support.class#8be9fd—
variable, variable.other#f8f8f2—
variable.parameter#ffb86c—
entity.name.tag#ff79c6—
entity.other.attribute-name#50fa7b—
support.type.property-name#8be9fd—
markup.heading#bd93f9bold
markup.bold#ffb86cbold
markup.italic#f1fa8citalic
markup.underline—underline
markup.inline.raw#f1fa8c—
punctuation.definition.tag#6272a4—
meta.function-call#50fa7b—
invalid#ff5555—