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#ff4d4d
  • activityBarBadge.foreground#ffffff
  • badge.background#ff4d4d
  • badge.foreground#ffffff
  • editor.background#111111
  • editor.foreground#e4e4e4
  • editor.inactiveSelectionBackground#1a1a1a55
  • editor.selectionBackground#1f1f1f
  • editor.selectionHighlightBackground#25252555
  • editorBracketMatch.background#33000033
  • editorBracketMatch.border#ff4d4d
  • editorLineNumber.activeForeground#a3a3a3
  • editorLineNumber.foreground#4d4d4d
  • editorWhitespace.foreground#1a1a1a
  • gitDecoration.addedResourceForeground#66ff99
  • gitDecoration.deletedResourceForeground#ff6666
  • gitDecoration.modifiedResourceForeground#ff9966
  • input.background#181818
  • minimap.background#111111
  • panel.background#141414
  • panel.border#1c1c1c
  • 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#777777italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator#ff4d4dbold
entity.name.function, meta.function-call, support.function, variable.function#ff704d
entity.name.method, support.function.method, variable.function.constructor#ff704d
variable, variable.other, support.variable, entity.name.variable#e4e4e4
variable.parameter, variable.parameter.function, variable.other.readwrite#cccccc
string, string.quoted, string.template, string.interpolated#ff9966
constant.numeric, constant.language, constant.numeric.float, constant.numeric.hex#ff8080
entity.name.type, support.type, storage.type.class, entity.name.class, support.class#e4e4e4
tag, entity.name.tag, markup.heading, entity.name.section#ff4d4dbold
attribute.name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#ffd966
support.constant.property-value.css, support.type.property-name.css#99e2b4
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.jsx, punctuation.definition.string.end.jsx#ff9966
keyword.operator.jsx, meta.jsx.children#ff704d
support.function.builtin.css, support.constant.property-value.css, support.type.property-name.css#99e2b4