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#5C9CFF
  • activityBar.background#070709
  • activityBar.foreground#B9BCD0
  • activityBarBadge.background#5C9CFF
  • badge.background#5C9CFF
  • badge.foreground#0A0A0F
  • button.background#5C9CFF
  • button.foreground#0A0A0F
  • button.hoverBackground#82B4FF
  • button.secondaryBackground#1A1B28
  • button.secondaryForeground#B9BCD0
  • editor.background#0A0A0F
  • editor.findMatchBackground#5C9CFF55
  • editor.foreground#B9BCD0
  • editor.lineHighlightBackground#12121C
  • editor.selectionBackground#5C9CFF35
  • editorBracketMatch.border#5C9CFF
  • editorCursor.foreground#5C9CFF
  • editorGroupHeader.tabsBackground#070709
  • editorIndentGuide.activeBackground1#2A2C3C
  • editorIndentGuide.background1#1A1B28
  • editorLineNumber.activeForeground#5C9CFF
  • editorLineNumber.foreground#2A2C3C
  • editorSuggestWidget.selectedBackground#5C9CFF22
  • editorWidget.background#101019
  • editorWidget.border#1F2030
  • focusBorder#5C9CFF
  • foreground#B9BCD0
  • gitDecoration.modifiedResourceForeground#FFB454
  • gitDecoration.untrackedResourceForeground#42B883
  • input.background#101019
  • input.border#1F2030
  • list.activeSelectionBackground#5C9CFF22
  • list.highlightForeground#37D6C8
  • list.hoverBackground#12121C
  • panel.background#070709
  • panelTitle.activeBorder#5C9CFF
  • panelTitle.activeForeground#5C9CFF
  • progressBar.background#5C9CFF
  • scrollbarSlider.background#5C9CFF22
  • scrollbarSlider.hoverBackground#5C9CFF44
  • sideBar.background#070709
  • sideBar.foreground#7E8197
  • sideBarSectionHeader.background#070709
  • sideBarTitle.foreground#5C9CFF
  • statusBar.background#070709
  • statusBar.foreground#7E8197
  • tab.activeBackground#0A0A0F
  • tab.activeBorderTop#5C9CFF
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#070709
  • tab.inactiveForeground#565872
  • terminal.ansiBlue#5C9CFF
  • terminal.ansiCyan#37D6C8
  • terminal.ansiGreen#42B883
  • terminal.ansiMagenta#9D85FF
  • terminal.ansiRed#E0234E
  • terminal.ansiYellow#FFB454
  • terminal.background#070709
  • terminal.foreground#B9BCD0
  • textLink.foreground#5C9CFF
  • titleBar.activeBackground#070709
  • titleBar.activeForeground#B9BCD0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A4C60italic
string, string.quoted#42B883
constant.numeric, constant.language#FFB454
keyword, storage.type, storage.modifier#9D85FF
keyword.operator#37D6C8
entity.name.function, support.function#5C9CFF
entity.name.type, entity.name.class, support.type#37D6C8
variable.parameter#C9A98Aitalic
entity.name.tag#E0234E
entity.other.attribute-name#FFB454italic
support.type.property-name, meta.object-literal.key#5C9CFF
markup.heading#5C9CFFbold
invalid#E0234E