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
PR-Theme by Prince Patel - VS Code Theme