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#000000
  • activityBar.foreground#80c0ff
  • activityBarBadge.background#4136d9
  • activityBarBadge.foreground#e9f2ff
  • button.background#4136d9
  • button.foreground#e9f2ff
  • button.hoverBackground#7208f4
  • dropdown.background#000000
  • dropdown.border#4136d9
  • dropdown.foreground#80c0ff
  • editor.background#000000
  • editor.foreground#80c0ff
  • editor.inactiveSelectionBackground#4136d920
  • editor.lineHighlightBackground#00081e
  • editor.selectionBackground#4136d940
  • editorBracketMatch.background#2ba5ff33
  • editorBracketMatch.border#2ba5ff
  • editorCursor.foreground#ffdb1a
  • editorGroup.border#00081e
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground#3e7bdc
  • editorIndentGuide.background#00081e
  • editorLineNumber.activeForeground#e9f2ff
  • editorLineNumber.foreground#3e7bdc
  • errorForeground#ff7200
  • focusBorder#4136d9
  • foreground#80c0ff
  • input.background#00081e
  • input.border#4136d9
  • input.foreground#80c0ff
  • panel.background#000000
  • panel.border#00081e
  • scrollbarSlider.background#3e7bdc55
  • scrollbarSlider.hoverBackground#3e7bdc88
  • sideBar.background#000000
  • sideBar.border#00081e
  • sideBar.foreground#80c0ff
  • sideBarTitle.foreground#e9f2ff
  • statusBar.background#00081e
  • statusBar.debuggingBackground#ff7200
  • statusBar.foreground#80c0ff
  • statusBar.noFolderBackground#00081e
  • tab.activeBackground#000000
  • tab.activeForeground#e9f2ff
  • tab.border#00081e
  • tab.inactiveBackground#00081e
  • tab.inactiveForeground#3e7bdc
  • terminal.ansiBlack#3e7bdc
  • terminal.ansiBlue#ec8129
  • terminal.ansiBrightBlack#3e7bdc
  • terminal.ansiBrightBlue#ec8129
  • terminal.ansiBrightCyan#5db6ff
  • terminal.ansiBrightGreen#00fdbb
  • terminal.ansiBrightMagenta#fdd600
  • terminal.ansiBrightRed#ff7200
  • terminal.ansiBrightWhite#e9f2ff
  • terminal.ansiBrightYellow#7300ff
  • terminal.ansiCyan#2ba5ff
  • terminal.ansiGreen#38ffc9
  • terminal.ansiMagenta#ffdb1a
  • terminal.ansiRed#ff8c35
  • terminal.ansiWhite#d2dbe8
  • terminal.ansiYellow#7208f4
  • terminal.background#000000
  • terminal.foreground#d2dbe8
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#80c0ff
  • titleBar.inactiveBackground#00081e
  • titleBar.inactiveForeground#3e7bdc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#3e7bdcitalic
keyword, storage.type, storage.modifier#7208f4bold
string#38ffc9
constant.numeric#ff8c35
entity.name.function, support.function#2ba5ff
entity.name.type, support.type, support.class#ec8129
variable, meta.definition.variable#80c0ff
invalid, invalid.illegal#ff7200underline
Nebula Surge by DefinitionGroup - VS Code Theme