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#121212
  • activityBar.foreground#9a00cc
  • activityBarBadge.background#9a00cc
  • activityBarBadge.foreground#e0e0e0
  • button.background#9a00cc
  • button.foreground#e0e0e0
  • button.hoverBackground#b580cc
  • dropdown.background#1a1a1a
  • dropdown.border#9a00cc50
  • dropdown.foreground#e0e0e0
  • editor.background#121212
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#1e1e1e
  • editor.selectionBackground#9a00cc30
  • editor.selectionHighlightBackground#9a00cc15
  • editorCursor.foreground#9a00cc
  • editorGroupHeader.tabsBackground#121212
  • editorGutter.background#121212
  • editorIndentGuide.activeBackground1#d0d0d030
  • editorIndentGuide.background1#d0d0d010
  • editorLineNumber.activeForeground#9a00cc
  • editorLineNumber.foreground#606060
  • editorWhitespace.foreground#d0d0d020
  • input.background#1a1a1a
  • input.border#9a00cc50
  • input.foreground#e0e0e0
  • inputOption.activeBorder#9a00cc
  • list.activeSelectionBackground#9a00cc30
  • list.activeSelectionForeground#e0e0e0
  • list.highlightForeground#9a00cc
  • list.hoverBackground#d0d0d010
  • list.hoverForeground#e0e0e0
  • list.inactiveSelectionBackground#9a00cc20
  • list.inactiveSelectionForeground#e0e0e0
  • panel.background#121212
  • panel.border#1a1a1a
  • panelTitle.activeForeground#9a00cc
  • panelTitle.inactiveForeground#d0d0d080
  • sideBar.background#121212
  • sideBar.foreground#d0d0d080
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#9a00cc
  • statusBar.background#121212
  • statusBar.debuggingBackground#9a00cc
  • statusBar.debuggingForeground#e0e0e0
  • statusBar.foreground#d0d0d080
  • statusBar.noFolderBackground#121212
  • tab.activeBackground#1a1a1a
  • tab.activeBorderTop#9a00cc
  • tab.activeForeground#9a00cc
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#d0d0d080
  • tab.unfocusedActiveBorderTop#9a00cc80
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#9a00cc
  • terminal.ansiBrightBlue#b580cc
  • terminal.ansiBrightCyan#80cccc
  • terminal.ansiBrightGreen#80cc80
  • terminal.ansiBrightMagenta#cc80cc
  • terminal.ansiBrightRed#cc8080
  • terminal.ansiBrightYellow#cccc80
  • terminal.ansiCyan#00cccc
  • terminal.ansiGreen#00cc00
  • terminal.ansiMagenta#cc00cc
  • terminal.ansiRed#cc0000
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#cccc00
  • terminal.background#121212
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#d0d0d080
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#d0d0d040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d6d6d
string, constant.other.symbol#b58ec3
constant.numeric#cc00cc
keyword, storage.type, storage.modifier#9a00cc
entity.name.function, meta.function-call#00cccc
entity.name.type, entity.name.class, entity.name.namespace#b8a56a
variable, entity.name.variable#e0e0e0
Viora by Aditya Mali - VS Code Theme