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#131313
  • activityBar.dropBackground#5a135980
  • activityBar.foreground#ffffff
  • activityBarBadge.background#5a1359
  • activityBarBadge.foreground#fd35fa
  • badge.background#5a1359
  • badge.foreground#fd35fa
  • button.background#fd9935
  • button.foreground#000000
  • debugToolBar.background#080808
  • dropdown.background#131313
  • editor.background#000000
  • editor.foreground#ffffff
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#5a1359
  • editor.selectionHighlightBackground#5a1359
  • editorGroup.dropBackground#fd993580
  • editorGroup.focusedEmptyBorder#fd9935
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorLineNumber.activeForeground#fd35faff
  • editorLineNumber.foreground#9e5dc8dd
  • editorMarkerNavigation.background#000000
  • editorWidget.background#000000
  • focusBorder#fd9935
  • foreground#ffffff
  • input.background#131313
  • inputOption.activeBorder#fd9935
  • list.activeSelectionBackground#5a135980
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#fd993580
  • list.focusBackground#fd993580
  • list.focusForeground#FFFFFF
  • list.highlightForeground#fd9935
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#000000
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffffff80
  • panelTitle.inactiveForeground#ffffff80
  • peekView.border#fd9935
  • peekViewEditor.background#080808
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#FFFFFF1a
  • selection.background#5a1359
  • sideBar.background#080808
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#131313
  • statusBar.background#080808
  • statusBar.debuggingBackground#fd9935
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#080808
  • statusBarItem.activeBackground#fd993580
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#fd9935
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#fd9935
  • tab.activeModifiedBorder#fd9935
  • tab.border#00000033
  • tab.inactiveBackground#080808
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#080808

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#ffffff
string#ff6693
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#fd9935
constant.language.boolean#fd9935
constant.numeric#aaef64
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#c67ff4
variable, support.class, entity.name.function#ffffff
keyword, modifier, variable.language.this, support.type.object, constant.language#fd9935
entity.name.function, support.function#5e9aff
storage.type, storage.modifier#fd35fa
support.module, support.node#fd9935italic
support.type#f6f929
entity.name.type, entity.other.inherited-class#f6f929
comment#7ca454italic
entity.name.type.class#f6f929underline
variable.object.property, meta.field.declaration entity.name.function#f6f929
meta.definition.method entity.name.function#5e9aff
meta.function entity.name.function#5e9aff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#fd9935
meta.embedded, source.groovy.embedded, meta.template.expression#ffffff
entity.name.tag.yaml#fd9935
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#fd9935
constant.language.json#fd9935
entity.other.attribute-name.class#fd9935
entity.other.attribute-name.id#ff6693
source.css entity.name.tag#f6f929
meta.tag, punctuation.definition.tag#fd9935
entity.name.tag#fd9935
entity.other.attribute-name#5e9aff
markup.heading#fd9935
text.html.markdown meta.link.inline, meta.link.reference#fd9935
text.html.markdown beginning.punctuation.definition.list#fd9935
markup.italic#fd9935italic
markup.bold#fd9935bold
markup.bold markup.italic, markup.italic markup.bold#fd9935italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ff6693
markup.inline.raw.string.markdown#ff6693
keyword.other.definition.ini#fd9935
entity.name.section.group-title.ini#fd9935
source.cs meta.class.identifier storage.type#f6f929underline
source.cs meta.method.identifier entity.name.function#f6f929
source.cs meta.method-call meta.method, source.cs entity.name.function#5e9aff
source.cs storage.type#f6f929
source.cs meta.method.return-type#f6f929
source.cs meta.preprocessor#fd35fa
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