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#50fa7b
  • activityBar.background#0d1117
  • activityBar.border#161b22
  • activityBar.foreground#50fa7b
  • activityBar.inactiveForeground#30363d
  • activityBarBadge.background#50fa7b
  • activityBarBadge.foreground#0d1117
  • editor.background#0d1117
  • editor.findMatchBackground#f1fa8c40
  • editor.findMatchHighlightBackground#f1fa8c20
  • editor.foreground#e6f1ff
  • editor.inactiveSelectionBackground#1f6f3a50
  • editor.lineHighlightBackground#161b22
  • editor.lineHighlightBorder#21262d30
  • editor.selectionBackground#1f6f3a
  • editor.selectionHighlightBackground#1f6f3a30
  • editor.wordHighlightBackground#1f6f3a30
  • editor.wordHighlightStrongBackground#1f6f3a50
  • editorBracketHighlight.foreground1#50fa7b
  • editorBracketHighlight.foreground2#f1fa8c
  • editorBracketHighlight.foreground3#8be9fd
  • editorBracketHighlight.foreground4#bd93f9
  • editorBracketHighlight.foreground5#ff79c6
  • editorBracketHighlight.foreground6#ffb86c
  • editorBracketMatch.background#50fa7b30
  • editorBracketMatch.border#50fa7b
  • editorCursor.foreground#50fa7b
  • editorGutter.addedBackground#50fa7b
  • editorGutter.background#0d1117
  • editorGutter.deletedBackground#ff5555
  • editorGutter.modifiedBackground#8be9fd
  • editorIndentGuide.activeBackground#50fa7b40
  • editorIndentGuide.background#21262d40
  • editorLineNumber.activeForeground#50fa7b
  • editorLineNumber.foreground#30363d
  • editorSuggestWidget.background#161b22
  • editorSuggestWidget.border#30363d
  • editorSuggestWidget.highlightForeground#50fa7b
  • editorSuggestWidget.selectedBackground#1f6f3a
  • editorWhitespace.foreground#21262d60
  • editorWidget.background#161b22
  • editorWidget.border#30363d
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.modifiedResourceForeground#8be9fd
  • gitDecoration.untrackedResourceForeground#f1fa8c
  • list.activeSelectionBackground#1f6f3a
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#50fa7b
  • list.hoverBackground#161b22
  • list.inactiveSelectionBackground#161b22
  • sideBar.background#010409
  • sideBar.border#0d1117
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.foreground#50fa7b
  • sideBarTitle.foreground#e6f1ff
  • statusBar.background#0d1117
  • statusBar.border#161b22
  • statusBar.debuggingBackground#ff5555
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c9d1d9
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#50fa7b
  • tab.activeForeground#ffffff
  • tab.border#0d1117
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#c9d1d9
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#8be9fd
  • terminal.ansiBrightBlack#30363d
  • terminal.ansiBrightBlue#a4ffff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#d6acff
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#bd93f9
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#e6f1ff
  • terminal.ansiYellow#f1fa8c
  • terminal.background#0d1117
  • terminal.foreground#e6f1ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6272a4italic
string#50fa7b—
string.template#8be9fd—
constant.numeric#bd93f9—
keyword#ff79c6bold
keyword.operator#ff79c6—
entity.name.function, support.function#50fa7bbold
entity.name.class, entity.name.type#f1fa8cbold
variable#ffb86c—
variable.other.property#8be9fd—