Skip to main content
Coding Theme

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.background#0A0B0E
  • activityBar.foreground#c9c7cd
  • activityBarBadge.background#e5c890
  • activityBarBadge.foreground#0F1014
  • editor.background#0F1014
  • editor.foreground#c9c7cd
  • editor.lineHighlightBackground#1b1b1d
  • editor.selectionBackground#3e3e43
  • editor.selectionHighlightBackground#2a2a2d
  • editorCursor.foreground#e5c890
  • editorIndentGuide.background1#2a2a2d
  • editorInlayHint.foreground#3e3e43
  • editorLineNumber.activeForeground#c9c7cd
  • editorLineNumber.foreground#57575f
  • editorRuler.foreground#2a2a2d
  • editorSuggestWidget.background#1b1b1d
  • editorSuggestWidget.foreground#c1c0d4
  • editorSuggestWidget.highlightForeground#e5c890
  • editorSuggestWidget.selectedBackground#3e3e43
  • editorWhitespace.foreground#2a2a2d
  • input.background#1b1b1d
  • input.foreground#c9c7cd
  • input.placeholderForeground#57575f
  • list.activeSelectionBackground#2a2a2d
  • list.activeSelectionForeground#e5c890
  • list.hoverBackground#1b1b1d
  • list.hoverForeground#c9c7cd
  • panel.background#0A0B0E
  • panelTitle.activeForeground#e5c890
  • panelTitle.inactiveForeground#9998a8
  • sideBar.background#0A0B0E
  • sideBar.foreground#9998a8
  • sideBarSectionHeader.background#1b1b1d
  • sideBarSectionHeader.foreground#c9c7cd
  • sideBarTitle.foreground#e5c890
  • statusBar.background#0A0B0E
  • statusBar.debuggingBackground#ea83a5
  • statusBar.debuggingForeground#0F1014
  • statusBar.foreground#9998a8
  • statusBar.noFolderBackground#0A0B0E
  • tab.activeBackground#0F1014
  • tab.activeForeground#e5c890
  • tab.inactiveBackground#0A0B0E
  • tab.inactiveForeground#9998a8
  • titleBar.activeBackground#0A0B0E
  • titleBar.activeForeground#c9c7cd
  • titleBar.inactiveBackground#0A0B0E
  • titleBar.inactiveForeground#57575f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#c9c7cd
variable.other.constant#8eb6f5
variable.language#b9aeda
variable.parameter#c1c0d4italic
variable.other.member#c1c0d4
keyword#8eb6f5
keyword.control.conditional#a8a29eitalic
storage#8eb6f5
constant#8eb6f5
constant.numeric#e9c46a
constant.language#e5c890
constant.character.escape#ea83a5
string#9898a6
string.regexp#90b99f
comment#808080italic
punctuation#9998a8
punctuation.definition#9998a8
support.function#9898a6
support.type#b9aeda
entity.name.function#e5c890italic
entity.name.type#b9aeda
entity.name.tag#9898a6
entity.other.attribute-name#aca1cfitalic
markup.heading#b9aedabold
markup.boldbold
markup.italicitalic
markup.inserted#9dc6ac
markup.deleted#e78284
markup.changed#b9aeda
Helix Amberwood by Eric Junior - VS Code Theme