Skip to main content
Coding Theme

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#0F1416
  • activityBar.border#FECEA833
  • activityBar.foreground#FECEA8
  • activityBar.inactiveForeground#FECEA8A6
  • activityBarBadge.background#E84A5F
  • activityBarBadge.foreground#FFFFFF
  • button.background#99B898
  • button.foreground#0F1416
  • button.hoverBackground#FECEA8
  • descriptionForeground#FECEA8CC
  • dropdown.background#0F1416
  • dropdown.border#FECEA84A
  • dropdown.foreground#FECEA8
  • editor.background#1B2426
  • editor.findMatchBackground#FF847C66
  • editor.findMatchHighlightBackground#FF847C3D
  • editor.foreground#FECEA8
  • editor.hoverHighlightBackground#FECEA820
  • editor.inactiveSelectionBackground#FECEA838
  • editor.selectionBackground#FECEA866
  • editor.selectionHighlightBackground#99B89833
  • editor.wordHighlightBackground#99B8982E
  • editor.wordHighlightStrongBackground#99B89840
  • editorBracketMatch.background#99B89840
  • editorBracketMatch.border#99B89899
  • editorCursor.foreground#FECEA8
  • editorIndentGuide.activeBackground#FECEA84A
  • editorIndentGuide.background#FECEA820
  • editorLineNumber.activeForeground#FECEA8
  • editorLineNumber.foreground#FECEA866
  • editorRuler.foreground#FECEA820
  • editorWhitespace.foreground#FECEA820
  • errorForeground#E84A5F
  • focusBorder#99B898
  • foreground#FECEA8
  • input.background#0F1416
  • input.border#FECEA84A
  • input.foreground#FECEA8
  • notificationCenterHeader.background#0F1416
  • notifications.background#0F1416
  • notifications.border#FECEA833
  • notifications.foreground#FECEA8
  • panel.background#0F1416
  • panel.border#FECEA833
  • panelTitle.activeForeground#FECEA8
  • panelTitle.inactiveForeground#FECEA8B3
  • sideBar.background#141A1C
  • sideBar.border#FECEA833
  • sideBar.foreground#FECEA8E6
  • sideBarSectionHeader.background#1B2426
  • sideBarSectionHeader.foreground#99B898
  • sideBarTitle.foreground#FECEA8
  • statusBar.background#0F1416
  • statusBar.border#FECEA833
  • statusBar.debuggingBackground#FF847C
  • statusBar.debuggingForeground#1B2426
  • statusBar.foreground#FECEA8E6
  • tab.activeBackground#1B2426
  • tab.activeForeground#FECEA8
  • tab.border#FECEA833
  • tab.inactiveBackground#0F1416
  • tab.inactiveForeground#FECEA8B3
  • terminal.ansiBlack#0F1416
  • terminal.ansiBlue#FF847C
  • terminal.ansiCyan#99B898
  • terminal.ansiGreen#99B898
  • terminal.ansiMagenta#FF847C
  • terminal.ansiRed#E84A5F
  • terminal.ansiWhite#FECEA8
  • terminal.ansiYellow#FECEA8
  • terminal.background#1B2426
  • terminal.foreground#FECEA8
  • titleBar.activeBackground#0F1416
  • titleBar.activeForeground#FECEA8
  • titleBar.inactiveBackground#0F1416CC
  • titleBar.inactiveForeground#FECEA8B3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#99B898CCitalic
string, constant.other.symbol, constant.other.key#99B898
keyword, storage.type, storage.modifier, keyword.control#FF847Cbold
entity.name.function, support.function, meta.function-call, variable.function#FECEA8bold
variable, meta.definition.variable, support.other.variable#FECEA8E6
constant.numeric, constant.language, support.constant, constant.character#FF847C
entity.name.type, support.type, support.class, storage.type.class#99B898bold
entity.name.tag, meta.tag, punctuation.definition.tag#FF847C
entity.other.attribute-name#FECEA8CC
punctuation, meta.brace, meta.delimiter#FECEA8B3
invalid, invalid.illegal#E84A5Funderline
markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#99B898bold
string.other.link.title.markdown, markup.underline.link#FF847Cunderline