Skip to main content
Coding Theme

Color themes

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