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#8AB4FF
  • activityBar.background#353451
  • activityBar.foreground#E8EDFA
  • activityBar.inactiveForeground#A3ADC5
  • activityBarBadge.background#BDB2FF
  • activityBarBadge.foreground#1D2538
  • badge.background#8AB4FF
  • badge.foreground#1D2538
  • button.background#8AB4FF
  • button.foreground#1D2538
  • button.hoverBackground#A1C3FF
  • descriptionForeground#A3ADC5
  • dropdown.background#253149
  • dropdown.border#424D68
  • dropdown.foreground#E8EDFA
  • editor.background#1D2538
  • editor.findMatchBackground#C29C5777
  • editor.findMatchHighlightBackground#C29C5733
  • editor.foreground#E8EDFA
  • editor.inactiveSelectionBackground#45446399
  • editor.lineHighlightBackground#424D6833
  • editor.selectionBackground#454463
  • editorBracketMatch.background#454463
  • editorBracketMatch.border#8AB4FF
  • editorCursor.foreground#8AB4FF
  • editorError.foreground#F1A4BC
  • editorGroupHeader.tabsBackground#253149
  • editorHoverWidget.background#253149
  • editorHoverWidget.border#424D68
  • editorHoverWidget.foreground#E8EDFA
  • editorIndentGuide.activeBackground1#A3ADC5
  • editorIndentGuide.background1#424D6866
  • editorInfo.foreground#94D4E4
  • editorLineNumber.activeForeground#8AB4FF
  • editorLineNumber.foreground#A3ADC5
  • editorSuggestWidget.background#253149
  • editorSuggestWidget.border#424D68
  • editorSuggestWidget.foreground#E8EDFA
  • editorSuggestWidget.selectedBackground#454463
  • editorWarning.foreground#E8C792
  • editorWhitespace.foreground#424D68
  • editorWidget.background#253149
  • editorWidget.border#424D68
  • editorWidget.foreground#E8EDFA
  • errorForeground#F1A4BC
  • focusBorder#8AB4FF
  • foreground#E8EDFA
  • gitDecoration.addedResourceForeground#8AB4FF
  • gitDecoration.deletedResourceForeground#F1A4BC
  • gitDecoration.modifiedResourceForeground#94D4E4
  • input.background#253149
  • input.border#424D68
  • input.foreground#E8EDFA
  • input.placeholderForeground#A3ADC5
  • list.activeSelectionBackground#454463
  • list.activeSelectionForeground#E8EDFA
  • list.highlightForeground#8AB4FF
  • list.hoverBackground#424D6844
  • list.inactiveSelectionBackground#45446399
  • list.inactiveSelectionForeground#E8EDFA
  • notifications.background#253149
  • notifications.border#424D68
  • notifications.foreground#E8EDFA
  • panel.background#253149
  • panel.border#424D68
  • panel.foreground#E8EDFA
  • quickInput.background#253149
  • quickInput.foreground#E8EDFA
  • scrollbarSlider.background#424D6888
  • scrollbarSlider.hoverBackground#424D68BB
  • selection.background#454463
  • sideBar.background#253149
  • sideBar.border#424D68
  • sideBar.foreground#E8EDFA
  • statusBar.background#253149
  • statusBar.debuggingBackground#8AB4FF
  • statusBar.debuggingForeground#1D2538
  • statusBar.foreground#E8EDFA
  • statusBar.noFolderBackground#253149
  • statusBar.noFolderForeground#E8EDFA
  • tab.activeBackground#1D2538
  • tab.activeBorderTop#8AB4FF
  • tab.activeForeground#E8EDFA
  • tab.border#424D68
  • tab.inactiveBackground#253149
  • tab.inactiveForeground#A3ADC5
  • terminal.ansiBlack#151C2A
  • terminal.ansiBlue#94D4E4
  • terminal.ansiBrightBlack#A3ADC5
  • terminal.ansiBrightBlue#94D4E4
  • terminal.ansiBrightCyan#94D4E4
  • terminal.ansiBrightGreen#8AB4FF
  • terminal.ansiBrightMagenta#BDB2FF
  • terminal.ansiBrightRed#F1A4BC
  • terminal.ansiBrightWhite#E8EDFA
  • terminal.ansiBrightYellow#E8C792
  • terminal.ansiCyan#94D4E4
  • terminal.ansiGreen#8AB4FF
  • terminal.ansiMagenta#BDB2FF
  • terminal.ansiRed#F1A4BC
  • terminal.ansiWhite#CDD6EA
  • terminal.ansiYellow#E8C792
  • terminal.background#1D2538
  • terminal.foreground#E8EDFA
  • textLink.activeForeground#8AB4FF
  • textLink.foreground#8AB4FF
  • titleBar.activeBackground#253149
  • titleBar.activeForeground#E8EDFA
  • titleBar.inactiveBackground#1D2538
  • titleBar.inactiveForeground#A3ADC5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A3ADC5
keyword, storage#8AB4FF
string#FFD6E0
constant.numeric, constant.language#E8C792
entity.name.type, support.type, support.class#BDB2FF
entity.name.function, support.function#94D4E4
variable#E8EDFA
entity.name.tag#8AB4FF
entity.other.attribute-name#E8C792
markup.heading#8AB4FF
invalid#F1A4BC
Blue Reverie Theme by lilin - VS Code Theme