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#ffffff0f
  • activityBar.foreground#cccccc
  • activityBarBadge.background#009835
  • badge.background#ffffff29
  • button.background#009835ca
  • editor.background#252525
  • editor.foreground#cccccca5
  • editor.lineHighlightBackground#577e592b
  • editor.selectionBackground#1443a7a7
  • editor.selectionForeground#ffffff
  • editor.wordHighlightBackground#ffffff14
  • editorBracketHighlight.foreground1#cf9b00
  • editorBracketHighlight.foreground2#63c14c
  • editorBracketHighlight.foreground3#4ea6f3
  • editorBracketHighlight.foreground4#19c9b1
  • editorBracketHighlight.foreground5#8b9dff
  • editorBracketHighlight.foreground6#ff834acb
  • editorError.background#ff000055
  • editorGutter.background#ffffff02
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#c48b29
  • editorSuggestWidget.selectedBackground#208272cc
  • editorWarning.background#ffd00033
  • focusBorder#00ff597a
  • list.activeSelectionBackground#00ff591d
  • list.focusOutline#00fb585e
  • menu.background#363636
  • menu.foreground#c2c2c2
  • menu.selectionBackground#4c5c4f
  • menu.selectionForeground#c3d7c3
  • progressBar.background#00ff8889
  • sideBar.background#252525
  • sideBar.border#ffffff23
  • sideBar.foreground#cccccce8
  • statusBar.background#ffffff1a
  • statusBar.foreground#ffffff90
  • statusBar.noFolderBackground#3e3e3e
  • statusBar.noFolderForeground#6b6b6b
  • tab.activeBackground#ffffff15
  • tab.activeBorder#60a679
  • tab.activeForeground#ccccccd5
  • tab.border#154f263f
  • tab.hoverBackground#36363694
  • tab.inactiveBackground#ffffff06
  • textLink.activeForeground#00ff88bb
  • textLink.foreground#00ff8889
  • titleBar.activeBackground#ffffff00
  • titleBar.activeForeground#ccccccbe
  • titleBar.inactiveBackground#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support#79c0ff
entity.name - markup.heading, meta.export.default, meta.definition.variable#d3c493
comment, punctuation.definition.comment, string.comment#8f8f8ff1
entity.name.type#3dbda3
constant.other.placeholder, constant.character#cf8e48
entity.name.type.enum#4EC9B0italic
enum, variable.other.enummember#acccae
support.function, meta.function-call entity.name.function#c6be9ccbunderline
entity.name.function, meta.function.definition#a9a07dbold
variable.parameter, variable.parameter.function#cccccc
keyword#9eca51
storage, storage.type#e5a765
storage.modifier.package, storage.modifier.import#e6edf3
variable, variable.other#acacac
support.variable#79c0ff
variable.other.constant, storage.modifier.specifier.const#a69fe1bold
support.constant#79c0ff
constant.numeric#7cc6eb
string, string punctuation.section.embedded source#72995b
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198
source.regexp, string.regexp#a5d6ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a5d6ff
string.regexp constant.character.escape#7ee787bold
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffa657
meta.tag#d5cc93
entity.name.tag, support.class.component#9ECA51
meta.property-name#79c0ff
markup.heading#6fbfd3bold
markup.quote#7ee787
markup.italic#e6edf3italic
markup.bold#e6edf3bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
punctuation.section.embedded#ff7b72
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7ee787
markup.changed, punctuation.definition.changed#ffa657
markup.ignored, markup.untracked#161b22
meta.diff.range#d2a8ffbold
meta.diff.header#79c0ff
meta.separator#79c0ffbold
meta.output#79c0ff
constant.other.reference.link, string.other.link#a5d6ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8b949e
brackethighlighter.unmatched#8f0c00italic
support.type.property-name.json#8cc5e4
storage.modifier.c, storage.modifier.cpp#aca7dbbold
storage.type.class.doxygen#c277a9d3bold
Dark+++ by mono-cyte - VS Code Theme