Skip to main content
Coding Theme

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#272a38
  • activityBar.foreground#7b8094
  • activityBarBadge.background#ea84b2
  • activityBarBadge.foreground#272a38
  • contrastBorder#282A36
  • editor.background#232631
  • editor.foreground#d4d4d4
  • editor.selectionBackground#2e313e
  • editorGroupHeader.tabsBackground#1b1d25
  • editorGutter.addedBackground#81bd9a
  • editorGutter.deletedBackground#EE7E71
  • editorGutter.modifiedBackground#778dd0
  • editorLineNumber.foreground#4f5671
  • editorOverviewRuler.addedForeground#81bd9a
  • editorOverviewRuler.deletedForeground#EE7E71
  • editorOverviewRuler.modifiedForeground#778dd0
  • errorForeground#EE7E71
  • focusBorder#82a7e848
  • foreground#575d73
  • gitDecoration.deletedResourceForeground#EE7E71
  • gitDecoration.modifiedResourceForeground#778dd0
  • input.background#1b1d25
  • input.foreground#cacdd8
  • input.placeholderForeground#525561
  • list.activeSelectionBackground#282d3c
  • list.errorForeground#e64f4f
  • list.hoverBackground#252835
  • list.inactiveSelectionBackground#323644
  • list.inactiveSelectionForeground#FFFFFF
  • list.warningForeground#ffb93a
  • sideBar.background#1d2029
  • sideBar.border#1c1f25
  • sideBarSectionHeader.background#262935
  • sideBarSectionHeader.foreground#7d829a
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1b1d25
  • tab.activeBackground#262935
  • tab.activeBorder#778dd0
  • tab.border#15171d
  • tab.inactiveBackground#1d2029
  • titleBar.activeBackground#181a22
  • titleBar.activeForeground#757a91
  • titleBar.border#181a22
  • titleBar.inactiveBackground#1b1d25
  • titleBar.inactiveForeground#757a91

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, variable.other.readwrite, variable.other.object.property.js, meta.block.js, meta.function.expression.js, text.html.basic, meta.object-literal.key, meta.object.member, meta.objectliteral, variable.other.readwrite.js, support.type.property-name.css#bdc4dc
keyword, storage.type, storage.type.function, storage.type.class, entity.other.attribute-name.class.css, support.type#6f798c
punctuation.definition, punctuation.parenthesis, punctuation.section, punctuation.separator, variable.language, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, meta.brace.square, meta.brace.round, meta.object.member#6a7489
comment, punctuation.definition.comment, storage.type.class.po#404761
entity.name.function, entity.name.type.class, entity.name.section.group-title#ea84b2
meta.function-call, variable.other.object.property, variable.other.property, string.quoted.double.html, string.quoted.single.html, entity.name.type, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#81bd9a
variable.parameter, meta.parameters, meta.function-call.arguments, entity.other.inherited-class, entity.other.attribute-name, variable.language.arguments, entity.name.tag.css, entity.name.type.module, variable.other.object#778dd0
variable.language.special, variable.language.special.self, variable.language.this, variable.legacy.builtin, support.class.builtin, constant.language, constant.character.format.placeholder.other#a786da
constant, entity.name.tag, punctuation.definition.tag, support.constant, punctuation.definition.constant, support.variable.dom, support.variable.property, constant.other.caps#a786da
string.quoted, punctuation.definition.string#bec191
constant.numeric#85E1CF
support.type.exception#c7807b
entity.name.function.decorator#778dd0
void by Praseetha KR - VS Code Theme