Skip to main content
CodingTheme

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.activeBorder#ed2323
  • activityBar.activeFocusBorder#FF0000
  • activityBar.background#0a0a0a
  • activityBar.border#ed2323
  • activityBar.foreground#ed2323
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#ed2323
  • activityBarBadge.foreground#fbe6e5
  • button.background#505050
  • button.foreground#fbe6e5
  • editor.background#0a0a0a
  • editor.findMatchBackground#6e5e5e
  • editor.findMatchHighlightBackground#6e5e5e
  • editor.foreground#fbe6e5
  • editor.lineHighlightBackground#321c1c
  • editor.selectionBackground#ed232355
  • editor.selectionHighlightBackground#ed232340
  • editorBracketHighlight.foreground1#ed2323
  • editorBracketHighlight.foreground2#ed2323
  • editorBracketHighlight.foreground3#ed2323
  • editorBracketHighlight.foreground4#ed2323
  • editorBracketHighlight.foreground5#ed2323
  • editorBracketHighlight.foreground6#ed2323
  • editorCursor.foreground#ed2323
  • editorError.foreground#f99d52
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorHoverWidget.background#383030
  • editorIndentGuide.activeBackground#ed2323
  • editorIndentGuide.background#505050
  • editorLineNumber.activeForeground#ed2323
  • editorLineNumber.foreground#505050
  • editorWarning.foreground#f99d52
  • editorWhitespace.foreground#f99d52
  • focusBorder#ed2323
  • gitDecoration.addedResourceForeground#20d420
  • gitDecoration.deletedResourceForeground#ed2323
  • gitDecoration.modifiedResourceForeground#e6bf14
  • icon.foreground#ed2323
  • input.background#505050
  • input.foreground#fbe6e5
  • list.activeSelectionBackground#321c1c
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#cfd5d0
  • list.deemphasizedForeground#ed2323
  • list.dropBackground#0c0c0c
  • list.errorForeground#b40000
  • list.filterMatchBackground#420000
  • list.focusAndSelectionOutline#e2e3e2
  • list.focusBackground#0c0c0c
  • list.focusForeground#ed2323
  • list.focusOutline#ed2323
  • list.highlightForeground#ed2323
  • list.hoverBackground#505050
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#080808
  • list.inactiveSelectionBackground#321c1c
  • list.inactiveSelectionForeground#cfd5d0
  • list.invalidItemForeground#b40000
  • list.warningForeground#cccc00
  • listFilterWidget.background#0a0a0a
  • listFilterWidget.noMatchesOutline#003300
  • listFilterWidget.outline#ed2323
  • menubar.selectionBackground#ed2323
  • menubar.selectionForeground#fbe6e5
  • notifications.background#ed2323
  • notifications.foreground#fbe6e5
  • panel.border#ed2323
  • panelSectionHeader.foreground#ed2323
  • panelTitle.activeBorder#ed2323
  • panelTitle.activeForeground#ed2323
  • panelTitle.inactiveForeground#ffffff
  • scrollbarSlider.activeBackground#505050
  • scrollbarSlider.background#ed2323
  • scrollbarSlider.hoverBackground#fbe6e5
  • sideBar.background#0a0a0a
  • sideBar.border#ed2323
  • sideBar.dropBackground#0a0a0a
  • sideBar.foreground#fbe6e5
  • sideBarSectionHeader.background#321c1c
  • sideBarSectionHeader.border#ed2323
  • sideBarSectionHeader.foreground#ed2323
  • sideBarTitle.foreground#ed2323
  • statusBar.background#ed2323
  • statusBar.debuggingBackground#1f1f1f
  • statusBar.debuggingForeground#f44336
  • statusBar.foreground#fbe6e5
  • statusBar.noFolderBackground#0a0a0a
  • tab.activeBackground#321c1c
  • tab.activeForeground#ed2323
  • tab.border#332538
  • tab.hoverBackground#505050
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#fbe6e5
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#65af50
  • terminal.ansiBrightBlack#101010
  • terminal.ansiBrightBlue#65af50
  • terminal.ansiBrightCyan#65af50
  • terminal.ansiBrightGreen#65af50
  • terminal.ansiBrightMagenta#e07a3f
  • terminal.ansiBrightRed#f93431
  • terminal.ansiBrightWhite#fbe6e5
  • terminal.ansiBrightYellow#e07a3f
  • terminal.ansiCyan#65af50
  • terminal.ansiGreen#65af50
  • terminal.ansiMagenta#e07a3f
  • terminal.ansiRed#e6122b
  • terminal.ansiWhite#f93431
  • terminal.ansiYellow#e07a3f
  • terminal.background#0a0a0a
  • terminal.border#ed2323
  • terminal.foreground#fbe6e5
  • terminal.selectionBackground#ed232355
  • terminalCommandDecoration.defaultBackground#6ee974
  • terminalCommandDecoration.errorBackground#6ee974
  • terminalCommandDecoration.successBackground#6ee974
  • terminalCursor.foreground#f93431
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#33ce52italic
keyword, storage.type, storage.modifier#ed2323bold
constant.numeric, constant.language, constant.other.color#7e7b7b
string, markup.changed#ffffff
variable#ed2323
variable.other#ed2323
entity.name.function, support.function, variable.function, entity.name.method#ed2323
variable.parameter#7e7b7b
entity.name.class, support.class#f99d52
entity.name.type#f99d52
entity.name.namespace#f99d52
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator, keyword.other.template, keyword.other.substitution#7e7b7b
invalid, invalid.illegal#b8cd1dunderline
markup.inserted#f99d52
markup.deleted#ed2323
entity.other.attribute-name, entity.other.attribute-name.class, text.html.basic entity.other.attribute-name#f99d52italic
string.regexp#fbe6e5
constant.character.escape#f99d52
source.json support.type.property-name.json#f99d52
markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#f99d52bold
markup.bold#ed2323bold
markup.italic#ea8533italic
markup.quote#505050italic
string.other.link.title.markdown, constant.other.reference.link.markdown#f99d52underline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Neon Genesis Evangelion Themes by engr - VS Code Theme