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#0e1217
  • activityBar.foreground#dbe2ea
  • badge.background#1e2a3f
  • badge.foreground#dbe2ea
  • diffEditor.insertedTextBackground#0e2f1f80
  • diffEditor.removedTextBackground#3a142080
  • dropdown.background#121722
  • dropdown.foreground#dbe2ea
  • editor.background#0b0e11
  • editor.foreground#dbe2ea
  • editor.inactiveSelectionBackground#121a24
  • editor.lineHighlightBackground#10151b
  • editor.selectionBackground#17202b
  • editor.selectionHighlightBackground#22304188
  • editorBracketHighlight.foreground1#b4c6ff
  • editorBracketHighlight.foreground2#8bd5c2
  • editorBracketHighlight.foreground3#ffd49a
  • editorBracketHighlight.foreground4#f2a8c9
  • editorBracketHighlight.foreground5#a1e4ff
  • editorBracketHighlight.foreground6#c8a5ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
  • editorBracketMatch.background#1b2a40
  • editorBracketMatch.border#1b2a40
  • editorCursor.foreground#e6eeff
  • editorGutter.background#0b0e11
  • editorIndentGuide.activeBackground#253244
  • editorIndentGuide.background#1a232e
  • editorLineNumber.activeForeground#9aa8ba
  • editorLineNumber.foreground#3a4556
  • editorSuggestWidget.background#111723
  • editorSuggestWidget.foreground#dbe2ea
  • editorSuggestWidget.selectedBackground#1a2740
  • editorWhitespace.foreground#273140
  • editorWidget.background#111723
  • gitDecoration.addedResourceForeground#8bd5c2
  • gitDecoration.deletedResourceForeground#f08f8f
  • gitDecoration.modifiedResourceForeground#8ab4f8
  • gitDecoration.untrackedResourceForeground#a1e4ff
  • list.activeSelectionBackground#151e2a
  • list.focusBackground#142034
  • list.hoverBackground#101822
  • list.inactiveSelectionBackground#111822
  • panel.background#0e1217
  • scrollbarSlider.activeBackground#2a3a5299
  • scrollbarSlider.background#2a3a5255
  • scrollbarSlider.hoverBackground#2a3a5277
  • sideBar.background#0e1217
  • sideBar.foreground#aab3c0
  • statusBar.background#0e1217
  • statusBar.foreground#bfc7d4
  • tab.activeBackground#121722
  • tab.activeForeground#dbe2ea
  • tab.border#0e1217
  • tab.inactiveBackground#0b0e11
  • tab.inactiveForeground#98a3b0
  • terminal.background#0b0e11
  • terminal.foreground#dbe2ea
  • titleBar.activeBackground#0e1217
  • titleBar.activeForeground#dbe2ea

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f7886italic
keyword, storage.type, storage.modifier#c6a5ff
entity.name.function, support.function, variable.function#8ab4f8
entity.name.method#9cc6ff
variable, meta.definition.variable.name#e8edf5
variable.parameter#ffd3a1
variable.other.property, meta.object-literal.key#80cbc4
entity.name.type, support.type, entity.other.inherited-class#7fd2e3
entity.name.class, support.class#a2b6ffbold
string, punctuation.definition.string#b7e4a4
string.regexp, constant.other.regex#ffd166
constant.numeric, constant.character.numeric#f8b585
constant.language, support.constant#f2a8c9
constant.other.symbol#f6c177
keyword.operator, storage.operator#9aa7b5
punctuation, meta.brace, meta.delimiter#8b97a6
markup.heading#a1c2ffbold
markup.boldbold
markup.italicitalic
markup.inline.raw#ffd49a
markup.quote#9aa7b5
Nocturne Spectrum (Ashish Verma) by ashish-verma - VS Code Theme