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#404040
  • activityBar.dropBackground#E0E2E480
  • activityBarBadge.background#E0E2E4
  • activityBarBadge.foreground#000000
  • badge.background#E0E2E4
  • badge.foreground#000000
  • button.background#E0E2E4
  • button.foreground#000000
  • debugToolBar.background#404040
  • dropdown.background#494949
  • editor.background#2E2E2E
  • editor.foreground#E0E2E4
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#E0E2E480
  • editorGroup.focusedEmptyBorder#E0E2E4
  • editorGroupHeader.tabsBackground#373737
  • editorHoverWidget.background#373737
  • editorLineNumber.activeForeground#E0E2E4
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#373737
  • editorWidget.background#373737
  • focusBorder#E0E2E4
  • foreground#E0E2E4
  • input.background#494949
  • inputOption.activeBorder#E0E2E4
  • list.activeSelectionBackground#E0E2E480
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#E0E2E480
  • list.focusBackground#E0E2E480
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E0E2E4
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#373737
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#E0E2E480
  • panelTitle.inactiveForeground#E0E2E480
  • peekView.border#E0E2E4
  • peekViewEditor.background#242424
  • peekViewResult.background#373737
  • peekViewTitle.background#2E2E2E
  • pickerGroup.border#FFFFFF1a
  • selection.background#E0E2E4
  • sideBar.background#373737
  • sideBarSectionHeader.background#404040
  • statusBar.background#242424
  • statusBar.debuggingBackground#E0E2E4
  • statusBar.debuggingForeground#000000
  • statusBar.noFolderBackground#242424
  • statusBarItem.activeBackground#E0E2E480
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#E0E2E4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#E0E2E4
  • tab.activeModifiedBorder#E0E2E4
  • tab.border#00000033
  • tab.inactiveBackground#404040
  • tab.inactiveModifiedBorder#868788
  • tab.unfocusedActiveModifiedBorder#b3b4b6
  • tab.unfocusedInactiveModifiedBorder#868788
  • titleBar.activeBackground#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#E0E2E4
string#EC7600
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ff7f7f
constant.language.boolean#93C763
constant.numeric#FFCD22
variable#E0E2E4
support.variable#E0E2E4
support.class#A082BD
support.constant#E0E2E4
meta.definition.variable entity.name.function#E0E2E4
keyword, modifier, variable.language.this, support.type.object, constant.language#93C763
entity.name.function, support.function#678CB1
storage.type, storage.modifier#93C763
support.module, support.node#E0E2E4italic
support.type#E0E2E4
entity.name.type, entity.other.inherited-class#E0E2E4
comment#8a8a8aitalic
entity.name.type.class#678CB1underline
variable.object.property, meta.field.declaration entity.name.function#5555FF
meta.definition.method entity.name.function#5555FF
meta.function entity.name.function#678CB1
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#93C763
meta.embedded, source.groovy.embedded, meta.template.expression#E0E2E4
entity.name.tag.yaml#E0E2E4
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#A082BD
constant.language.json#93C763
entity.other.attribute-name.class#678CB1
entity.other.attribute-name.id#678CB1
source.css entity.name.tag#5555FF
meta.tag, punctuation.definition.tag#93C763
entity.name.tag#E0E2E4
entity.other.attribute-name#678CB1
markup.heading#93C763
text.html.markdown meta.link.inline, meta.link.reference#E0E2E4
text.html.markdown beginning.punctuation.definition.list#93C763
markup.italic#E0E2E4italic
markup.bold#E0E2E4bold
markup.bold markup.italic, markup.italic markup.bold#E0E2E4italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#EC7600
markup.inline.raw.string.markdown#EC7600
keyword.other.definition.ini#E0E2E4
entity.name.section.group-title.ini#93C763
source.cs meta.class.identifier storage.type#678CB1underline
source.cs meta.method.identifier entity.name.function#5555FF
source.cs meta.method-call meta.method, source.cs entity.name.function#678CB1
source.cs storage.type#E0E2E4
source.cs meta.method.return-type#E0E2E4
source.cs meta.preprocessor#8a8a8a
source.php entity.name.type.namespace#A082BD
source.cs entity.name.type.namespace#678CB1
support.type.property-name.css#EC7600
keyword.other.important.css#fc5555
Global settings#E0E2E4