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—
Auralis — Smart Theme & Icon Suite by Auralis - VS Code Theme