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#3c3662
  • activityBar.dropBackground#b254ff80
  • activityBarBadge.background#b254ff
  • debugToolBar.background#3c3662
  • dropdown.background#443e70
  • editor.background#2B2746
  • editor.foreground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#b254ff80
  • editorGroupHeader.tabsBackground#332e54
  • editorHoverWidget.background#332e54
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#332e54
  • editorWidget.background#332e54
  • focusBorder#b254ff
  • foreground#FFFFFF
  • input.background#443e70
  • inputOption.activeBorder#b254ff
  • list.activeSelectionBackground#b254ff80
  • list.dropBackground#b254ff80
  • list.focusBackground#b254ff80
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#332e54
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#FFFFFF80
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#b254ff
  • peekViewEditor.background#221f38
  • peekViewResult.background#332e54
  • peekViewTitle.background#2B2746
  • pickerGroup.border#FFFFFF1a
  • sideBar.background#332e54
  • sideBarSectionHeader.background#3c3662
  • statusBar.background#221f38
  • statusBar.debuggingBackground#b254ff
  • statusBar.noFolderBackground#221f38
  • statusBarItem.activeBackground#b254ff80
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.border#00000033
  • tab.inactiveBackground#3c3662
  • titleBar.activeBackground#221f38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FFFFFF—
string#ff4495—
constant.language.boolean#b254ff—
constant.numeric#FFCB5B—
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ff7eff—
keyword, modifier, variable.language.this, support.type.object, constant.language#b254ffitalic
entity.name.function, support.function#FFCB5B—
storage.type, storage.modifier#b254ff—
support.module, support.node#ff7effitalic
support.type#54edff—
entity.name.type, entity.other.inherited-class#54edff—
comment#8175d2italic
entity.name.type.class#54edffunderline
variable.object.property#54edff—
meta.definition.method entity.name.function#54edff—
meta.function entity.name.function#54edff—
template.expression.begin, template.expression.end#b254ff—
entity.name.tag.yaml#ff7eff—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ff7eff—
constant.language.json#b254ff—
entity.other.attribute-name.class#b254ff—
entity.other.attribute-name.id#ff4495—
source.css entity.name.tag#54edff—
meta.tag, punctuation.definition.tag#b254ff—
entity.name.tag#ff7eff—
entity.other.attribute-name#FFCB5Bitalic
markup.heading#b254ff—
text.html.markdown meta.link.inline, meta.link.reference#ff7eff—
text.html.markdown beginning.punctuation.definition.list#b254ff—
markup.italic#ff7effitalic
markup.bold#ff7effbold
markup.bold markup.italic, markup.italic markup.bold#ff7effitalic bold
keyword.other.definition.ini#ff7eff—
entity.name.section.group-title.ini#b254ff—
source.cs meta.class.identifier storage.type#54edffunderline
source.cs meta.method.identifier entity.name.function#54edff—
source.cs meta.method-call meta.method, source.cs entity.name.function#FFCB5B—
source.cs storage.type#54edff—
source.cs meta.method.return-type#54edff—
source.cs meta.preprocessor#8175d2—
source.cs entity.name.type.namespace#FFFFFF—
Global settings#FFFFFF—