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#030714
  • activityBar.foreground#dde4fa
  • activityBarBadge.background#e03d5c
  • activityBarBadge.foreground#dde4fa
  • badge.background#e03d5c
  • badge.foreground#dde4fa
  • button.background#8ca6ed
  • button.foreground#030714
  • button.hoverBackground#8ca6ed90
  • dropdown.background#030714
  • dropdown.border#8ca6ed
  • dropdown.foreground#dde4fa
  • editor.background#030714
  • editor.foreground#dde4fa
  • editor.lineHighlightBackground#030714
  • editor.selectionBackground#8ca6ed50
  • editorCursor.foreground#dde4fa
  • editorGroupHeader.tabsBackground#030714
  • editorLineNumber.foreground#dde4fa80
  • input.background#030714
  • input.border#8ca6ed
  • input.foreground#dde4fa
  • input.placeholderForeground#dde4fa80
  • list.activeSelectionBackground#8ca6ed50
  • list.activeSelectionForeground#dde4fa
  • list.hoverBackground#030714
  • list.hoverForeground#dde4fa
  • list.inactiveSelectionBackground#030714
  • list.inactiveSelectionForeground#dde4fa
  • notificationLink.foreground#8ca6ed
  • notifications.background#030714
  • notifications.border#8ca6ed
  • notifications.foreground#dde4fa
  • notificationsErrorIcon.foreground#e03d5c
  • notificationsInfoIcon.foreground#8ca6ed
  • notificationsWarningIcon.foreground#91176d
  • progressBar.background#8ca6ed
  • quickInput.background#050615
  • quickInput.foreground#da5899
  • quickInputList.focusBackground#0d1126
  • quickInputList.focusForeground#e03d5c
  • sideBar.background#030714
  • sideBar.foreground#dde4fa
  • sideBarSectionHeader.background#030714
  • sideBarSectionHeader.foreground#dde4fa
  • statusBar.background#030714
  • statusBar.foreground#dde4fa
  • statusBarItem.hoverBackground#8ca6ed50
  • tab.activeBackground#030714
  • tab.activeForeground#dde4fa
  • tab.border#030714
  • tab.inactiveBackground#030714
  • tab.inactiveForeground#dde4fa80
  • terminal.ansiBlack#030714
  • terminal.ansiBlue#8ca6ed
  • terminal.ansiBrightBlack#030714
  • terminal.ansiBrightBlue#8ca6ed
  • terminal.ansiBrightCyan#8ca6ed
  • terminal.ansiBrightGreen#8ca6ed
  • terminal.ansiBrightMagenta#91176d
  • terminal.ansiBrightRed#e03d5c
  • terminal.ansiBrightWhite#dde4fa
  • terminal.ansiBrightYellow#91176d
  • terminal.ansiCyan#8ca6ed
  • terminal.ansiGreen#8ca6ed
  • terminal.ansiMagenta#91176d
  • terminal.ansiRed#e03d5c
  • terminal.ansiWhite#dde4fa
  • terminal.ansiYellow#91176d
  • terminal.background#030714
  • terminal.foreground#dde4fa
  • titleBar.activeBackground#030714
  • titleBar.activeForeground#dde4fa
  • titleBar.inactiveBackground#030714
  • titleBar.inactiveForeground#dde4fa80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#dde4fa80
keyword, storage.type, storage.modifier#91176d
string#8ca6ed
constant.numeric, constant.language, constant.boolean#e03d5c
variable.language, variable.other#dde4fa
entity.name.function, support.function#8ca6ed
entity.name.type, support.class#e03d5c
entity.other.inherited-class#e03d5c
markup.heading#91176d
markup.link#8ca6ed
entity.name.tag#e03d5c
entity.other.attribute-name#91176d
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