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#212121
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#A0A0A0
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#212121
  • badge.background#FFFFFF
  • badge.foreground#1B1B1B
  • button.background#FFFFFF
  • button.foreground#212121
  • button.hoverBackground#A0A0A0
  • dropdown.background#212121
  • dropdown.border#4A4A4A
  • dropdown.foreground#E1E1E1
  • editor.background#1B1B1B
  • editor.foreground#E1E1E1
  • editor.lineHighlightBackground#3A3A3A
  • editor.wordHighlightBackground#572955AA
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#4A4A4A
  • editorGroup.dropBackground#5A5A5A
  • editorGroupHeader.tabsBackground#212121
  • focusBorder#FFFFFF
  • input.background#212121
  • input.border#4A4A4A
  • input.foreground#E1E1E1
  • list.activeSelectionBackground#FFFFFF
  • list.activeSelectionForeground#212121
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#3A3A3A
  • list.hoverForeground#E1E1E1
  • list.inactiveSelectionBackground#3A3A3A
  • list.inactiveSelectionForeground#E1E1E1
  • menu.background#212121
  • menu.border#4A4A4A
  • menu.foreground#E1E1E1
  • menu.selectionBackground#3A3A3A
  • menu.selectionForeground#FFFFFF
  • notifications.background#2C2C2C
  • peekView.border#FFFFFF
  • peekViewEditor.background#1B1B1B
  • peekViewResult.background#3A3A3A
  • pickerGroup.border#4A4A4A
  • pickerGroup.foreground#FFFFFF
  • scrollbar.shadow#212121
  • scrollbarSlider.activeBackground#FFFFFF
  • scrollbarSlider.background#3A3A3A
  • scrollbarSlider.hoverBackground#5A5A5A
  • sideBar.background#212121
  • sideBar.border#4A4A4A
  • sideBar.foreground#E1E1E1
  • sideBarSectionHeader.background#3A3A3A
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#3A3A3A
  • statusBar.border#FFFFFF
  • statusBar.debuggingBackground#FFFFFF
  • statusBar.foreground#E1E1E1
  • statusBar.noFolderBackground#212121
  • statusBarItem.activeBackground#3A3A3A
  • statusBarItem.hoverBackground#5A5A5A
  • statusBarItem.prominentBackground#3A3A3A
  • statusBarItem.prominentForeground#FFFFFF
  • tab.activeBackground#3A3A3A
  • tab.activeForeground#FFFFFF
  • tab.border#4A4A4A
  • tab.hoverBackground#5A5A5A
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#A0A0A0
  • tab.lastPinnedBorder#FFFFFF
  • tab.unfocusedActiveForeground#A0A0A0
  • tab.unfocusedHoverForeground#A0A0A0
  • tab.unfocusedInactiveForeground#7A7A7A
  • terminal.ansiBlack#1B1B1B
  • terminal.ansiBlue#5A5A5A
  • terminal.ansiBrightBlue#FFAA44
  • terminal.ansiCyan#FF9966
  • terminal.ansiGreen#5A5A5A
  • terminal.ansiMagenta#FFFFFF
  • terminal.ansiRed#FFFFFF
  • terminal.ansiWhite#E1E1E1
  • terminal.ansiYellow#A0A0A0
  • terminal.background#1B1B1B
  • terminal.foreground#E1E1E1
  • terminalCursor.foreground#FFFFFF
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#E1E1E1
  • titleBar.border#4A4A4A
  • titleBar.inactiveBackground#212121
  • titleBar.inactiveForeground#A0A0A0
  • walkThrough.embeddedEditorBackground#1B1B1B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#FFFFFFbold
constant.numeric#A8D1FF—
entity.name.class, entity.name.type, entity.name.enum#E3A8FFitalic
entity.name.function#FFF8A8—
variable, variable.parameter, variable.other#B6C3B6—
keyword.operator, storage.modifier#FFFFFFbold
markup#C7C7C7—
entity.name.function.magic#FFF8A8—
storage.type.annotation, storage.type#C7C7C7—
string.quoted.docstring#A0A0A0italic
support.type#C7C7C7—
comment, comment.block.documentation#808080italic
string#7F9E9D—
storage.type.function.arrow#00CED1bold
support.class#FFBF00bold
entity.other.attribute-name#FF6B6Bbold
meta.import#FFBF00bold
keyword.control#FFAA44bold
storage.type.primitive#FFAA44—
entity.name.namespace#FFBF00—
meta.object-literal.key, variable.other.property#FF9F9F—
constant.language, constant.character#FFA8A8—
entity.name.tag#FFD700—
meta.annotation#FFD700italic
punctuation#A64FA8—
entity.name.section.markdown#FFDAA5—
markup.bold.markdown, markup.bold#FF9F9Fbold
markup.italic.markdown, markup.italic#FFC085italic
keyword.other.DML#A64FA8bold
keyword.function#FF9F9Fbold
storage.modifier#FFDAA5bold
keyword.package#A8E3FFbold