Skip to main content
Coding Theme

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#151320
  • activityBar.foreground#f0f0f7
  • activityBarBadge.background#9a86fd
  • activityBarBadge.foreground#151320
  • button.background#3a3550
  • button.foreground#f0f0f7
  • button.hoverBackground#4a4560
  • dropdown.background#212030
  • dropdown.border#353447
  • dropdown.foreground#f0f0f7
  • editor.background#1a1825
  • editor.findMatchBackground#7aa2f750
  • editor.findMatchHighlightBackground#7aa2f730
  • editor.foreground#f0f0f7
  • editor.inactiveSelectionBackground#2d2b40
  • editor.lineHighlightBackground#212030
  • editor.selectionBackground#3a384a
  • editor.wordHighlightBackground#7aa2f730
  • editorBracketMatch.background#3a384a
  • editorBracketMatch.border#7d7b95
  • editorLineNumber.activeForeground#7d7b95
  • editorLineNumber.foreground#4a4860
  • errorForeground#ff7d95
  • focusBorder#9a86fd
  • foreground#f0f0f7
  • input.background#212030
  • input.border#353447
  • input.foreground#f0f0f7
  • input.placeholderForeground#7d7b95
  • inputOption.activeBorder#9a86fd
  • list.activeSelectionBackground#3a384a
  • list.activeSelectionForeground#f0f0f7
  • list.errorForeground#ff7d95
  • list.focusBackground#3a384a
  • list.highlightForeground#9a86fd
  • list.hoverBackground#2d2b40
  • list.inactiveSelectionBackground#2d2b40
  • list.warningForeground#ffa874
  • panel.background#1a1825
  • panel.border#252337
  • panelTitle.activeForeground#f0f0f7
  • panelTitle.inactiveForeground#7d7b95
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#5a587799
  • scrollbarSlider.background#3a384a66
  • scrollbarSlider.hoverBackground#4a486699
  • selection.background#3a384a
  • sideBar.background#151320
  • sideBar.foreground#c0c0d0
  • sideBarSectionHeader.background#1a1825
  • sideBarTitle.foreground#f0f0f7
  • statusBar.background#151320
  • statusBar.debuggingBackground#9a86fd
  • statusBar.debuggingForeground#151320
  • statusBar.foreground#c0c0d0
  • statusBar.noFolderBackground#151320
  • tab.activeBackground#1a1825
  • tab.activeBorder#9a86fd
  • tab.activeBorderTop#9a86fd
  • tab.activeForeground#f0f0f7
  • tab.border#252337
  • tab.inactiveBackground#151320
  • tab.inactiveForeground#7d7b95
  • terminal.ansiBlack#1a1825
  • terminal.ansiBlue#8ab2ff
  • terminal.ansiBrightBlack#7d7b95
  • terminal.ansiBrightBlue#a5b8ff
  • terminal.ansiBrightCyan#a5dfff
  • terminal.ansiBrightGreen#a1ffe4
  • terminal.ansiBrightMagenta#d2bfff
  • terminal.ansiBrightRed#ff95a9
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb88f
  • terminal.ansiCyan#8dd9ff
  • terminal.ansiGreen#8effd9
  • terminal.ansiMagenta#c5a7ff
  • terminal.ansiRed#ff7d95
  • terminal.ansiWhite#f0f0f7
  • terminal.ansiYellow#ffa874
  • terminal.background#1a1825
  • terminal.foreground#f0f0f7
  • titleBar.activeBackground#151320
  • titleBar.activeForeground#f0f0f7
  • titleBar.inactiveBackground#151320
  • titleBar.inactiveForeground#7d7b95
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#7d7b95
string, string.quoted, string.template, string.interpolated#e2c792
keyword, keyword.control, storage, storage.type, variable.language.this, variable.language.self#c5a7ff
entity.name.function, support.function, variable.function, meta.function-call, support.function.builtin#8ab2ff
entity.name.type, entity.name.class, support.class, support.type, entity.name.type.class#8effd9
variable, variable.other, variable.parameter#f0f0f7
constant.numeric, constant.language#ffa874
keyword.operator, punctuation#c5a7ff
entity.name.tag, meta.tag, tag.decorator, punctuation.definition.tag#ff7d95
entity.other.attribute-name#8effd9
support.type.property-name.css, meta.property-name#8ab2ff
support.constant.property-value#8effd9
support.type.property-name.json#8ab2ff
markup.heading#9a86fd
markup.underline.link#8ab2ff
markup.inserted#8effd9
markup.deleted#ff7d95
markup.changed#ffa874
variable.language#c5a7ffitalic
invalid.deprecated#ff7d95strikethrough
invalid#ff7d95
Eclipse Midnight by Eclipse-Theme - VS Code Theme