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