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#4b171e
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ffb703
  • activityBarBadge.foreground#ffffff
  • badge.background#003366
  • badge.foreground#ffffff
  • editor.background#2e001570
  • editor.foreground#f4f4f9
  • editor.selectionBackground#00336670
  • editor.selectionHighlightBackground#ffba0850
  • editor.wordHighlightBackground#00336640
  • editorBracketMatch.background#ff080870
  • editorBracketMatch.border#ff0808
  • editorCursor.foreground#ff0808
  • editorError.foreground#e63946
  • editorIndentGuide.activeBackground#ff0808
  • editorIndentGuide.background#4b1e24
  • editorInfo.foreground#06d6a0
  • editorLineNumber.activeForeground#ff0808
  • editorLineNumber.foreground#ff6b08
  • editorOverviewRuler.currentContentForeground#ffba08
  • editorOverviewRuler.incomingContentForeground#003366
  • editorOverviewRuler.modifiedForeground#ffba08
  • editorWarning.foreground#ffba08
  • list.activeSelectionBackground#00336660
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#ffba08
  • list.hoverBackground#00336630
  • list.inactiveSelectionBackground#4b1e2440
  • minimap.errorHighlight#e63946
  • minimap.warningHighlight#ffba08
  • minimapGutter.addedBackground#06d6a0
  • minimapGutter.deletedBackground#e63946
  • minimapGutter.modifiedBackground#ffba08
  • panel.background#4b1e24
  • panel.border#ffba08
  • scrollbarSlider.activeBackground#4b1e2480
  • scrollbarSlider.background#4b1e2450
  • scrollbarSlider.hoverBackground#4b1e2470
  • sideBar.background#44131a
  • sideBar.foreground#f4f4f9
  • sideBarSectionHeader.background#4b1e24
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#4b1e24
  • statusBar.debuggingBackground#ffba08
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ff006e
  • tab.activeBackground#530026
  • tab.activeForeground#ff2600
  • tab.inactiveBackground#af004f70
  • tab.inactiveForeground#d3d3d3
  • terminal.ansiBlack#2c2c2e
  • terminal.ansiBlue#3a86ff
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#8bc34a
  • terminal.ansiMagenta#003366
  • terminal.ansiRed#e63946
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffba08
  • terminal.background#63011a
  • terminal.foreground#f4f4f9
  • terminal.selectionBackground#00336660
  • terminalCursor.background#ffba08
  • terminalCursor.foreground#ffba08
  • titleBar.activeBackground#9c0c4d70
  • titleBar.activeForeground#f4f4f9
  • titleBar.inactiveBackground#9c0a4c70
  • titleBar.inactiveForeground#b3b3b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ac0990italic bold
variable, string constant.other.placeholder#b90404
keyword, storage.type, storage.modifier#ff006e
keyword.control, constant.other.color, punctuation#ffba08
string, constant.other.symbol#f86464
constant.numeric#e63946
entity.name.function#ffb703
entity.name.class#ffba08
constant.language#003366
invalid, invalid.illegal#e63946
markup.heading#ffba08
string.regexp#00bcd4
Jaga Theme by Sayam - VS Code Theme