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.

  • activityBar.background#202428
  • activityBar.foreground#b3b3b3
  • editor.background#202428
  • editor.foreground#b3b3b3
  • editor.lineHighlightBackground#292e33
  • editor.selectionBackground#333940
  • sideBar.background#1c1f21
  • sideBar.foreground#b3b3b3
  • statusBar.background#1c1f21
  • statusBar.debuggingBackground#1c1f21
  • statusBar.foreground#b3b3b3
  • statusBar.noFolderBackground#1c1f21
  • terminal.ansiBlack#5d6a83
  • terminal.ansiBlue#8294c9
  • terminal.ansiBrightBlack#5d6a83
  • terminal.ansiBrightBlue#8294c9
  • terminal.ansiBrightCyan#72b2b8
  • terminal.ansiBrightGreen#78ab81
  • terminal.ansiBrightMagenta#aa83aa
  • terminal.ansiBrightRed#c45f5f
  • terminal.ansiBrightWhite#b3b3b3
  • terminal.ansiBrightYellow#b88e2e
  • terminal.ansiCyan#72b2b8
  • terminal.ansiGreen#78ab81
  • terminal.ansiMagenta#aa83aa
  • terminal.ansiRed#c45f5f
  • terminal.ansiWhite#b3b3b3
  • terminal.ansiYellow#b88e2e
  • terminal.foreground#b3b3b3
  • terminalCursor.foreground#b3b3b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b3b3b3
constant.language.import-export-all, entity.name.tag.yaml, entity.name.type.module, meta.jsx, support.class, support.constant, support.type.property-name, support.variable, variable#b3b3b3
comment, markup.underline.link, meta.brace, meta.tag, meta.jsx keyword.operator.assignment.js, punctuation#5d6a83
constant.language, entity.name.tag, keyword, markup.fenced_code, markup.inline, storage, support.class.component, support.constant.property-value.css, support.type.primitive, variable.language#8294c9
constant.language.infinity, constant.language.nan, constant.numeric, entity.other, keyword.operator.quantifier.regexp#aa83aa
constant.other.reference.link, string#78ab81
constant.character.escape, constant.other.character-class, keyword.control.anchor#b88e2e
entity.name.function, entity.name.type, entity.other.inherited-class, markup.quote, meta.function-call variable.language.super, meta.class storage.type.js, support.class.builtin, support.class.component, support.function#72b2b8
markup.boldbold
markup.italicitalic
markup.heading, meta.export string, meta.import stringunderline
meta.export punctuation, meta.import punctuation