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.border#003300
  • activityBar.foreground#00FF00
  • badge.background#005500
  • badge.foreground#00FF00
  • descriptionForeground#009900
  • dropdown.background#001100
  • dropdown.border#005500
  • dropdown.foreground#00FF00
  • editor.background#000000
  • editor.foreground#00FF00
  • editor.lineHighlightBackground#001a00
  • editor.lineHighlightBorder#003300
  • editor.selectionBackground#005500
  • editor.selectionForeground#00FF00
  • editorBracketMatch.background#004400
  • editorBracketMatch.border#00FF00
  • editorCursor.background#000000
  • editorCursor.foreground#00FF00
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#003300
  • editorIndentGuide.activeBackground1#005500
  • editorIndentGuide.background1#003300
  • editorLineNumber.activeForeground#00FF00
  • editorLineNumber.foreground#007700
  • editorWhitespace.foreground#003300
  • errorForeground#FF5555
  • focusBorder#00AA00
  • foreground#00CC00
  • icon.foreground#00CC00
  • input.background#001100
  • input.border#005500
  • input.foreground#00FF00
  • input.placeholderForeground#005500
  • list.activeSelectionBackground#003300
  • list.activeSelectionForeground#00FF00
  • list.focusBackground#003300
  • list.focusForeground#00FF00
  • list.hoverBackground#001a00
  • list.hoverForeground#00FF00
  • minimap.background#000000
  • panel.background#000000
  • panel.border#003300
  • panelTitle.activeBorder#00FF00
  • panelTitle.activeForeground#00FF00
  • panelTitle.inactiveForeground#007700
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#00aa00aa
  • scrollbarSlider.background#005500aa
  • scrollbarSlider.hoverBackground#007700aa
  • selection.background#005500
  • sideBar.background#000000
  • sideBar.border#003300
  • sideBar.foreground#00CC00
  • sideBarSectionHeader.background#001a00
  • sideBarSectionHeader.foreground#00FF00
  • sideBarTitle.foreground#00FF00
  • statusBar.background#001a00
  • statusBar.border#003300
  • statusBar.foreground#00FF00
  • tab.activeBackground#001a00
  • tab.activeForeground#00FF00
  • tab.border#003300
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#007700
  • terminal.ansiBlack#000000
  • terminal.ansiBrightGreen#33FF33
  • terminal.ansiGreen#00FF00
  • terminal.background#000000
  • terminal.foreground#00FF00
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00FF00
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#007700
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#00FF00
comment, punctuation.definition.comment#007700italic
string, string.quoted#33FF99
keyword, storage.type, storage.modifier#00FFAAbold
entity.name.function, support.function#66FF66
entity.name.type, entity.name.class, support.type, support.class#00FFCCbold
variable, variable.other#00EE00
constant.numeric#99FF99
constant, constant.language#00FFDD
keyword.operator#00DD00
punctuation#00BB00
entity.name.tag#00FF88
entity.other.attribute-name#66FFAA
invalid, invalid.illegal#FF4444underline
AS/400 Green Screen (5250) — Theme & Crosshair Cursor by Jordan Diaz - VS Code Theme