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#141414
  • activityBar.foreground#f5f5f5
  • activityBarBadge.background#3a7bd5
  • activityBarBadge.foreground#ffffff
  • badge.background#3a7bd5
  • badge.foreground#ffffff
  • editor.background#111111
  • editor.foreground#e4e4e4
  • editor.inactiveSelectionBackground#1a1a1a55
  • editor.selectionBackground#1f1f1f
  • editor.selectionHighlightBackground#25252555
  • editorBracketMatch.background#1d2a3a55
  • editorBracketMatch.border#3a7bd5
  • editorLineNumber.activeForeground#9a9a9a
  • editorLineNumber.foreground#4d4d4d
  • editorWhitespace.foreground#1a1a1a
  • gitDecoration.addedResourceForeground#8fbdf0
  • gitDecoration.deletedResourceForeground#2a64c6
  • gitDecoration.modifiedResourceForeground#5a9bd8
  • input.background#181818
  • minimap.background#111111
  • panel.background#141414
  • panel.border#1b1b1b
  • scrollbarSlider.activeBackground#4a4a4aaa
  • scrollbarSlider.background#2a2a2a88
  • scrollbarSlider.hoverBackground#3a3a3a88
  • sideBar.background#141414
  • sideBar.foreground#cccccc
  • statusBar.background#141414
  • statusBar.foreground#e4e4e4
  • tab.activeBackground#1f1f1f
  • tab.inactiveBackground#181818
  • titleBar.activeBackground#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7a7a7aitalic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator#3a7bd5bold
entity.name.function, meta.function-call, support.function, variable.function#5a9bd8
entity.name.method, support.function.method, variable.function.constructor#5a9bd8
variable, variable.other, support.variable, entity.name.variable#e4e4e4
variable.parameter, variable.parameter.function, variable.other.readwrite#cfcfcf
string, string.quoted, string.template, string.interpolated#8fbdf0
constant.numeric, constant.language, constant.numeric.float, constant.numeric.hex#5a9bd8
entity.name.type, support.type, storage.type.class, entity.name.class, support.class#e4e4e4
tag, entity.name.tag, markup.heading, entity.name.section#3a7bd5bold
attribute.name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#9aa9f5
support.constant.property-value.css, support.type.property-name.css#78d1e1
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.jsx, punctuation.definition.string.end.jsx#8fbdf0
keyword.operator.jsx, meta.jsx.children#5a9bd8