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#100E23
  • activityBar.foreground#CBE3E7
  • activityBar.inactiveForeground#8A889D
  • activityBarBadge.background#F48FB1
  • activityBarBadge.foreground#100E23
  • badge.background#F48FB1
  • badge.foreground#100E23
  • button.background#F48FB1
  • button.foreground#100E23
  • button.hoverBackground#F02E6E
  • dropdown.background#2D2B40
  • dropdown.border#3E3859
  • dropdown.foreground#CBE3E7
  • editor.background#1E1C31
  • editor.foreground#CBE3E7
  • editor.inactiveSelectionBackground#2d2b4099
  • editor.lineHighlightBackground#2D2B40
  • editor.selectionBackground#3E3859
  • editorBracketMatch.background#3E385980
  • editorBracketMatch.border#78A8FF
  • editorCursor.foreground#F48FB1
  • editorGroupHeader.tabsBackground#1E1C31
  • editorIndentGuide.activeBackground1#3E3859
  • editorIndentGuide.background1#2D2B40
  • editorLineNumber.activeForeground#8A889D
  • editorLineNumber.foreground#585273
  • editorWhitespace.foreground#585273
  • editorWidget.background#100E23
  • editorWidget.border#2D2B40
  • input.background#2D2B40
  • input.border#3E3859
  • input.foreground#CBE3E7
  • inputOption.activeBorder#78A8FF
  • list.activeSelectionBackground#3E3859
  • list.activeSelectionForeground#CBE3E7
  • list.hoverBackground#2D2B40
  • list.hoverForeground#CBE3E7
  • list.inactiveSelectionBackground#2D2B40
  • list.inactiveSelectionForeground#CBE3E7
  • panel.background#100E23
  • panel.border#2D2B40
  • panelTitle.activeForeground#CBE3E7
  • panelTitle.inactiveForeground#8A889D
  • scrollbarSlider.activeBackground#3E3859FF
  • scrollbarSlider.background#3E385980
  • scrollbarSlider.hoverBackground#3E3859CC
  • sideBar.background#100E23
  • sideBar.foreground#8A889D
  • sideBarSectionHeader.background#1E1C31
  • sideBarSectionHeader.foreground#CBE3E7
  • sideBarTitle.foreground#CBE3E7
  • statusBar.background#100E23
  • statusBar.debuggingBackground#F02E6E
  • statusBar.debuggingForeground#CBE3E7
  • statusBar.foreground#8A889D
  • statusBar.noFolderBackground#100E23
  • tab.activeBackground#1E1C31
  • tab.activeForeground#CBE3E7
  • tab.border#100E23
  • tab.inactiveBackground#100E23
  • tab.inactiveForeground#8A889D
  • terminal.ansiBlack#100E23
  • terminal.ansiBlue#78A8FF
  • terminal.ansiBrightBlack#585273
  • terminal.ansiBrightBlue#91DDFF
  • terminal.ansiBrightCyan#ABF8F7
  • terminal.ansiBrightGreen#A1EFD3
  • terminal.ansiBrightMagenta#7676FF
  • terminal.ansiBrightRed#F48FB1
  • terminal.ansiBrightWhite#CBE3E7
  • terminal.ansiBrightYellow#F2B482
  • terminal.ansiCyan#63F2F1
  • terminal.ansiGreen#7FE9C3
  • terminal.ansiMagenta#D4BFFF
  • terminal.ansiRed#F02E6E
  • terminal.ansiWhite#CBE3E7
  • terminal.ansiYellow#FFE6B3
  • terminal.background#1E1C31
  • terminal.foreground#CBE3E7
  • titleBar.activeBackground#100E23
  • titleBar.activeForeground#CBE3E7
  • titleBar.inactiveBackground#100E23
  • titleBar.inactiveForeground#8A889D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#585273italic
string, string.quoted#A1EFD3
constant.numeric, constant.language, constant.character#F2B482
constant.other.color#63F2F1
keyword, storage.modifier, storage.type.class, storage.type.function#F48FB1
storage.type, support.type#D4BFFF
entity.name.function, support.function#78A8FF
entity.name.class, entity.name.type, support.class#FFE6B3
variable, variable.other, variable.parameter#CBE3E7
variable.language#F48FB1italic
entity.name.tag#F02E6E
entity.other.attribute-name#7FE9C3
support.constant#91DDFF
markup.heading#F48FB1bold
markup.bold#F2B482bold
markup.italic#D4BFFFitalic
markup.inline.raw#A1EFD3
punctuation, meta.brace#8A889D
Embarkation by Ash Furrow - VS Code Theme