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.

  • diffEditor.insertedTextBackground#00be0021
  • diffEditor.removedTextBackground#ff0d001a
  • editor.background#f9f9fb
  • editor.findMatchBackground#c8e6c9
  • editor.findMatchHighlightBackground#ffc1072a
  • editor.findRangeHighlightBackground#607d8b00
  • editor.findRangeHighlightBorder#33333331
  • editor.foreground#1a1a1a
  • editor.hoverHighlightBackground#9e9e9e34
  • editor.lineHighlightBackground#2b90af28
  • editor.selectionBackground#d4fabf
  • editor.selectionHighlightBackground#f4fadcaf
  • editor.wordHighlightBackground#5eff0034
  • editor.wordHighlightStrongBackground#f97c001e
  • editorCursor.foreground#1976d2
  • editorError.foreground#c91b00
  • editorGutter.addedBackground#43a047
  • editorGutter.deletedBackground#c91b00
  • editorGutter.modifiedBackground#be8500
  • editorIndentGuide.activeBackground#9e9e9e4c
  • editorIndentGuide.background#9e9e9e1c
  • editorInfo.foreground#43a047
  • editorLink.activeForeground#1976d2
  • editorRuler.foreground#9e9e9e1c
  • editorWarning.foreground#be8500
  • editorWhitespace.foreground#1a1a1a33
  • gitDecoration.conflictingResourceForeground#b21caa
  • gitDecoration.deletedResourceForeground#c91b00
  • gitDecoration.ignoredResourceForeground#1a1a1a3b
  • gitDecoration.modifiedResourceForeground#f97d00
  • gitDecoration.untrackedResourceForeground#00c5c7
  • list.focusHighlightForeground#9dddff
  • statusBar.background#404054
  • statusBar.foreground#f9f9fb
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#0361d3
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#0361d3
  • terminal.ansiBrightCyan#00c5c7
  • terminal.ansiBrightGreen#00a200
  • terminal.ansiBrightMagenta#b21caa
  • terminal.ansiBrightRed#c91b00
  • terminal.ansiBrightWhite#c7c7c7
  • terminal.ansiBrightYellow#f97d00
  • terminal.ansiCyan#00c5c7
  • terminal.ansiGreen#00a200
  • terminal.ansiMagenta#b21caa
  • terminal.ansiRed#c91b00
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f97d00
  • terminal.selectionBackground#5eff0034
  • terminalCursor.foreground#1a1a1a
  • titleBar.activeBackground#f9f9fb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#1a1a1a
punctuation, punctuation.definition.template-expression#b0bec5
keyword.operator#1976d2
comment, keyword.operator.type, meta.type.annotation, meta.return.type, storage.type.class.jsdoc, entity.name.type.instance.jsdoc#78909c
punctuation.definition.variable#78909c
storage#b21caa
meta.object-literal.key, meta.object.member#5c6bc0
storage.type#b21caa
string, punctuation.definition.string#ef6c00
storage.modifier#ef6c00
constant.numeric#1976d2
support.constant, constant.language#c62828
variable.other.constant.property, constant.character, constant.other#1976d2
variable, punctuation.accessor#1a1a1a
variable.language.this#1976d2
keyword#b21caa
storage.type.class.jsdoc#b21caa
support.type.primitive, meta.type#96928f
comment.entity.name.class#8c7c76
variable.other.jsdoc#1976d2
comment.block.documentation
meta.class, meta.var.expr, meta.interface#804307
entity.name.function#388e3c
, storage.type.function#388e3c
comment.entity.name.function#388e3c
variable.parameter#1976d2
support.function#1976d2
support.constant#1976d2
support.class#4e94ce
support.type#388e3c
support.other.variable, keyword.operator.optional#CB4718
invalid#FF5722
invalid.deprecated#FF8A65
markup.heading#CB4718
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#1976d2
entity.other.attribute-name#b21caa
string.quoted.single.html, string.quoted.double.html, string.html#388e3c
meta.selector.css, entity.other.attribute-name.id#b21caa
cast.expr.ts#1976d2
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
meta.diff#cd9731italic
meta.diff.index#cd3131
meta.diff.range#1976d2
meta.diff.header#cd9731
markup.deleted#cd3131
markup.changed#cd9731
markup.inserted#388e3c