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#140f00
  • activityBar.dropBackground#6b5e3380
  • activityBar.foreground#f9e4a1
  • activityBarBadge.background#6b5e33
  • activityBarBadge.foreground#f6d56a
  • badge.background#6b5e33
  • badge.foreground#f6d56a
  • button.background#ffd03c
  • button.foreground#000000
  • debugToolBar.background#150d00
  • dropdown.background#140f00
  • editor.background#1e1b07
  • editor.foreground#f9e4a1
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#6b5e33
  • editor.selectionHighlightBackground#6b5e33
  • editorGroup.dropBackground#ffd03c80
  • editorGroup.focusedEmptyBorder#ffd03c
  • editorGroupHeader.tabsBackground#1e1b07
  • editorHoverWidget.background#1e1b07
  • editorLineNumber.activeForeground#f6d56aff
  • editorLineNumber.foreground#f9e4a1dd
  • editorMarkerNavigation.background#1e1b07
  • editorWidget.background#1e1b07
  • focusBorder#ffd03c
  • foreground#f9e4a1
  • input.background#140f00
  • inputOption.activeBorder#ffd03c
  • list.activeSelectionBackground#6b5e3380
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffd03c80
  • list.focusBackground#ffd03c80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#ffd03c
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#1e1b07
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#f9e4a180
  • panelTitle.inactiveForeground#f9e4a180
  • peekView.border#ffd03c
  • peekViewEditor.background#150d00
  • peekViewResult.background#1e1b07
  • peekViewTitle.background#1e1b07
  • pickerGroup.border#FFFFFF1a
  • selection.background#6b5e33
  • sideBar.background#150d00
  • sideBar.foreground#f9e4a1
  • sideBarSectionHeader.background#140f00
  • statusBar.background#150d00
  • statusBar.debuggingBackground#ffd03c
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#f9e4a1
  • statusBar.noFolderBackground#150d00
  • statusBarItem.activeBackground#ffd03c80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#ffd03c
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#ffd03c
  • tab.activeModifiedBorder#ffd03c
  • tab.border#00000033
  • tab.inactiveBackground#150d00
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#150d00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#f9e4a1
string#ffebae
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffd03c
constant.language.boolean#ffd03c
constant.numeric#f6d56a
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#f6d56a
variable, support.class, entity.name.function#f9e4a1
keyword, modifier, variable.language.this, support.type.object, constant.language#ffd03c
entity.name.function, support.function#f6d56a
storage.type, storage.modifier#f6d56a
support.module, support.node#ffd03citalic
support.type#e0c364
entity.name.type, entity.other.inherited-class#e0c364
comment#aaaa88italic
entity.name.type.class#e0c364underline
variable.object.property, meta.field.declaration entity.name.function#e0c364
meta.definition.method entity.name.function#f6d56a
meta.function entity.name.function#f6d56a
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ffd03c
meta.embedded, source.groovy.embedded, meta.template.expression#f9e4a1
entity.name.tag.yaml#ffd03c
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ffd03c
constant.language.json#ffd03c
entity.other.attribute-name.class#ffd03c
entity.other.attribute-name.id#ffebae
source.css entity.name.tag#e0c364
meta.tag, punctuation.definition.tag#ffd03c
entity.name.tag#ffd03c
entity.other.attribute-name#f6d56a
markup.heading#ffd03c
text.html.markdown meta.link.inline, meta.link.reference#ffd03c
text.html.markdown beginning.punctuation.definition.list#ffd03c
markup.italic#ffd03citalic
markup.bold#ffd03cbold
markup.bold markup.italic, markup.italic markup.bold#ffd03citalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ffebae
markup.inline.raw.string.markdown#ffebae
keyword.other.definition.ini#ffd03c
entity.name.section.group-title.ini#ffd03c
source.cs meta.class.identifier storage.type#e0c364underline
source.cs meta.method.identifier entity.name.function#e0c364
source.cs meta.method-call meta.method, source.cs entity.name.function#f6d56a
source.cs storage.type#e0c364
source.cs meta.method.return-type#e0c364
source.cs meta.preprocessor#f6d56a
source.cs entity.name.type.namespace#f9e4a1
Global settings#f9e4a1

Shiki preview

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

Loading...

Earthbound Themes - Coding Theme