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#e6e5ab
  • activityBar.dropBackground#b299ff80
  • activityBar.foreground#220088
  • activityBarBadge.background#b299ff
  • activityBarBadge.foreground#604633
  • badge.background#b299ff
  • badge.foreground#604633
  • button.background#a31100
  • button.foreground#000000
  • debugToolBar.background#efeeb2
  • dropdown.background#e6e5ab
  • editor.background#f9f8b9
  • editor.foreground#220088
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#b299ff
  • editor.selectionHighlightBackground#b299ff
  • editorGroup.dropBackground#a3110080
  • editorGroup.focusedEmptyBorder#a31100
  • editorGroupHeader.tabsBackground#f9f8b9
  • editorHoverWidget.background#f9f8b9
  • editorLineNumber.activeForeground#604633ff
  • editorLineNumber.foreground#876a55dd
  • editorMarkerNavigation.background#f9f8b9
  • editorWidget.background#f9f8b9
  • focusBorder#a31100
  • foreground#220088
  • input.background#e6e5ab
  • inputOption.activeBorder#a31100
  • list.activeSelectionBackground#b299ff80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#a3110080
  • list.focusBackground#a3110080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#a31100
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#f9f8b9
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#22008880
  • panelTitle.inactiveForeground#22008880
  • peekView.border#a31100
  • peekViewEditor.background#efeeb2
  • peekViewResult.background#f9f8b9
  • peekViewTitle.background#f9f8b9
  • pickerGroup.border#FFFFFF1a
  • selection.background#b299ff
  • sideBar.background#efeeb2
  • sideBar.foreground#220088
  • sideBarSectionHeader.background#e6e5ab
  • statusBar.background#efeeb2
  • statusBar.debuggingBackground#a31100
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#220088
  • statusBar.noFolderBackground#efeeb2
  • statusBarItem.activeBackground#a3110080
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#a31100
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#a31100
  • tab.activeModifiedBorder#a31100
  • tab.border#00000033
  • tab.inactiveBackground#efeeb2
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#efeeb2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#220088
string#7100b1
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#a31100
constant.language.boolean#a31100
constant.numeric#604633
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#87000d
variable, support.class, entity.name.function#220088
keyword, modifier, variable.language.this, support.type.object, constant.language#a31100
entity.name.function, support.function#9d02f2
storage.type, storage.modifier#604633
support.module, support.node#a31100italic
support.type#881200
entity.name.type, entity.other.inherited-class#881200
comment#525252italic
entity.name.type.class#881200underline
variable.object.property, meta.field.declaration entity.name.function#881200
meta.definition.method entity.name.function#9d02f2
meta.function entity.name.function#9d02f2
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#a31100
meta.embedded, source.groovy.embedded, meta.template.expression#220088
entity.name.tag.yaml#a31100
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#a31100
constant.language.json#a31100
entity.other.attribute-name.class#a31100
entity.other.attribute-name.id#7100b1
source.css entity.name.tag#881200
meta.tag, punctuation.definition.tag#a31100
entity.name.tag#a31100
entity.other.attribute-name#9d02f2
markup.heading#a31100
text.html.markdown meta.link.inline, meta.link.reference#a31100
text.html.markdown beginning.punctuation.definition.list#a31100
markup.italic#a31100italic
markup.bold#a31100bold
markup.bold markup.italic, markup.italic markup.bold#a31100italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#7100b1
markup.inline.raw.string.markdown#7100b1
keyword.other.definition.ini#a31100
entity.name.section.group-title.ini#a31100
source.cs meta.class.identifier storage.type#881200underline
source.cs meta.method.identifier entity.name.function#881200
source.cs meta.method-call meta.method, source.cs entity.name.function#9d02f2
source.cs storage.type#881200
source.cs meta.method.return-type#881200
source.cs meta.preprocessor#604633
source.cs entity.name.type.namespace#220088
Global settings#220088

Shiki preview

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

Loading...

Earthbound Themes - Coding Theme