Skip to main content
Coding Theme

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.

  • diffEditor.insertedTextBackground#000088
  • diffEditor.removedTextBackground#880000
  • editor.background#00ff00
  • editor.findMatchBackground#444444
  • editor.findMatchHighlightBackground#997722
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#00000000
  • editor.inactiveSelectionBackground#330099
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#330099
  • editor.selectionHighlightBackground#226699
  • editor.wordHighlightBackground#444444
  • editor.wordHighlightStrongBackground#226699
  • editorBracketMatch.background#992255
  • editorBracketMatch.border#992255
  • editorCursor.background#ff0000
  • editorCursor.foreground#ff0000
  • editorOverviewRuler.addedForeground#00000000
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#222222
  • editorOverviewRuler.currentContentForeground#880000
  • editorOverviewRuler.deletedForeground#00000000
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#000088
  • editorOverviewRuler.modifiedForeground#00000000
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorUnnecessaryCode.opacity#ffffffff
  • extensionButton.prominentBackground#ff0000
  • extensionButton.prominentHoverBackground#bb0000
  • foreground#ffffff
  • merge.commonContentBackground#666666
  • merge.commonHeaderBackground#222222
  • merge.currentContentBackground#880000
  • merge.currentHeaderBackground#880000
  • merge.incomingContentBackground#000088
  • merge.incomingHeaderBackground#000088
  • panel.background#111111
  • scrollbar.shadow#00000000
  • statusBarItem.activeBackground#0000ff
  • statusBarItem.hoverBackground#0000bb
  • statusBarItem.prominentBackground#ff0000
  • statusBarItem.prominentHoverBackground#bb0000
  • tab.activeBackground#555555
  • terminal.background#000000
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment#995599
string#cc77ff
constant.numeric#9999ff
constant.language#9999ff
constant.character, constant.other#9999ff
variable#ffffff
keyword#ff99aa
storage#ff99aa
storage.type#00aaff
entity.name.type, entity.name.class#88ddff
entity.other.inherited-class#88ddff
entity.name.function#88ddff
variable.parameter#ffaaff
entity.name.tag#ff99aa
entity.other.attribute-name#88ddff
support.function#00aaff
support.constant#00aaff
support.type, support.class#00aaff
support.other.variable
invalid#ffffff
invalid.deprecated#ffffff
meta.structure.dictionary.json string.quoted.double.json#cc77ff
meta.diff, meta.diff.header#550055
markup.deleted#ff99aa
markup.inserted#88ddff
markup.changed#cc77ff
constant.numeric.line-number.find-in-files - match#9999ffA0
entity.name.filename.find-in-files#cc77ff
markup.bold.markdown#cc77ffbold
markup.inline.raw.markdown, markup.raw.block.markdown, markup.fenced_code.block.markdown#ffaaff
markup.italic.markdown#88ddffitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#00aaff
markup.heading.markdown#ff99aabold
meta.link.inline.markdown#9999ff
meta.image.inline.markdown#9999ff
meta.separator.markdown#550055
markup.quote.markdown#9999ff