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#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

Shiki preview

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

Loading...