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#1B1B1B
  • activityBar.foreground#E53935
  • activityBarBadge.background#E53935
  • activityBarBadge.foreground#FFFFFF
  • editor.background#121212
  • editor.foreground#D1D1D1
  • editor.hoverHighlightBackground#1A1D27
  • editor.selectionBackground#E5393555
  • editor.selectionHighlightBackground#E5393544
  • editorCursor.foreground#E53935
  • editorIndentGuide.activeBackground#E53935
  • editorIndentGuide.background#424242
  • editorLineNumber.activeForeground#E53935
  • editorLineNumber.foreground#555555
  • editorSuggestWidget.highlightForeground#FFCC00
  • editorSuggestWidget.selectedBackground#2A2D37
  • list.activeSelectionBackground#424242
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#2B2B2B
  • list.inactiveSelectionBackground#333333
  • list.inactiveSelectionForeground#D1D1D1
  • panel.background#212121
  • panel.border#E53935
  • panelTitle.activeBorder#E53935
  • peekView.border#E53935
  • peekViewEditor.background#1B1B1B
  • peekViewEditor.matchHighlightBackground#E5393544
  • peekViewResult.background#212121
  • sideBar.background#1B1B1B
  • sideBar.foreground#D1D1D1
  • sideBarSectionHeader.background#2B2B2B
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#0A0A0A
  • statusBar.debuggingBackground#E53935
  • statusBar.debuggingBorder#ffffff00
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#E53935
  • symbolIcon.constantForeground#E53935
  • terminal.ansiBlack#1B1B1B
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#40C4FF
  • terminal.ansiBrightCyan#18FFFF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#E040FB
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#E53935
  • terminal.ansiWhite#D1D1D1
  • terminal.ansiYellow#FFEB3B
  • terminal.foreground#D1D1D1
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#FFCC00
  • titleBar.activeBackground#2B2B2B
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1B1B1B
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, block.comment, markup.comment#616161
string, constant.other.symbol#69F0AE
variable, identifier#D1D1D1
keyword#E53935
entity.name.function, entity.name.tag, support.function#40C4FF
constant.numeric, constant.language#FFEB3B
entity.name.class, entity.name.type.class#FFEB3B
storage#FF9800
entity.name.section#8BC34Abold
variable.parameter#CDDC39
entity.name.tag.html#E91E63
entity.other.attribute-name#FFC107
markup.heading#CDDC39bold
markup.italicitalic
markup.bold#8BC34Abold
markup.quote#607D8B
markup.inline.raw#E91E63
keyword.control.loop#C792EAitalic
keyword.control.exception#FF5370
storage.modifier.annotation#82AAFF
text.html.markdown#EEFFFF
punctuation.definition.list.begin.markdown#FFCB6B