Skip to main content
CodingTheme

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.background#0a0c29
  • activityBar.foreground#2d40d2
  • activityBarBadge.background#2d40d2
  • activityBarBadge.foreground#eaecfb
  • editor.background#050615
  • editor.foreground#eaecfb
  • editor.inactiveSelectionBackground#0a0c2900
  • editor.selectionBackground#334499
  • editorCursor.foreground#d12e80
  • editorGroupHeader.tabsBackground#050615
  • editorIndentGuide.activeBackground1#2d40d2
  • editorIndentGuide.background1#2433a8
  • editorLineNumber.activeForeground#2d40d2
  • editorLineNumber.foreground#5766db
  • list.hoverBackground#272fa5
  • list.hoverForeground#edabcc
  • menu.background#0a0c29
  • menu.foreground#b3bbe6
  • menu.selectionBackground#1d237c
  • menu.selectionForeground#a72566
  • menu.separatorBackground#bf9140
  • notificationLink.foreground#8ca6ed
  • notifications.background#030714
  • notifications.border#8ca6ed
  • notifications.foreground#dde4fa
  • notificationsErrorIcon.foreground#e03d5c
  • notificationsInfoIcon.foreground#8ca6ed
  • notificationsWarningIcon.foreground#bf9140
  • quickInput.background#050615
  • quickInput.foreground#da5899
  • quickInputList.focusBackground#0d1126
  • quickInputList.focusForeground#bf9140
  • sideBar.background#050615
  • sideBar.foreground#abb3ed
  • sideBarSectionHeader.background#0a0c29
  • sideBarTitle.foreground#2d40d2
  • statusBar.background#2d40d2
  • statusBar.debuggingBackground#d12e80
  • statusBar.debuggingForeground#eaecfb
  • statusBar.foreground#eaecfb
  • tab.activeBackground#0a0c29
  • tab.activeForeground#2d40d2
  • tab.inactiveBackground#050615
  • tab.inactiveForeground#5766db
  • titleBar.activeBackground#0a0c29
  • titleBar.activeForeground#2d40d2
  • titleBar.inactiveBackground#050615
  • titleBar.inactiveForeground#5766db

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5766dbitalic
string, constant.other.symbol#bf9140
constant.numeric#d12e80
keyword, storage.type, storage.modifier#4055bf
entity.name.function, support.function#d12e80
variable, string constant.other.placeholder#2d40d2
entity.name.type, entity.name.class, support.type#4055bf
constant, variable.other.constant#bf9140
invalid, invalid.illegal#d12e80underline
keyword.operator#5766db
entity.name.tag#da5899
entity.other.attribute-name#334499
entity.name.tag.structure.div.html#6677cc
markup.heading.markdown#d12e80bold
markup.bold.markdown#4055bf
markup.italic.markdown#e382b3italic
markup.inline.raw.string.markdown#bf9140
markup.underline.link.markdown#edabccunderline
text.html.markdown#abb3ed

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Celestial Echoes by Jemo69 - VS Code Theme