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#191D26
  • activityBar.foreground#E6E6E8
  • activityBar.inactiveForeground#C9C9CD
  • activityBarBadge.background#9587DD
  • activityBarBadge.foreground#14171E
  • badge.background#9587DD
  • badge.foreground#14171E
  • button.background#4D9391
  • button.foreground#14171E
  • button.hoverBackground#EED891
  • diffEditor.insertedLineBackground#49BDB022
  • diffEditor.insertedTextBackground#49BDB033
  • diffEditor.removedLineBackground#E55C7A22
  • diffEditor.removedTextBackground#E55C7A33
  • dropdown.background#191D26
  • dropdown.border#272C3A
  • dropdown.foreground#E6E6E8
  • editor.background#14171E
  • editor.findMatchBackground#526AF3AA
  • editor.findMatchHighlightBackground#E84C5866
  • editor.foreground#E6E6E8
  • editor.inactiveSelectionBackground#272C3A66
  • editor.lineHighlightBackground#20243080
  • editor.selectionBackground#272C3A99
  • editor.selectionHighlightBackground#F3C91F44
  • editor.wordHighlightBackground#91F36844
  • editor.wordHighlightStrongBackground#526AF355
  • editorBracketMatch.background#68F3CA33
  • editorBracketMatch.border#68F3CA
  • editorCursor.foreground#F2F2F2
  • editorError.foreground#E55C7A
  • editorGutter.addedBackground#49BDB0
  • editorGutter.background#14171E
  • editorGutter.deletedBackground#E55C7A
  • editorGutter.modifiedBackground#F5C791
  • editorHint.foreground#454459
  • editorIndentGuide.activeBackground1#545C5E
  • editorIndentGuide.background1#272C3AAA
  • editorInfo.foreground#63E8C1
  • editorLineNumber.activeForeground#F3C91F
  • editorLineNumber.foreground#2E3740
  • editorOverviewRuler.addedForeground#49BDB0
  • editorOverviewRuler.deletedForeground#E55C7A
  • editorOverviewRuler.errorForeground#E55C7A
  • editorOverviewRuler.infoForeground#63E8C1
  • editorOverviewRuler.modifiedForeground#F5C791
  • editorOverviewRuler.warningForeground#DBAC66
  • editorWarning.foreground#DBAC66
  • editorWhitespace.foreground#BEBEC466
  • input.background#191D26
  • input.border#272C3A
  • input.foreground#E6E6E8
  • input.placeholderForeground#BEBEC4
  • list.activeSelectionBackground#272C3A66
  • list.activeSelectionForeground#E6E6E8
  • list.highlightForeground#9587DD
  • list.hoverBackground#20243088
  • panel.background#0C0D12
  • panel.border#202430
  • panelTitle.activeBorder#9587DD
  • panelTitle.activeForeground#E6E6E8
  • panelTitle.inactiveForeground#C9C9CD
  • peekView.border#272C3A
  • peekViewEditor.background#14171E
  • peekViewEditor.matchHighlightBackground#F3C91F66
  • peekViewResult.background#0C0D12
  • peekViewResult.matchHighlightBackground#F3C91F66
  • sideBar.background#0C0D12
  • sideBar.foreground#D4D4D6
  • sideBarSectionHeader.background#191D26
  • sideBarSectionHeader.foreground#E6E6E8
  • sideBarTitle.foreground#E6E6E8
  • statusBar.background#191D26
  • statusBar.debuggingBackground#DBAC66
  • statusBar.debuggingForeground#14171E
  • statusBar.foreground#E6E6E8
  • statusBar.noFolderBackground#191D26
  • tab.activeBackground#14171E
  • tab.activeBorderTop#9587DD
  • tab.activeForeground#E6E6E8
  • tab.border#202430
  • tab.inactiveBackground#191D26
  • tab.inactiveForeground#C9C9CD
  • terminal.ansiBlack#14171E
  • terminal.ansiBlue#41B0F3
  • terminal.ansiBrightBlack#454459
  • terminal.ansiBrightBlue#63E8C1
  • terminal.ansiBrightCyan#11CCB2
  • terminal.ansiBrightGreen#35BF88
  • terminal.ansiBrightMagenta#41B0F3
  • terminal.ansiBrightRed#E55C7A
  • terminal.ansiBrightWhite#E6E6E8
  • terminal.ansiBrightYellow#DBAC66
  • terminal.ansiCyan#62D2DB
  • terminal.ansiGreen#63E8C1
  • terminal.ansiMagenta#C79AF4
  • terminal.ansiRed#E84C58
  • terminal.ansiWhite#E6E6E8
  • terminal.ansiYellow#EED891
  • terminal.background#14171E
  • terminal.foreground#E6E6E8
  • titleBar.activeBackground#191D26
  • titleBar.activeForeground#E6E6E8
  • titleBar.inactiveBackground#14171E
  • titleBar.inactiveForeground#C9C9CD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#454459
keyword, keyword.control, storage, storage.type#9587DD
support.function, support.class, support.type, support.constant#63E8C1
entity.name.function, meta.function-call, support.function.any-method#D6A0D1
variable, meta.definition.variable.name, entity.name.variable#41B0F3
variable.parameter, meta.parameter#D4D4D6
variable.other.property, meta.object-literal.key, support.variable.property#41B0F3
entity.name.type, entity.name.class, entity.name.namespace, support.type#11CCB2
constant, constant.language, constant.character#41B0F3
constant.numeric#E361C3
constant.language.boolean#E361C3
string, string.quoted, string.template#62D2DB
constant.character.escape, string.regexp, string.regexp punctuation.definition.string.begin#65A0A1
comment.block.documentation, string.quoted.docstring#65A0A1
meta.preprocessor, entity.name.tag, entity.other.attribute-name#C79AF4
keyword.operator, punctuation, meta.brace#D4D4D6
invalid, invalid.deprecated#E55C7A
markup.warning#DBAC66
markup.heading, markup.heading punctuation.definition.heading#9587DD
markup.italic, markup.bold, markup.bold markup.italic#63E8C1
markup.underline.link, string.other.link.title#9D81BA
markup.inserted, meta.diff.header.to-file#49BDB0
markup.changed, meta.diff.header#F5C791
markup.deleted, meta.diff.header.from-file#E55C7A