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.activeBorder#8ab4f8
  • activityBar.background#0b0f14
  • activityBar.foreground#c5cde0
  • activityBar.inactiveForeground#4e5666
  • activityBarBadge.background#8ab4f8
  • activityBarBadge.foreground#0b0f14
  • badge.background#8ab4f8
  • badge.foreground#0b0f14
  • breadcrumb.background#0b0f14
  • breadcrumb.focusForeground#cfd6e4
  • breadcrumb.foreground#7a8496
  • dropdown.background#111824
  • dropdown.border#2a3242
  • dropdown.foreground#cfd6e4
  • editor.background#0b0f14
  • editor.findMatchBorder#8ab4f8
  • editor.foreground#cfd6e4
  • editor.inactiveSelectionBackground#2a3b5a33
  • editor.selectionBackground#2a3b5a66
  • editor.selectionHighlightBackground#2a3b5a33
  • editorCursor.foreground#8ab4f8
  • editorHoverWidget.background#111824
  • editorHoverWidget.border#2a3242
  • editorIndentGuide.activeBackground1#8ab4f899
  • editorIndentGuide.background1#202634
  • editorLineNumber.activeForeground#8ab4f8
  • editorLineNumber.foreground#586070
  • editorOverviewRuler.background#0b0f14
  • editorOverviewRuler.border#0b0f14
  • editorSuggestWidget.background#111824
  • editorSuggestWidget.foreground#cfd6e4
  • editorSuggestWidget.highlightForeground#8ab4f8
  • editorSuggestWidget.selectedBackground#182236
  • editorWhitespace.foreground#2a2f3a
  • editorWidget.background#111824
  • editorWidget.border#2a3242
  • editorWidget.foreground#cfd6e4
  • focusBorder#8ab4f899
  • gitDecoration.conflictingResourceForeground#c792ea
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#6b7382
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.submoduleResourceForeground#8ab4f8
  • gitDecoration.untrackedResourceForeground#98c379
  • input.background#111824
  • input.border#2a3242
  • input.foreground#cfd6e4
  • input.placeholderForeground#6b7382
  • inputOption.activeBackground#2a3b5a33
  • inputOption.activeBorder#8ab4f8
  • list.activeSelectionBackground#182236
  • list.activeSelectionForeground#cfd6e4
  • list.filterMatchBackground#2a3b5a33
  • list.highlightForeground#8ab4f8
  • list.hoverBackground#141b27
  • list.hoverForeground#cfd6e4
  • list.inactiveSelectionBackground#141b27
  • list.inactiveSelectionForeground#aeb7c7
  • menu.background#111824
  • menu.foreground#cfd6e4
  • menu.selectionBackground#182236
  • menu.separatorBackground#2a3242
  • minimap.background#0b0f14
  • minimapSlider.activeBackground#2a3b5a66
  • minimapSlider.background#2a3b5a22
  • minimapSlider.hoverBackground#2a3b5a44
  • notificationCenterHeader.background#0b0f14
  • notificationCenterHeader.foreground#c5cde0
  • notifications.background#0f141d
  • notifications.border#2a3242
  • notifications.foreground#cfd6e4
  • notificationsErrorIcon.foreground#f7768e
  • notificationsInfoIcon.foreground#8ab4f8
  • notificationsWarningIcon.foreground#e5c07b
  • panel.background#0b0f14
  • panel.border#171b24
  • panelTitle.activeForeground#8ab4f8
  • panelTitle.inactiveForeground#7a8496
  • peekView.border#2a3242
  • peekViewEditor.background#111824
  • peekViewResult.background#0f141d
  • peekViewTitle.background#0b0f14
  • peekViewTitleLabel.foreground#8ab4f8
  • scrollbarSlider.activeBackground#2a3b5a66
  • scrollbarSlider.background#2a3b5a22
  • scrollbarSlider.hoverBackground#2a3b5a44
  • selection.background#2a3b5a55
  • sideBar.background#0b0f14
  • sideBar.border#171b24
  • sideBar.foreground#aeb7c7
  • sideBarSectionHeader.background#111824
  • sideBarSectionHeader.foreground#c5cde0
  • sideBarTitle.foreground#8ab4f8
  • statusBar.background#0b0f14
  • statusBar.border#171b24
  • statusBar.debuggingBackground#111824
  • statusBar.debuggingForeground#c5cde0
  • statusBar.foreground#9aa4b2
  • tab.activeBackground#0b0f14
  • tab.activeBorderTop#8ab4f8
  • tab.activeForeground#cfd6e4
  • tab.hoverBackground#141b27
  • tab.hoverForeground#cfd6e4
  • tab.inactiveBackground#0b0f14
  • tab.inactiveForeground#7a8496
  • terminal.ansiBlack#0b0f14
  • terminal.ansiBlue#8ab4f8
  • terminal.ansiBrightBlack#4e5666
  • terminal.ansiBrightBlue#8ab4f8
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#cfd6e4
  • terminal.ansiYellow#e5c07b
  • terminal.background#0b0f14
  • terminal.foreground#cfd6e4
  • terminalCursor.background#0b0f14
  • terminalCursor.foreground#8ab4f8
  • titleBar.activeBackground#0b0f14
  • titleBar.activeForeground#cfd6e4
  • titleBar.border#171b24
  • titleBar.inactiveBackground#0b0f14
  • titleBar.inactiveForeground#7a8496
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7382italic
keyword, storage.type, storage.modifier#8ab4f8
keyword.operator, punctuation#a2b0c7
string, constant.other.symbol#98c379
constant.numeric, constant.language, constant.character#e5c07b
entity.name.function, support.function, variable.function#7dcfff
entity.name.type, entity.name.class, support.type, support.class#e5c07b
variable, variable.other, variable.parameter#f2c97d
variable.other.property, support.type.property-name#cfd6e4
entity.name.tag#f7768e
entity.other.attribute-name#c792ea
markup.heading#8ab4f8bold
markup.bold#e5c07bbold
markup.italic#c792eaitalic
markup.quote#7a8496italic
markup.deleted#f7768e
markup.inserted#98c379
invalid, invalid.illegal#f7768e