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.border#222
  • activityBar.foreground#888
  • activityBarBadge.background#719100
  • badge.background#719100
  • editor.background#252029
  • editor.foreground#af9176
  • editor.invisibles#444
  • editor.lineHighlight#3D3D3D
  • editor.selection#6B6B6BBF
  • editorIndentGuide.background#404040
  • editorRuler.foreground#333333
  • gitDecoration.ignoredResourceForeground#555
  • sideBar.border#333333
  • sideBar.foreground#888888
  • statusBar.background#333
  • statusBar.border#222
  • statusBar.foreground#888
  • tab.activeForeground#999
  • tab.inactiveForeground#666
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#57c7ff
  • terminal.ansiBrightCyan#9aedfe
  • terminal.ansiBrightGreen#5af78e
  • terminal.ansiBrightMagenta#ff6ac1
  • terminal.ansiBrightRed#ff5c57
  • terminal.ansiBrightWhite#eff0eb
  • terminal.ansiBrightYellow#f3f99d
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#5af78e
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff5c57
  • terminal.ansiWhite#f1f1f0
  • terminal.ansiYellow#f3f99d
  • terminal.foreground#eff0eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#777B7D
string#E47D5C
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#935541
constant.numeric#9268AD
constant#9268AD
keyword.control.flow.js#ffa726
variable.language.this, variable.language.super#798
constant.character, constant.other#3284D1
variable#DB893D
keyword#2E9E8D
storage#C7A004
storage.type#CC6402
entity.name.class, meta.class entity.name.type.class#E8B600
entity.other.inherited-class, support, new.expr entity.name.type#CBB77A
meta.definition.function, storage.type.function.arrow, meta.method.declaration meta.definition.method entity.name.function, meta.definition.property entity.name.function, meta.definition.variable entity.name.function#E8B600
meta.function-call, meta.function-call support.function#af9176
variable.parameter
entity.name.tag#B5B335
entity.name.tag support.class.component
entity.other.attribute-name, meta.field.declaration variable.object.property meta.definition.property, meta.object-literal.key#e76f6f
support.function#B3A924
support.constant#AD8329
support.type, support.class#B5B335
support.other.variable#9EA344
invalid#BDBDBB
invalid.deprecated#F8F8F0
meta.brace.round#96958F
meta.brace.square#6A8068
meta.brace.curly, punctuation#7E866B
punctuation.section.embedded.begin, punctuation.section.embedded.end#63857B
punctuation.terminator#7A7348
punctuation.definition.parameters.end, punctuation.definition.parameters.begin, meta.method.declaration meta.block punctuation.definition.block, meta.class punctuation.definition.block#C7B87F
punctuation.definition.tag#787564
meta.delimiter, punctuation.accessor#8EA38C
storage.modifier.access-control#19856C

Shiki preview

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

Loading...