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#677c1c40
  • diffEditor.removedTextBackground#a93a3250
  • editor.background#002b36
  • editor.findMatchBackground#2b4c56
  • editor.findMatchHighlightBackground#1b414c
  • editor.findRangeHighlightBackground#00212d
  • editor.foreground#839496
  • editor.hoverHighlightBackground#2b4c56
  • editor.inactiveSelectionBackground#1b414c
  • editor.lineHighlightBackground#073642
  • editor.rangeHighlightBackground#073642
  • editor.selectionBackground#2b4c56
  • editor.selectionHighlightBackground#2b4c5680
  • editor.wordHighlightBackground#1b414c
  • editor.wordHighlightStrongBackground#1b414c
  • editorBracketMatch.background#073642
  • editorBracketMatch.border#93a1a1
  • editorCodeLens.foreground#586e75
  • editorCursor.foreground#93a1a1
  • editorError.foreground#dc322f
  • editorGutter.addedBackground#677c1c
  • editorGutter.background#002b36
  • editorGutter.deletedBackground#a93a32
  • editorGutter.modifiedBackground#1872a8
  • editorIndentGuide.background#073642
  • editorInfo.foreground#859900
  • editorLineNumber.foreground#3b5760
  • editorLink.activeForeground#268bd2
  • editorOverviewRuler.addedForeground#677c1c
  • editorOverviewRuler.border#3b5760
  • editorOverviewRuler.commonContentForeground#586e7560
  • editorOverviewRuler.currentContentForeground#85990060
  • editorOverviewRuler.deletedForeground#a93a32
  • editorOverviewRuler.errorForeground#a93a32
  • editorOverviewRuler.findMatchForeground#2b4c56
  • editorOverviewRuler.incomingContentForeground#268bd260
  • editorOverviewRuler.infoForeground#677c1c
  • editorOverviewRuler.modifiedForeground#1872a8
  • editorOverviewRuler.rangeHighlightForeground#073642
  • editorOverviewRuler.selectionHighlightForeground#2b4c56
  • editorOverviewRuler.warningForeground#677c1c
  • editorOverviewRuler.wordHighlightForeground#073642
  • editorOverviewRuler.wordHighlightStrongForeground#2b4c56
  • editorRuler.foreground#3b5760
  • editorWarning.foreground#859900
  • editorWhitespace.foreground#073642
  • merge.commonContentBackground#586e7520
  • merge.commonHeaderBackground#586e7560
  • merge.currentContentBackground#85990020
  • merge.currentHeaderBackground#85990060
  • merge.incomingContentBackground#268bd220
  • merge.incomingHeaderBackground#268bd260
  • peekView.border#268bd2
  • peekViewEditor.background#00212d
  • peekViewEditor.matchHighlightBackground#002b36
  • peekViewEditorGutter.background#00212d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
comment#586e75italic
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#586e75
markup.untracked#586e75
meta.diff#268bd2

Shiki preview

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

Loading...

Solarized Minimal by Jørgen Ibsen - VS Code Theme