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.activeBorder#FF00FF
  • activityBar.background#0D1117
  • activityBar.border#0D1117
  • activityBar.foreground#FF00FF
  • activityBar.inactiveForeground#4D4D4D
  • activityBarBadge.background#FF00FF
  • activityBarBadge.foreground#0D1117
  • button.background#FF00FF
  • button.foreground#FFFFFF
  • button.hoverBackground#FF33FF
  • editor.background#0D1117
  • editor.findMatchBackground#FFD70033
  • editor.findMatchHighlightBackground#FFD70019
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#161B22
  • editor.selectionBackground#264F78
  • editorCursor.foreground#FF00FF
  • editorGroupHeader.tabsBackground#0D1117
  • editorGroupHeader.tabsBorder#161B22
  • editorIndentGuide.activeBackground#FF00FF40
  • editorIndentGuide.background#1E2329
  • editorLineNumber.activeForeground#FF00FF
  • editorLineNumber.foreground#4D4D4D
  • input.background#161B22
  • input.border#30363D
  • input.foreground#E6E6E6
  • input.placeholderForeground#4D4D4D
  • sideBar.background#0D1117
  • sideBar.border#161B22
  • sideBar.foreground#B3B3B3
  • sideBarSectionHeader.background#161B22
  • sideBarSectionHeader.border#161B22
  • sideBarSectionHeader.foreground#E6E6E6
  • sideBarTitle.foreground#FF00FF
  • statusBar.background#161B22
  • statusBar.border#161B22
  • statusBar.foreground#8B8B8B
  • statusBarItem.remoteBackground#FF00FF
  • statusBarItem.remoteForeground#0D1117
  • tab.activeBackground#161B22
  • tab.activeBorder#FF00FF
  • tab.activeForeground#E6E6E6
  • tab.border#161B22
  • tab.inactiveBackground#0D1117
  • tab.inactiveForeground#8B8B8B
  • terminal.ansiBlack#0D1117
  • terminal.ansiBlue#00FFFF
  • terminal.ansiBrightBlue#33FFFF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#33FF33
  • terminal.ansiBrightMagenta#FF33FF
  • terminal.ansiBrightRed#FF3333
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFDD33
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#E6E6E6
  • terminal.ansiYellow#FFD700
  • terminal.background#0D1117
  • terminal.foreground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4D4D4Ditalic
string, string.template#00FF00
constant.numeric#FF00FF
keyword, storage.type, storage.modifier#FF00FFbold
entity.name.function, support.function#FFD700
entity.name.type, entity.name.class, entity.name.namespace#00FFFFbold
variable, variable.other#FF69B4
variable.parameter#FF69B4italic
variable.other.property, variable.other.object.property#E6E6E6
keyword.operator#FF00FFbold
punctuation, meta.brace#E6E6E6
markup.heading#FF00FFbold
markup.inline.raw#00FFFF
markup.bold#FFD700bold
markup.italic#FF69B4italic