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#21252b
  • editor.background#ffffff
  • editor.foreground#1a1a1a
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#c2e8f4
  • editorCursor.foreground#00bbec
  • editorWhitespace.foreground#e4e4e4
  • statusBar.background#21252b
  • statusBar.debuggingBackground#21252b
  • statusBar.foreground#396bb5
  • statusBar.noFolderBackground#21252b
  • terminal.ansiBlack#d5d6dd
  • terminal.ansiBlue#275fe4
  • terminal.ansiBrightBlack#e4e5ed
  • terminal.ansiBrightBlue#0099e1
  • terminal.ansiBrightCyan#6d93bb
  • terminal.ansiBrightGreen#3cbc66
  • terminal.ansiBrightMagenta#ce33c0
  • terminal.ansiBrightRed#ff6480
  • terminal.ansiBrightWhite#26272d
  • terminal.ansiBrightYellow#c5a332
  • terminal.ansiCyan#27618d
  • terminal.ansiGreen#23974a
  • terminal.ansiMagenta#823ff1
  • terminal.ansiRed#d52753
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#df631c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#96928f
keyword.operator#398BC9
string#bd7111
constant.numeric#398BC9
support.constant, constant.language#a5319c
variable.other.constant.property, constant.character, constant.other#398BC9
variable#333333
variable.language.this#398bc9
keyword#7B1FA2
storage#AF33A6
storage.type#7B1FA2
storage.type.class.jsdoc#8a8a8a
entity.name.class#82776c
comment.entity.name.class#8c7c76
variable.other.jsdoc#8a8a8a
comment.block.documentation
entity.other.inherited-class#CB4718
entity.name.function#3f831e
comment.entity.name.function#6c7b65
variable.parameter#398bc9
support.function#398BC9
support.constant#398BC9
support.class#4e94ce
support.type#3F831E
support.other.variable#CB4718
invalid#FF5722
invalid.deprecated#FF8A65
markup.heading#CB4718
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#398BC9
entity.other.attribute-name#AF33A6
string.quoted.single.html, string.quoted.double.html, string.html#3F831E
meta.selector.css, entity.other.attribute-name.id#AF33A6
storage.modifier.ts#C07F00
cast.expr.ts#398BC9
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
text.html.markdown.journal.task.open.bullet#FFFF00
text.html.markdown.journal.task.open.marker#FFFF00
text.html.markdown.journal.task.open.keyworditalic
text.html.markdown.journal.task.open.text
text.html.markdown.journal.task.completed.keyworditalic
text.html.markdown.journal.task.completed.marker#AAAAAA
text.html.markdown.journal.task.completed.text#AAAAAA
text.html.markdown.journal.memo.keyworditalic
text.html.markdown.journal.link.keyworditalic

Shiki preview

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

Loading...