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.

  • diffEditor.insertedTextBackground#0e4425
  • diffEditor.removedTextBackground#3c1e26
  • editor.background#212121
  • editor.findMatchBackground#524370
  • editor.findMatchBorder#f4dd00
  • editor.findMatchHighlightBackground#524370
  • editor.findRangeHighlightBackground#524370
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#ffffff0c
  • editor.inactiveSelectionBackground#ffffff0c
  • editor.lineHighlightBackground#0000001a
  • editor.rangeHighlightBackground#ffc76819
  • editor.selectionBackground#ffffff19
  • editor.wordHighlightBackground#3d5061
  • editor.wordHighlightStrongBackground#1775c7
  • editorCursor.foreground#f4dd00
  • editorIndentGuide.background#242424
  • editorOverviewRuler.findMatchForeground#ffffff
  • editorWhitespace.foreground#2b2b2b
  • gitDecoration.conflictingResourceForeground#f200ff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#797676
  • gitDecoration.modifiedResourceForeground#f4dd00
  • gitDecoration.untrackedResourceForeground#5d9eff
  • peekViewEditor.matchHighlightBackground#628a9e32
  • statusBar.background#0c0c0c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00aad6
  • terminal.ansiBrightBlack#e3c178
  • terminal.ansiBrightBlue#00aad6
  • terminal.ansiBrightCyan#8aced6
  • terminal.ansiBrightGreen#65a983
  • terminal.ansiBrightMagenta#d782d2
  • terminal.ansiBrightRed#ff4a3e
  • terminal.ansiBrightWhite#c8d5d6
  • terminal.ansiBrightYellow#d6b800
  • terminal.ansiCyan#8aced6
  • terminal.ansiGreen#65a983
  • terminal.ansiMagenta#d782d2
  • terminal.ansiRed#ed5f55
  • terminal.ansiWhite#c8d5d6
  • terminal.ansiYellow#d6b800
  • terminal.background#262621
  • terminal.foreground#bdcdcd
  • textPreformat.foreground#71bef9
  • titleBar.activeBackground#0c0c0c
  • titleBar.inactiveBackground#2b2b2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5A5A5A
string#71bef9
constant.numeric#F77669
constant.language#F77669
constant.character, constant.other#F77669
variable#B2CCD6
keyword#C792EA
storage#C792EA
storage.type#C792EA
entity.name.class#FFCB6B
entity.other.inherited-class#91B859
entity.name.function#82AAFF
variable.parameter
entity.name.tag#c081b6
entity.other.attribute-name#FFCB6B
support.function#82AAFF
support.constant#89DDFF
support.type, support.class#FFCB6B
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
markup.quote#b5c2df
markup.bold#c03d96bold
markup.italic#ba7db0italic
markup.inline.raw#7DC9E3
markup.heading.setext#6796e6
meta.toc-list.id, meta.attribute-with-value.id punctuation.definition.string.begin.html, meta.attribute-with-value.id punctuation.definition.string.end.html#7DC9E3
meta.property-name, support.type.property-name#80CBC4
keyword.other.unit#FFEB95
variable.language.this.js#FFCB6B
support.type#FFEB95
variable.css#B7E1DF
meta.selector#FFCB6B
support.type.property-name.variable#CEF2EF
string.quoted#B0CD89
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
comment#94b9d8
keyword - keyword.operator, keyword.control, storage, storage.type#c081b6
constant.numeric#e343b0
entity.name.type#e343b0
entity.name.class#e343b0
support.type#e343b0
support.class#e343b0
entity.name.function#71bef9
support.function#71bef9
variable#6c98f7
entity.name.variable#6c98f7
Material Minimal Dark by liquori - VS Code Theme