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#212B2E
  • activityBar.border#FECEA814
  • activityBar.foreground#FECEA8
  • activityBar.inactiveForeground#FECEA880
  • activityBarBadge.background#E84A5F
  • activityBarBadge.foreground#FFFFFF
  • button.background#99B898
  • button.foreground#2A363B
  • button.hoverBackground#FECEA8
  • descriptionForeground#FECEA8B3
  • dropdown.background#1F2A2D
  • dropdown.border#FECEA829
  • dropdown.foreground#FECEA8
  • editor.background#2A363B
  • editor.findMatchBackground#FF847C33
  • editor.findMatchHighlightBackground#FF847C1F
  • editor.foreground#FECEA8
  • editor.hoverHighlightBackground#FECEA814
  • editor.inactiveSelectionBackground#FECEA81F
  • editor.selectionBackground#FECEA829
  • editor.selectionHighlightBackground#99B8981F
  • editor.wordHighlightBackground#99B8981A
  • editor.wordHighlightStrongBackground#99B89826
  • editorBracketMatch.background#99B89826
  • editorBracketMatch.border#99B89866
  • editorCursor.foreground#FECEA8
  • editorIndentGuide.activeBackground#FECEA829
  • editorIndentGuide.background#FECEA814
  • editorLineNumber.activeForeground#FECEA8
  • editorLineNumber.foreground#FECEA84D
  • editorRuler.foreground#FECEA814
  • editorWhitespace.foreground#FECEA814
  • errorForeground#E84A5F
  • focusBorder#99B898
  • foreground#FECEA8
  • input.background#1F2A2D
  • input.border#FECEA829
  • input.foreground#FECEA8
  • notificationCenterHeader.background#212B2E
  • notifications.background#212B2E
  • notifications.border#FECEA814
  • notifications.foreground#FECEA8
  • panel.background#212B2E
  • panel.border#FECEA814
  • panelTitle.activeForeground#FECEA8
  • panelTitle.inactiveForeground#FECEA8AA
  • sideBar.background#263236
  • sideBar.border#FECEA814
  • sideBar.foreground#FECEA8CC
  • sideBarSectionHeader.background#2A363B
  • sideBarSectionHeader.foreground#99B898
  • sideBarTitle.foreground#FECEA8
  • statusBar.background#212B2E
  • statusBar.border#FECEA814
  • statusBar.debuggingBackground#FF847C
  • statusBar.debuggingForeground#2A363B
  • statusBar.foreground#FECEA8CC
  • tab.activeBackground#2A363B
  • tab.activeForeground#FECEA8
  • tab.border#FECEA814
  • tab.inactiveBackground#212B2E
  • tab.inactiveForeground#FECEA8A6
  • terminal.ansiBlack#1B2426
  • terminal.ansiBlue#FF847C
  • terminal.ansiCyan#99B898
  • terminal.ansiGreen#99B898
  • terminal.ansiMagenta#FF847C
  • terminal.ansiRed#E84A5F
  • terminal.ansiWhite#FECEA8
  • terminal.ansiYellow#FECEA8
  • terminal.background#2A363B
  • terminal.foreground#FECEA8
  • titleBar.activeBackground#212B2E
  • titleBar.activeForeground#FECEA8
  • titleBar.inactiveBackground#212B2ECC
  • titleBar.inactiveForeground#FECEA8AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#99B89899italic
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#FECEA8CC
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#FECEA8B3
punctuation, meta.brace, meta.delimiter#FECEA899
invalid, invalid.illegal#E84A5Funderline
markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#99B898bold
string.other.link.title.markdown, markup.underline.link#FF847Cunderline