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#191F26
  • activityBar.foreground#E6E6E8
  • activityBar.inactiveForeground#C9C9CD
  • activityBarBadge.background#9D81BA
  • activityBarBadge.foreground#14191E
  • badge.background#9D81BA
  • badge.foreground#14191E
  • button.background#4D9391
  • button.foreground#14191E
  • button.hoverBackground#EED891
  • diffEditor.insertedLineBackground#49BDB022
  • diffEditor.insertedTextBackground#49BDB033
  • diffEditor.removedLineBackground#E55C7A22
  • diffEditor.removedTextBackground#E55C7A33
  • dropdown.background#191F26
  • dropdown.border#252D35
  • dropdown.foreground#E6E6E8
  • editor.background#14191E
  • editor.findMatchBackground#C7EE53AA
  • editor.findMatchHighlightBackground#EF678766
  • editor.foreground#E6E6E8
  • editor.inactiveSelectionBackground#252D3566
  • editor.lineHighlightBackground#1F272E80
  • editor.selectionBackground#252D3599
  • editor.selectionHighlightBackground#EAE46A44
  • editor.wordHighlightBackground#68F38544
  • editor.wordHighlightStrongBackground#C7EE5355
  • editorBracketMatch.background#68F3CA33
  • editorBracketMatch.border#68F3CA
  • editorCursor.foreground#F2F2F2
  • editorError.foreground#E55C7A
  • editorGutter.addedBackground#49BDB0
  • editorGutter.background#14191E
  • editorGutter.deletedBackground#E55C7A
  • editorGutter.modifiedBackground#F5C791
  • editorHint.foreground#454459
  • editorIndentGuide.activeBackground1#545C5E
  • editorIndentGuide.background1#252D35AA
  • editorInfo.foreground#9D81BA
  • editorLineNumber.activeForeground#0D9C94
  • editorLineNumber.foreground#454459
  • editorOverviewRuler.addedForeground#49BDB0
  • editorOverviewRuler.deletedForeground#E55C7A
  • editorOverviewRuler.errorForeground#E55C7A
  • editorOverviewRuler.infoForeground#9D81BA
  • editorOverviewRuler.modifiedForeground#F5C791
  • editorOverviewRuler.warningForeground#DBAC66
  • editorWarning.foreground#DBAC66
  • editorWhitespace.foreground#BEBEC466
  • input.background#191F26
  • input.border#252D35
  • input.foreground#E6E6E8
  • input.placeholderForeground#BEBEC4
  • list.activeSelectionBackground#252D3566
  • list.activeSelectionForeground#E6E6E8
  • list.highlightForeground#9D81BA
  • list.hoverBackground#1F272E88
  • panel.background#0C0F12
  • panel.border#1F272E
  • panelTitle.activeBorder#9D81BA
  • panelTitle.activeForeground#E6E6E8
  • panelTitle.inactiveForeground#C9C9CD
  • peekView.border#252D35
  • peekViewEditor.background#14191E
  • peekViewEditor.matchHighlightBackground#EAE46A66
  • peekViewResult.background#0C0F12
  • peekViewResult.matchHighlightBackground#EAE46A66
  • sideBar.background#0C0F12
  • sideBar.foreground#D4D4D6
  • sideBarSectionHeader.background#191F26
  • sideBarSectionHeader.foreground#E6E6E8
  • sideBarTitle.foreground#E6E6E8
  • statusBar.background#191F26
  • statusBar.debuggingBackground#DBAC66
  • statusBar.debuggingForeground#14191E
  • statusBar.foreground#E6E6E8
  • statusBar.noFolderBackground#191F26
  • tab.activeBackground#14191E
  • tab.activeBorderTop#9D81BA
  • tab.activeForeground#E6E6E8
  • tab.border#1F272E
  • tab.inactiveBackground#191F26
  • tab.inactiveForeground#C9C9CD
  • terminal.ansiBlack#14191E
  • terminal.ansiBlue#4CA6E8
  • terminal.ansiBrightBlack#454459
  • terminal.ansiBrightBlue#9D81BA
  • terminal.ansiBrightCyan#62D2DB
  • terminal.ansiBrightGreen#35BF88
  • terminal.ansiBrightMagenta#0D9C94
  • terminal.ansiBrightRed#E55C7A
  • terminal.ansiBrightWhite#E6E6E8
  • terminal.ansiBrightYellow#DBAC66
  • terminal.ansiCyan#49BDB0
  • terminal.ansiGreen#31E183
  • terminal.ansiMagenta#9D81BA
  • terminal.ansiRed#E55C7A
  • terminal.ansiWhite#E6E6E8
  • terminal.ansiYellow#F5C791
  • terminal.background#14191E
  • terminal.foreground#E6E6E8
  • titleBar.activeBackground#191F26
  • titleBar.activeForeground#E6E6E8
  • titleBar.inactiveBackground#14191E
  • titleBar.inactiveForeground#C9C9CD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#454459
keyword, keyword.control, storage, storage.type#9D81BA
support.function, support.class, support.type, support.constant#9D81BA
entity.name.function, meta.function-call, support.function.any-method#0BC9CF
variable, meta.definition.variable.name, entity.name.variable#7CF083
variable.parameter, meta.parameter#D4D4D6
variable.other.property, meta.object-literal.key, support.variable.property#7CF083
entity.name.type, entity.name.class, entity.name.namespace, support.type#62D2DB
constant, constant.language, constant.character#0D9C94
constant.numeric#F5C791
constant.language.boolean#F5C791
string, string.quoted, string.template#F5C791
constant.character.escape, string.regexp, string.regexp punctuation.definition.string.begin#CD9575
comment.block.documentation, string.quoted.docstring#CD9575
meta.preprocessor, entity.name.tag, entity.other.attribute-name#E55C7A
keyword.operator, punctuation, meta.brace#D4D4D6
invalid, invalid.deprecated#E55C7A
markup.warning#DBAC66
markup.heading, markup.heading punctuation.definition.heading#9D81BA
markup.italic, markup.bold, markup.bold markup.italic#9D81BA
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
Kaolin Themes (Emacs Port) by hasit - VS Code Theme