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#233142
  • activityBar.foreground#87CEEB
  • activityBar.inactiveForeground#6B8299
  • activityBarBadge.background#4B97D2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4B97D2
  • badge.foreground#FFFFFF
  • button.background#4B97D2
  • button.foreground#FFFFFF
  • button.hoverBackground#5BA7E2
  • dropdown.background#4B97D2
  • dropdown.border#3D4D60
  • dropdown.foreground#D8D8D8
  • editor.background#1C2A3D
  • editor.foreground#E9E9E9
  • editor.lineHighlightBackground#2C3B4E
  • editor.selectionBackground#4D5D7055
  • editor.wordHighlightBackground#1E4D8AAA
  • editorCursor.foreground#87CEEB
  • editorGroup.border#4B97D2
  • editorGroup.dropBackground#6B8299
  • editorGroupHeader.tabsBackground#2C3B4E
  • focusBorder#4B97D2
  • input.background#2C3B4E
  • input.border#3D4D60
  • input.foreground#D8D8D8
  • list.activeSelectionBackground#1E4D8A
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#3D4D60
  • list.hoverForeground#D8D8D8
  • list.inactiveSelectionBackground#2C3B4E
  • list.inactiveSelectionForeground#D8D8D8
  • menu.background#2C3B4E
  • menu.border#3D4D60
  • menu.foreground#D8D8D8
  • menu.selectionBackground#1E4D8A
  • menu.selectionForeground#FFFFFF
  • notifications.background#2C3B4E
  • peekView.border#4B97D2
  • peekViewEditor.background#1C2A3D
  • peekViewResult.background#2C3B4E
  • pickerGroup.border#3D4D60
  • pickerGroup.foreground#FFFFFF
  • scrollbar.shadow#233142
  • scrollbarSlider.activeBackground#6B8299
  • scrollbarSlider.background#4D5D70
  • scrollbarSlider.hoverBackground#6B8299
  • sideBar.background#233142
  • sideBar.border#4B97D2
  • sideBar.foreground#D8D8D8
  • sideBarSectionHeader.background#2C3B4E
  • sideBarSectionHeader.foreground#D8D8D8
  • sideBarTitle.foreground#87CEEB
  • statusBar.background#2C3B4E
  • statusBar.border#233142
  • statusBar.debuggingBackground#3D4D60
  • statusBar.foreground#D8D8D8
  • statusBar.noFolderBackground#2C3B4E
  • statusBarItem.activeBackground#2C3B4E
  • statusBarItem.hoverBackground#4D5D70
  • statusBarItem.prominentBackground#3D4D60
  • statusBarItem.prominentForeground#D8D8D8
  • tab.activeBackground#1E4D8A
  • tab.activeForeground#FFFFFF
  • tab.border#4B97D2
  • tab.hoverBackground#2C3B4E
  • tab.inactiveBackground#233142
  • tab.inactiveForeground#6B8299
  • tab.lastPinnedBorder#87CEEB
  • tab.unfocusedActiveForeground#6B8299
  • tab.unfocusedHoverForeground#6B8299
  • tab.unfocusedInactiveForeground#556677
  • terminal.ansiBlack#2C3B4E
  • terminal.ansiBlue#87CEEB
  • terminal.ansiBrightBlack#6B8299
  • terminal.ansiBrightBlue#B0E8FF
  • terminal.ansiBrightCyan#B0FFFF
  • terminal.ansiBrightGreen#B0FFB0
  • terminal.ansiBrightMagenta#FFB0E8
  • terminal.ansiBrightRed#FFB0B0
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE8B0
  • terminal.ansiCyan#98E0E8
  • terminal.ansiGreen#9BE0AE
  • terminal.ansiMagenta#E0B0FF
  • terminal.ansiRed#FF9B9B
  • terminal.ansiWhite#E9E9E9
  • terminal.ansiYellow#FFE0A0
  • terminal.background#1C2A3D
  • terminal.foreground#D8D8D8
  • terminal.selectionBackground#1E4D8A
  • terminal.selectionForeground#FFFFFF
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#87CEEB
  • titleBar.activeBackground#2C3B4E
  • titleBar.activeForeground#D8D8D8
  • titleBar.border#4B97D2
  • titleBar.inactiveBackground#233142
  • titleBar.inactiveForeground#6B8299
  • walkThrough.embeddedEditorBackground#1C2A3D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#87CEEB—
storage.type#4B97D2—
constant.numeric#E0B0FF—
entity.name.class#98E0E8—
entity.name.function#FFE0A0—
variable, variable.parameter, variable.other#D8D8D8—
keyword.operator, storage.modifier#87CEEB—
comment#6B8299italic
string#9BE0AE—
string.quoted.double.json#FFE0A0—
punctuation#FFB280—
invalid, invalid.illegal#FF9B9B—
entity.name.tag#87CEEB—
meta.tag.attributes#D8D8D8—
entity.name.section.markdown#FFE0A0—
heading.markdown#87CEEB—
markup.bold.markdown, markup.bold#9BE0AEbold
markup.italic.markdown, markup.italic#9BE0AEitalic
variable.language#98E0E8—
meta.property-value#FFE0A0—
entity.other.attribute-name.pseudo-class#FFB0E8—
meta.function-call.generic#FFE0A0bold
entity.other.inherited-class#B0FFB0—
constant.language#FF9B9B—
support.function#FFE0A0—
support.type#FFB280—
support.type.property-name#6B8299—
support.type.property-name.json#9BE0AE—