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#111111
  • activityBar.dropBackground#33A95880
  • activityBarBadge.background#33A958
  • debugToolBar.background#171717
  • dropdown.background#1b1b1b
  • editor.background#272727
  • editor.foreground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#33A95880
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGutter.background#1f1f1f
  • editorHoverWidget.background#141414
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#141414
  • editorWidget.background#141414
  • focusBorder#33A958
  • foreground#FFFFFF
  • input.background#1b1b1b
  • inputOption.activeBorder#33A958
  • list.activeSelectionBackground#33A95880
  • list.dropBackground#33A95880
  • list.focusBackground#33A95880
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#272727
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#FFFFFF80
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#33A958
  • peekViewEditor.background#0d0d0d
  • peekViewResult.background#141414
  • peekViewTitle.background#111111
  • pickerGroup.border#FFFFFF1a
  • sideBar.background#242424
  • sideBarSectionHeader.background#333333
  • statusBar.background#33A95880
  • statusBar.debuggingBackground#33A958
  • statusBar.noFolderBackground#0d0d0d
  • statusBarItem.activeBackground#33A95880
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.inactiveBackground#171717
  • terminal.background#272727
  • titleBar.activeBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#FC4E4B
constant.language.boolean#33A958
constant.numeric#F3B63B
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#4cfd84italic
keyword, modifier, variable.language.this, support.type.object, constant.language#33A958
entity.name.function, support.function#F3B63B
storage.type, storage.modifier#33A958
support.module, support.node#4cfd84italic
support.type#00A4D8
entity.name.type, entity.other.inherited-class#00A4D8italic
comment#a1a1a1
entity.name.type.class#00A4D8underline
variable.object.property#00A4D8
meta.definition.method entity.name.function#00A4D8
meta.function entity.name.function#00A4D8
template.expression.begin, template.expression.end#33A958
entity.name.tag.yaml#4cfd84
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#4cfd84
constant.language.json#33A958
entity.other.attribute-name.class#33A958
entity.other.attribute-name.id#FC4E4B
source.css entity.name.tag#00A4D8
meta.tag, punctuation.definition.tag#33A958
entity.name.tag#4cfd84
entity.other.attribute-name#F3B63B
markup.heading#33A958bold
text.html.markdown meta.link.inline, meta.link.reference#4cfd84
text.html.markdown beginning.punctuation.definition.list#33A958
markup.italic#4cfd84italic
markup.bold#4cfd84bold
markup.bold markup.italic, markup.italic markup.bold#4cfd84italic bold
keyword.other.definition.ini#4cfd84
entity.name.section.group-title.ini#33A958
source.cs meta.class.identifier storage.type#00A4D8underline
source.cs meta.method.identifier entity.name.function#00A4D8
source.cs meta.method-call meta.method, source.cs entity.name.function#F3B63B
source.cs storage.type#00A4D8
source.cs meta.method.return-type#00A4D8
source.cs meta.preprocessor#333333
source.cs entity.name.type.namespace#FFFFFF