Skip to main content
Coding Theme

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#1e1628
  • activityBar.foreground#d9c8ff
  • activityBarBadge.background#7e3bb6
  • activityBarBadge.foreground#ffffff
  • badge.background#7e3bb6
  • badge.foreground#ffffff
  • button.background#7e3bb6
  • button.foreground#ffffff
  • button.hoverBackground#8a45c4
  • editor.background#1b1323
  • editor.foreground#e8ddff
  • editor.lineHighlightBackground#2a1b36
  • editor.selectionBackground#6f2b8f66
  • editorCursor.foreground#e8ddff
  • editorError.foreground#a33a5b
  • editorGutter.addedBackground#2a7a4b
  • editorGutter.deletedBackground#a33a5b
  • editorGutter.modifiedBackground#306e9e
  • editorHoverWidget.background#221832
  • editorHoverWidget.border#3a244a
  • editorIndentGuide.activeBackground1#7e3bb6
  • editorIndentGuide.background1#3a244a
  • editorLineNumber.activeForeground#c2a7ff
  • editorLineNumber.foreground#6a5980
  • editorSuggestWidget.background#221832
  • editorSuggestWidget.border#3a244a
  • editorSuggestWidget.foreground#e8ddff
  • editorSuggestWidget.highlightForeground#d69aff
  • editorSuggestWidget.selectedBackground#2f2142
  • editorWhitespace.foreground#5a3a6e
  • editorWidget.background#221832
  • focusBorder#7e3bb6
  • panel.background#1a1222
  • panel.border#3a244a
  • scrollbarSlider.activeBackground#7e3bb666
  • scrollbarSlider.background#7e3bb622
  • scrollbarSlider.hoverBackground#7e3bb644
  • selection.background#6f2b8f66
  • sideBar.background#191124
  • sideBar.foreground#cdb7ff
  • sideBarSectionHeader.background#211730
  • sideBarSectionHeader.foreground#e8ddff
  • statusBar.background#1a1222
  • statusBar.debuggingBackground#7e3bb6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#cdb7ff
  • terminal.ansiBlack#2b1d37
  • terminal.ansiBlue#6b86e3
  • terminal.ansiBrightBlack#5a3a6e
  • terminal.ansiBrightBlue#8ea2ff
  • terminal.ansiBrightCyan#8ee8e8
  • terminal.ansiBrightGreen#6fe3a8
  • terminal.ansiBrightMagenta#d69aff
  • terminal.ansiBrightRed#ff7a9e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd48a
  • terminal.ansiCyan#5fc6c6
  • terminal.ansiGreen#41b37a
  • terminal.ansiMagenta#b36ae3
  • terminal.ansiRed#d45a7a
  • terminal.ansiWhite#e8ddff
  • terminal.ansiYellow#e0b36e
  • terminal.background#1b1323
  • terminal.foreground#e8ddff
  • textLink.foreground#d69aff
  • titleBar.activeBackground#1a1222
  • titleBar.activeForeground#e8ddff
  • titleBar.inactiveBackground#1a1222cc
  • titleBar.inactiveForeground#cdb7ff99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a678c
string, constant.character.escape#ffd48a
constant, variable.other.constant#d69aff
keyword, storage.type, storage.modifier#b36ae3
entity.name.type, support.type#8ea2ff
variable, entity.name.variable#e8ddff
entity.name.function, support.function#d49fff
punctuation, meta.brace, meta.delimiter#cdb7ff
invalid, invalid.illegal#ffffffunderline
Tyrian Nocturne by Mohammad Abdullah Wasi - VS Code Theme