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#1c0037
  • activityBar.dropBackground#6a6c2380
  • activityBar.foreground#ffffff
  • activityBarBadge.background#6a6c23
  • activityBarBadge.foreground#fafd51
  • badge.background#6a6c23
  • badge.foreground#fafd51
  • button.background#70caff
  • button.foreground#000000
  • debugToolBar.background#2b044f
  • dropdown.background#1c0037
  • editor.background#360a5f
  • editor.foreground#ffffff
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#6a6c23
  • editor.selectionHighlightBackground#6a6c23
  • editorGroup.dropBackground#70caff80
  • editorGroup.focusedEmptyBorder#70caff
  • editorGroupHeader.tabsBackground#360a5f
  • editorHoverWidget.background#360a5f
  • editorLineNumber.activeForeground#fafd51ff
  • editorLineNumber.foreground#94b2b2dd
  • editorMarkerNavigation.background#360a5f
  • editorWidget.background#360a5f
  • focusBorder#70caff
  • foreground#ffffff
  • input.background#1c0037
  • inputOption.activeBorder#70caff
  • list.activeSelectionBackground#6a6c2380
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#70caff80
  • list.focusBackground#70caff80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#70caff
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#360a5f
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffffff80
  • panelTitle.inactiveForeground#ffffff80
  • peekView.border#70caff
  • peekViewEditor.background#2b044f
  • peekViewResult.background#360a5f
  • peekViewTitle.background#360a5f
  • pickerGroup.border#FFFFFF1a
  • selection.background#6a6c23
  • sideBar.background#2b044f
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#1c0037
  • statusBar.background#2b044f
  • statusBar.debuggingBackground#70caff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2b044f
  • statusBarItem.activeBackground#70caff80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#70caff
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#70caff
  • tab.activeModifiedBorder#70caff
  • tab.border#00000033
  • tab.inactiveBackground#2b044f
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#2b044f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#ffffff
string#84fc60
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#70caff
constant.language.boolean#70caff
constant.numeric#fb967f
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#abdcdc
variable, support.class, entity.name.function#ffffff
keyword, modifier, variable.language.this, support.type.object, constant.language#70caff
entity.name.function, support.function#70caff
storage.type, storage.modifier#fafd51
support.module, support.node#70caffitalic
support.type#f56b3c
entity.name.type, entity.other.inherited-class#f56b3c
comment#acaf6fitalic
entity.name.type.class#f56b3cunderline
variable.object.property, meta.field.declaration entity.name.function#f56b3c
meta.definition.method entity.name.function#70caff
meta.function entity.name.function#70caff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#70caff
meta.embedded, source.groovy.embedded, meta.template.expression#ffffff
entity.name.tag.yaml#70caff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#70caff
constant.language.json#70caff
entity.other.attribute-name.class#70caff
entity.other.attribute-name.id#84fc60
source.css entity.name.tag#f56b3c
meta.tag, punctuation.definition.tag#70caff
entity.name.tag#70caff
entity.other.attribute-name#70caff
markup.heading#70caff
text.html.markdown meta.link.inline, meta.link.reference#70caff
text.html.markdown beginning.punctuation.definition.list#70caff
markup.italic#70caffitalic
markup.bold#70caffbold
markup.bold markup.italic, markup.italic markup.bold#70caffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#84fc60
markup.inline.raw.string.markdown#84fc60
keyword.other.definition.ini#70caff
entity.name.section.group-title.ini#70caff
source.cs meta.class.identifier storage.type#f56b3cunderline
source.cs meta.method.identifier entity.name.function#f56b3c
source.cs meta.method-call meta.method, source.cs entity.name.function#70caff
source.cs storage.type#f56b3c
source.cs meta.method.return-type#f56b3c
source.cs meta.preprocessor#fafd51
source.cs entity.name.type.namespace#ffffff
Global settings#ffffff

Shiki preview

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

Loading...

Earthbound Themes - Coding Theme