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#1c1c1c
  • activityBar.foreground#abb2bf
  • activityBarBadge.background#61afef
  • activityBarBadge.foreground#1c1c1c
  • editor.background#1c1c1c
  • editor.findMatchBackground#61afef00
  • editor.findMatchHighlightBackground#61afef33
  • editor.foreground#abb2bf
  • editor.hoverHighlightBackground#3e445100
  • editor.inactiveSelectionBackground#3e44517e
  • editor.lineHighlightBackground#2c323c
  • editor.selectionBackground#3E4451
  • editor.selectionHighlightBackground#3e445100
  • editorBracketMatch.background#3E4451
  • editorBracketMatch.border#61afef
  • editorCursor.foreground#abb2bf
  • editorGutter.background#1c1c1c
  • editorIndentGuide.activeBackground1#5c6370
  • editorIndentGuide.background1#3E4451
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#5c6370
  • editorRuler.foreground#5c6370
  • panel.background#1c1c1c
  • panel.border#3E4451
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#abb2bf
  • panelTitle.inactiveForeground#5c6370
  • sideBar.background#1c1c1c
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#98c379
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#abb2bf
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#abb2bf
  • statusBarItem.hoverBackground#3E4451
  • statusBarItem.prominentBackground#3E4451
  • statusBarItem.prominentHoverBackground#3E4451
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#5c6370
  • terminal.ansiBrightBlue#8fc6f4
  • terminal.ansiBrightCyan#7bc6d0
  • terminal.ansiBrightGreen#b3d39c
  • terminal.ansiBrightMagenta#d7a1e7
  • terminal.ansiBrightRed#e9969d
  • terminal.ansiBrightWhite#c8cdd5
  • terminal.ansiBrightYellow#edd4a6
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#1c1c1c
  • terminal.foreground#abb2bf
  • terminalCursor.foreground#abb2bf
  • titleBar.activeBackground#1c1c1c
  • titleBar.activeForeground#abb2bf
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#5c6370

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#767676
string, constant.other.symbol, constant.other.key#87af87
variable#87afaf
constant.numeric#d7875f
keyword#af87af
keyword.control#af87af
storage#af87af
storage.type#87afd7
entity.name.function#87afaf
variable.parameter#87afaf
entity.name.type#87afd7
entity.name.tag#5f8787
meta.tag#87afaf
punctuation.definition.tag#5f8787
punctuation.separator#abb2bf
punctuation.terminator#abb2bf
support.function#87afaf
support.type#87afd7
support.class#87afd7
support.constant#d7875f
support.variable#d7875f
Habamax by Carl Weis - VS Code Theme