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#131416
  • activityBar.border#1b1c1f
  • activityBar.foreground#e8e8ef
  • activityBar.inactiveForeground#8f8f9b
  • activityBarBadge.background#34d8ff
  • activityBarBadge.foreground#0b0c0e
  • badge.background#34d8ff
  • badge.foreground#0b0c0e
  • button.background#1b1c1f
  • button.secondaryBackground#1b1c1f
  • button.secondaryHoverBackground#131416
  • dropdown.background#131416
  • dropdown.listBackground#1b1c1f
  • editor.background#0b0c0e
  • editor.foreground#e8e8ef
  • editor.lineHighlightBackground#1b1c1f
  • editor.selectionBackground#1b1c1f
  • editorBracketMatch.background#1b1c1f
  • editorBracketMatch.border#8f8f9b
  • editorCursor.foreground#34d8ff
  • editorError.foreground#ff7b8f
  • editorGroupHeader.tabsBackground#131416
  • editorGutter.background#0b0c0e
  • editorIndentGuide.activeBackground#8f8f9b
  • editorIndentGuide.background#1b1c1f
  • editorInfo.foreground#34d8ff
  • editorLineNumber.activeForeground#e8e8ef
  • editorLineNumber.foreground#8f8f9b
  • editorWarning.foreground#ffcc91
  • errorForeground#ff7b8f
  • focusBorder#34d8ff
  • foreground#e8e8ef
  • input.background#1b1c1f
  • inputOption.activeBorder#34d8ff
  • inputValidation.errorBorder#ff7b8f
  • inputValidation.infoBorder#34d8ff
  • inputValidation.warningBorder#ffcc91
  • list.activeSelectionBackground#1b1c1f
  • list.activeSelectionForeground#e8e8ef
  • list.errorForeground#ff7b8f
  • list.focusBackground#1b1c1f
  • list.highlightForeground#34d8ff
  • list.hoverBackground#1b1c1f
  • list.inactiveSelectionBackground#131416
  • list.warningForeground#ffcc91
  • panel.background#131416
  • panel.border#1b1c1f
  • panelTitle.activeBorder#34d8ff
  • peekView.border#34d8ff
  • peekViewEditor.background#0b0c0e
  • peekViewResult.background#131416
  • peekViewTitle.background#131416
  • progressBar.background#34d8ff
  • scrollbar.shadow#0b0c0e
  • scrollbarSlider.activeBackground#34d8ff
  • scrollbarSlider.background#1b1c1f
  • scrollbarSlider.hoverBackground#8f8f9b
  • selection.background#1b1c1f
  • sideBar.background#131416
  • sideBar.border#1b1c1f
  • sideBar.foreground#b8b8c4
  • sideBarSectionHeader.background#131416
  • sideBarSectionHeader.border#1b1c1f
  • sideBarSectionHeader.foreground#e8e8ef
  • statusBar.background#131416
  • statusBar.debuggingBackground#ffcc91
  • statusBar.debuggingForeground#0b0c0e
  • statusBar.foreground#b8b8c4
  • tab.activeBackground#0b0c0e
  • tab.activeBorder#34d8ff
  • tab.activeModifiedBorder#34d8ff
  • tab.inactiveBackground#1b1c1f
  • tab.inactiveModifiedBorder#ffcc91
  • terminal.ansiBlack#0b0c0e
  • terminal.ansiBlue#34d8ff
  • terminal.ansiBrightBlack#8f8f9b
  • terminal.ansiBrightBlue#34d8ff
  • terminal.ansiBrightCyan#67f1d2
  • terminal.ansiBrightGreen#d3fa83
  • terminal.ansiBrightMagenta#ff7cf3
  • terminal.ansiBrightRed#ff7b8f
  • terminal.ansiBrightWhite#e8e8ef
  • terminal.ansiBrightYellow#ffcc91
  • terminal.ansiCyan#67f1d2
  • terminal.ansiGreen#d3fa83
  • terminal.ansiMagenta#ff7cf3
  • terminal.ansiRed#ff7b8f
  • terminal.ansiWhite#e8e8ef
  • terminal.ansiYellow#ffcc91
  • terminal.foreground#e8e8ef
  • textLink.activeForeground#67f1d2
  • textLink.foreground#34d8ff
  • titleBar.activeBackground#131416
  • titleBar.inactiveBackground#131416
  • widget.shadow#0b0c0e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8f8f9bitalic
keyword, storage.type, storage.modifier#bea5ff
keyword.operator#e8e8ef
entity.name.function, support.function#67f1d2
entity.name.tag#ffb2e4
entity.other.attribute-name#34d8ff
string#d3fa83
constant.numeric#ffcc91
constant.language.boolean#d3fa83
constant#ffcc91
entity.name.type, support.type#bea5ff
entity.name.function.constructor#bea5ff
variable, support.variable#9afad2
variable.special#bea5ff
support.type.property-name, meta.object-literal.key#9afad2
punctuation#e8e8ef
Xenon by Henrique - VS Code Theme