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#15171c
  • activityBarBadge.foreground#15171c
  • badge.foreground#15171c
  • debugExceptionWidget.border#15171c
  • editor.background#15171c
  • editor.foreground#cdd3de
  • editor.lineHighlightBackground#65737e55
  • editor.selectionBackground#4f5b66
  • editorBracketMatch.background#15171c
  • editorCursor.foreground#c0c5ce
  • editorGroup.background#15171c
  • editorGroupHeader.noTabsBackground#15171c
  • editorGroupHeader.tabsBackground#15171c
  • editorGutter.background#15171c
  • editorSuggestWidget.background#15171c
  • editorWhitespace.foreground#65737e
  • editorWidget.background#15171c
  • list.activeSelectionForeground#15171c
  • notification.errorForeground#15171c
  • notification.infoForeground#15171c
  • notification.warningForeground#15171c
  • panel.background#15171c
  • peekViewEditor.background#15171c
  • peekViewEditorGutter.background#15171c
  • peekViewResult.background#15171c
  • sideBar.background#15171c
  • tab.inactiveBackground#15171c
  • terminal.background#15171c
  • titleBar.activeBackground#15171c
  • titleBar.border#15171c
  • titleBar.inactiveBackground#15171c
  • walkThrough.embeddedEditorBackground#15171c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cdd3deff
comment, punctuation.definition.comment#65737E
keyword, storage.type, storage.modifier#C5A6C4
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5FB3B3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fa939f
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#6699CC
support.other.variable, string.other.link#F2777A
constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit#F99157
variable.parameter#BCD5FF
storage.type.function.arrow#5FB3B3
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#99C794
meta.class, entity.name.class, entity.name.type.class, entity.other.inherited-class, meta.field.declaration#F9C76B
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FA939F
support.class#F9C76B
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FA939F
variable.language#C5A6C4italic
entity.name.method.js#D8DEE9
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9
entity.other.attribute-name#C5A6C4
markup.inserted#99C794
markup.deleted#FA939F
markup.changed#C5A6C4
string.regexp, meta.group.regexp, string.regexp punctuation.definition.string.begin.js, string.regexp punctuation.definition.string.end.js#FA939F
constant.character.escape#5FB3B3
meta.brace.round, meta.object-literal.key, meta.brace.square#CDD3DE
variable, support.variable, support.variable.dom, support.variable.property, support.variable.property.dom#CDD3DE
support.class.component#FA939F
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#99C794
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6699CCitalic
source.js constant.other.object.key.js string.unquoted.label.js#FA939Fitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6