Skip to main content
CodingTheme

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#a4b04640
  • diffEditor.removedTextBackground#eb6d5850
  • editor.background#fdf6e3
  • editor.findMatchBackground#cccdc1
  • editor.findMatchHighlightBackground#dddacb
  • editor.findRangeHighlightBackground#fffeea
  • editor.foreground#657b83
  • editor.hoverHighlightBackground#cccdc1
  • editor.inactiveSelectionBackground#dddacb
  • editor.lineHighlightBackground#eee8d5
  • editor.rangeHighlightBackground#eee8d5
  • editor.selectionBackground#cccdc1
  • editor.selectionHighlightBackground#cccdc180
  • editor.wordHighlightBackground#dddacb
  • editor.wordHighlightStrongBackground#dddacb
  • editorBracketMatch.background#eee8d5
  • editorBracketMatch.border#586e75
  • editorCodeLens.foreground#93a1a1
  • editorCursor.foreground#586e75
  • editorError.foreground#dc322f
  • editorGutter.addedBackground#a4b046
  • editorGutter.background#fdf6e3
  • editorGutter.deletedBackground#eb6d58
  • editorGutter.modifiedBackground#71a5d7
  • editorIndentGuide.background#eee8d5
  • editorInfo.foreground#859900
  • editorLineNumber.foreground#bbc0b7
  • editorLink.activeForeground#268bd2
  • editorOverviewRuler.addedForeground#a4b046
  • editorOverviewRuler.border#bbc0b7
  • editorOverviewRuler.commonContentForeground#93a1a160
  • editorOverviewRuler.currentContentForeground#85990060
  • editorOverviewRuler.deletedForeground#eb6d58
  • editorOverviewRuler.errorForeground#eb6d58
  • editorOverviewRuler.findMatchForeground#cccdc1
  • editorOverviewRuler.incomingContentForeground#268bd260
  • editorOverviewRuler.infoForeground#a4b046
  • editorOverviewRuler.modifiedForeground#71a5d7
  • editorOverviewRuler.rangeHighlightForeground#eee8d5
  • editorOverviewRuler.selectionHighlightForeground#cccdc1
  • editorOverviewRuler.warningForeground#a4b046
  • editorOverviewRuler.wordHighlightForeground#eee8d5
  • editorOverviewRuler.wordHighlightStrongForeground#cccdc1
  • editorRuler.foreground#bbc0b7
  • editorWarning.foreground#859900
  • editorWhitespace.foreground#eee8d5
  • merge.commonContentBackground#93a1a120
  • merge.commonHeaderBackground#93a1a160
  • merge.currentContentBackground#85990020
  • merge.currentHeaderBackground#85990060
  • merge.incomingContentBackground#268bd220
  • merge.incomingHeaderBackground#268bd260
  • peekView.border#268bd2
  • peekViewEditor.background#fffeea
  • peekViewEditor.matchHighlightBackground#fdf6e3
  • peekViewEditorGutter.background#fffeea

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#657b83
comment#93a1a1italic
constant, support.constant#2aa198
entity#268bd2
invalid#dc322f
invalid.deprecated#d33682
keyword#859900
storage#b58900
string#2aa198
support#b58900
variable#268bd2
markup.underline#6c71c4
markup.boldbold
markup.heading#cb4b16
markup.italicitalic
markup.quote, markup.raw#2aa198
markup.deleted#dc322f
markup.inserted#859900
markup.changed#b58900
markup.ignored#93a1a1
markup.untracked#93a1a1
meta.diff#268bd2

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...