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#303454
  • activityBar.dropBackground#534f6380
  • activityBar.foreground#f0faff
  • activityBarBadge.background#534f63
  • activityBarBadge.foreground#d4cbff
  • badge.background#534f63
  • badge.foreground#d4cbff
  • button.background#c67ff4
  • button.foreground#000000
  • debugToolBar.background#373c60
  • dropdown.background#303454
  • editor.background#2a2e4a
  • editor.foreground#f0faff
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#534f63
  • editor.selectionHighlightBackground#534f63
  • editorGroup.dropBackground#c67ff480
  • editorGroup.focusedEmptyBorder#c67ff4
  • editorGroupHeader.tabsBackground#2a2e4a
  • editorHoverWidget.background#2a2e4a
  • editorLineNumber.activeForeground#d4cbffff
  • editorLineNumber.foreground#9590b2dd
  • editorMarkerNavigation.background#2a2e4a
  • editorWidget.background#2a2e4a
  • focusBorder#c67ff4
  • foreground#f0faff
  • input.background#303454
  • inputOption.activeBorder#c67ff4
  • list.activeSelectionBackground#534f6380
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#c67ff480
  • list.focusBackground#c67ff480
  • list.focusForeground#FFFFFF
  • list.highlightForeground#c67ff4
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#2a2e4a
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#f0faff80
  • panelTitle.inactiveForeground#f0faff80
  • peekView.border#c67ff4
  • peekViewEditor.background#373c60
  • peekViewResult.background#2a2e4a
  • peekViewTitle.background#2a2e4a
  • pickerGroup.border#FFFFFF1a
  • selection.background#534f63
  • sideBar.background#373c60
  • sideBar.foreground#f0faff
  • sideBarSectionHeader.background#303454
  • statusBar.background#373c60
  • statusBar.debuggingBackground#c67ff4
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#f0faff
  • statusBar.noFolderBackground#373c60
  • statusBarItem.activeBackground#c67ff480
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#c67ff4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#c67ff4
  • tab.activeModifiedBorder#c67ff4
  • tab.border#00000033
  • tab.inactiveBackground#373c60
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#373c60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#f0faff
string#ffcf32
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#c67ff4
constant.language.boolean#c67ff4
constant.numeric#d4cbff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#2fff89
variable, support.class, entity.name.function#f0faff
keyword, modifier, variable.language.this, support.type.object, constant.language#c67ff4
entity.name.function, support.function#f89070
storage.type, storage.modifier#d4cbff
support.module, support.node#c67ff4italic
support.type#ffcfcb
entity.name.type, entity.other.inherited-class#ffcfcb
comment#bdb7dbitalic
entity.name.type.class#ffcfcbunderline
variable.object.property, meta.field.declaration entity.name.function#ffcfcb
meta.definition.method entity.name.function#f89070
meta.function entity.name.function#f89070
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c67ff4
meta.embedded, source.groovy.embedded, meta.template.expression#f0faff
entity.name.tag.yaml#c67ff4
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#c67ff4
constant.language.json#c67ff4
entity.other.attribute-name.class#c67ff4
entity.other.attribute-name.id#ffcf32
source.css entity.name.tag#ffcfcb
meta.tag, punctuation.definition.tag#c67ff4
entity.name.tag#c67ff4
entity.other.attribute-name#f89070
markup.heading#c67ff4
text.html.markdown meta.link.inline, meta.link.reference#c67ff4
text.html.markdown beginning.punctuation.definition.list#c67ff4
markup.italic#c67ff4italic
markup.bold#c67ff4bold
markup.bold markup.italic, markup.italic markup.bold#c67ff4italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ffcf32
markup.inline.raw.string.markdown#ffcf32
keyword.other.definition.ini#c67ff4
entity.name.section.group-title.ini#c67ff4
source.cs meta.class.identifier storage.type#ffcfcbunderline
source.cs meta.method.identifier entity.name.function#ffcfcb
source.cs meta.method-call meta.method, source.cs entity.name.function#f89070
source.cs storage.type#ffcfcb
source.cs meta.method.return-type#ffcfcb
source.cs meta.preprocessor#d4cbff
source.cs entity.name.type.namespace#f0faff
Global settings#f0faff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Earthbound Themes - Coding Theme