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#000000
  • activityBar.border#6A0DAD
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#BB86FC
  • activityBarBadge.foreground#000000
  • button.background#6A0DAD
  • button.foreground#FFFFFF
  • button.hoverBackground#7D22C3
  • button.secondaryBackground#4B0082
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#5A0094
  • dropdown.background#0a0a0a
  • dropdown.border#6A0DAD
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#3F1C5A
  • editor.lineHighlightBackground#1C003A
  • editor.selectionBackground#5A189A55
  • editorCursor.foreground#BB86FC
  • editorGroup.border#6A0DAD
  • editorLineNumber.foreground#666666
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.selectedBackground#6A0DAD
  • input.background#000000
  • input.border#6A0DAD
  • input.foreground#FFFFFF
  • input.placeholderForeground#a679c3
  • inputOption.activeBorder#7D22C3
  • inputValidation.errorBorder#ff4d4f
  • inputValidation.infoBorder#6A0DAD
  • inputValidation.warningBorder#ffcc00
  • notification.background#0a0a0a
  • notification.buttonBackground#6A0DAD
  • notification.buttonHoverBackground#7D22C3
  • notification.foreground#ffffff
  • panel.background#000000
  • panel.border#6A0DAD
  • peekView.border#6A0DAD
  • peekViewEditor.background#1a1a1a
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#1a1a1a
  • quickInput.background#0a0a0a
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#6A0DAD
  • sideBar.background#000000
  • sideBar.border#6A0DAD
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#BB86FC
  • statusBar.background#000000
  • statusBar.border#6A0DAD
  • statusBar.debuggingBackground#6A0DAD
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1A1A1A
  • tab.activeBackground#000000
  • tab.activeForeground#FFFFFF
  • tab.border#6A0DAD
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#B4F34D
  • terminal.ansiBrightMagenta#BB86FC
  • terminal.ansiBrightRed#FF5F5F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FDE047
  • terminal.ansiCyan#22D3EE
  • terminal.ansiGreen#A3E635
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#FF5F5F
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FACC15
  • terminal.background#000000
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#5A189A55
  • terminalCursor.background#BB86FC
  • terminalCursor.foreground#BB86FC
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#6A0DAD
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.documentation#AAAAAAitalic
keyword, variable, string, constant, entity.name, support, storage, meta.function-call, entity.name.function, entity.other.attribute-name#FFFFFF