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#fc9d03
  • activityBarBadge.foreground#dde4fa
  • badge.background#fc9d03
  • 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#d8e1f3
  • editor.lineHighlightBackground#030714
  • editor.selectionBackground#8ca6ed50
  • editorCursor.foreground#fc9d03
  • 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#fc9d03
  • notificationsInfoIcon.foreground#8ca6ed
  • notificationsWarningIcon.foreground#975e02
  • progressBar.background#8ca6ed
  • quickInput.background#050615
  • quickInput.foreground#dde4fa
  • quickInputList.focusBackground#0d1126
  • quickInputList.focusForeground#fc9d03
  • 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#fc9d03
  • terminal.ansiBrightRed#fc9d03
  • terminal.ansiBrightWhite#dde4fa
  • terminal.ansiBrightYellow#fc9d03
  • terminal.ansiCyan#8ca6ed
  • terminal.ansiGreen#8ca6ed
  • terminal.ansiMagenta#fc9d03
  • terminal.ansiRed#fc9d03
  • terminal.ansiWhite#dde4fa
  • terminal.ansiYellow#fed89a
  • 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#fed89a
string#8ca6ed
constant.numeric, constant.language, constant.boolean#fc9d03
variable.language, variable.other#dde4fa
entity.name.function, support.function#8ca6ed
entity.name.type, support.class#fc9d03
entity.other.inherited-class#fc9d03
markup.heading#fc9d03
markup.link#8ca6ed
entity.name.tag#5412ed
entity.other.attribute-name#5412ed
markup.bold.markdown#4055bf
markup.italic.markdown#9871f4italic
markup.inline.raw.string.markdown#bf9140
markup.underline.link.markdown#8a12edunderline
text.html.markdown#baa0f8

Shiki preview

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

Loading...

Celestial Echoes by Jemo69 - VS Code Theme