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#ff7cf3
keyword.operator#e8e8ef
entity.name.function, support.function#34d8ff
entity.name.tag#ff7cf3
entity.other.attribute-name#34d8ff
string#d3fa83
constant.numeric#ffcc91
constant.language.boolean#ffcc91
constant#ffcc91
entity.name.type, support.type#67f1d2
entity.name.function.constructor#67f1d2
variable, support.variable#e8e8ef
variable.special#e8e8ef
support.type.property-name, meta.object-literal.key#e8e8ef
punctuation#e8e8ef