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—