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#090909
  • activityBar.foreground#D10000
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#D10000
  • activityBarBadge.foreground#E0E0E0
  • badge.background#D10000
  • badge.foreground#E0E0E0
  • button.background#D10000
  • button.foreground#E0E0E0
  • button.hoverBackground#D82828
  • dropdown.background#D10000
  • dropdown.border#2F2F2F
  • dropdown.foreground#C0C0C0
  • editor.background#050505
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1B1B1B
  • editor.selectionBackground#55555555
  • editor.wordHighlightBackground#572955AA
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#D10000
  • editorGroup.dropBackground#666666
  • editorGroupHeader.tabsBackground#1F1F1F
  • focusBorder#D10000
  • input.background#1F1F1F
  • input.border#2F2F2F
  • input.foreground#C0C0C0
  • list.activeSelectionBackground#4D0000
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#2F2F2F
  • list.hoverForeground#C0C0C0
  • list.inactiveSelectionBackground#1F1F1F
  • list.inactiveSelectionForeground#C0C0C0
  • menu.background#1F1F1F
  • menu.border#2F2F2F
  • menu.foreground#C0C0C0
  • menu.selectionBackground#800000
  • menu.selectionForeground#FFFFFF
  • notifications.background#191919
  • peekView.border#D10000
  • peekViewEditor.background#050505
  • peekViewResult.background#1F1F1F
  • pickerGroup.border#2F2F2F
  • pickerGroup.foreground#E0E0E0
  • scrollbar.shadow#090909
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#555555
  • scrollbarSlider.hoverBackground#777777
  • sideBar.background#090909
  • sideBar.border#D10000
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.foreground#C0C0C0
  • sideBarTitle.foreground#FF6464
  • statusBar.background#1F1F1F
  • statusBar.border#090909
  • statusBar.debuggingBackground#3F3F3F
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.activeBackground#1F1F1F
  • statusBarItem.hoverBackground#3F3F3F
  • statusBarItem.prominentBackground#2F2F2F
  • statusBarItem.prominentForeground#C0C0C0
  • tab.activeBackground#4D0000
  • tab.activeForeground#E0E0E0
  • tab.border#D10000
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#090909
  • tab.inactiveForeground#666666
  • tab.lastPinnedBorder#FF6464
  • tab.unfocusedActiveForeground#666666
  • tab.unfocusedHoverForeground#666666
  • tab.unfocusedInactiveForeground#555555
  • terminal.ansiBlack#1B1B1B
  • terminal.ansiBlue#3A5FCD
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#B5655A
  • terminal.ansiBrightCyan#FF6464
  • terminal.ansiBrightGreen#98FB98
  • terminal.ansiBrightMagenta#DB3C3C
  • terminal.ansiBrightRed#FF6B68
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#FF9966
  • terminal.ansiGreen#77C677
  • terminal.ansiMagenta#C98A85
  • terminal.ansiRed#FF6464
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FFC74A
  • terminal.background#050505
  • terminal.foreground#C0C0C0
  • terminal.selectionBackground#8B0000
  • terminal.selectionForeground#E0E0E0
  • terminalCursor.background#E0E0E0
  • terminalCursor.foreground#D10000
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#D10000
  • titleBar.inactiveBackground#090909
  • titleBar.inactiveForeground#666666
  • walkThrough.embeddedEditorBackground#050505

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#FF6464—
storage.type#D10000—
constant.numeric#B062FF—
entity.name.class#DB3C3C—
entity.name.function#FFC74A—
variable, variable.parameter, variable.other#A8A8A8—
keyword.operator, storage.modifier#FF6464—
comment#8A8A8Aitalic
string#68E868—
string.quoted.double.json#FFC74A—
punctuation#FF8C00—
invalid, invalid.illegal#FF6B68—
entity.name.tag#FF6464—
meta.tag.attributes#A8A8A8—
entity.name.section.markdown#FFC74A—
heading.markdown#FF6464—
markup.bold.markdown, markup.bold#68E868bold
markup.italic.markdown, markup.italic#68E868italic
variable.language#E16464—
meta.property-value#FFD700—
entity.other.attribute-name.pseudo-class#FF69B4—
meta.function-call.generic#FFD700bold
entity.other.inherited-class#AEFFAE—
constant.language#BE5046—
support.function#FFC74A—
support.type#D84720—
support.type.property-name#5F5F5F—
support.type.property-name.json#68E868—