Skip to main content
CodingTheme

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#2A1E3D
  • badge.background#8A2BE2
  • badge.foreground#FFFFFF
  • button.background#8A2BE2
  • button.foreground#FFFFFF
  • button.hoverBackground#9B30FF
  • dropdown.background#3D2A4B55
  • editor.background#1E1E2F
  • editor.findMatchBackground#FFB300
  • editor.findMatchHighlightBackground#FFB30044
  • editor.foreground#F0E6FA
  • editor.lineHighlightBackground#3D2A4B33
  • editor.selectionBackground#6A057277
  • editor.selectionHighlightBackground#6A057244
  • editorCursor.foreground#FF61DC
  • editorGroupHeader.tabsBackground#2A1E3D
  • editorLineNumber.activeForeground#FF61DC
  • editorLineNumber.foreground#6A057288
  • editorSuggestWidget.background#2A1E3D
  • editorSuggestWidget.border#6A057244
  • editorSuggestWidget.selectedBackground#6A057244
  • editorWidget.background#3D2A4B55
  • editorWidget.border#6A057244
  • input.background#3D2A4B55
  • list.activeSelectionBackground#6A057277
  • list.hoverBackground#3D2A4B55
  • panel.background#2A1E3D
  • panelTitle.activeBorder#FF61DC
  • panelTitle.activeForeground#F0E6FA
  • panelTitle.inactiveForeground#F0E6FA88
  • peekView.border#8A2BE2
  • peekViewEditor.background#1E1E2FBB
  • peekViewResult.background#1E1E2FBB
  • peekViewTitle.background#3D2A4B55
  • sideBar.background#2A1E3D
  • statusBar.background#6A0572
  • statusBar.debuggingBackground#6A0572
  • statusBar.noFolderBackground#6A0572
  • statusBarItem.remoteBackground#6A0572
  • terminal.ansiBlack#1E1E2F
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlack#7F8C8D
  • terminal.ansiBrightBlue#2196F3
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#4CAF50
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#FF6F61
  • terminal.ansiWhite#F0E6FA
  • terminal.ansiYellow#FFD54F
  • terminal.background#1E1E2F
  • terminal.foreground#F0E6FA
  • titleBar.activeBackground#6A0572
  • titleBar.inactiveBackground#4B2C6A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B0BEC5italic
keyword#FF61DCbold
variable#64B5F6bold
constant#FFD54Fbold
entity.name.function#8A2BE2bold
string#FF9E80bold
entity.name.type#4DB6ACbold
support.type#64B5F6bold
support.function#81D4FAbold
punctuation#F0E6FAbold
storage.type#FF61DCbold
entity.other.attribute-name.class.css#8A2BE2bold
support.type.property-name.css#64B5F6bold
support.constant.property-value.css#FFD54Fbold
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#FF61DCbold
punctuation.separator.key-value.css#FFD54Fbold
keyword.other.unit.css#81D4FAbold
support.function.misc.css#81D4FAbold
constant.numeric.css#FFD54Fbold
keyword.operator.css#F0E6FAbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...