Skip to main content
Coding Theme

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#081941
  • activityBar.dropBackground#00E08680
  • activityBarBadge.background#9381ff
  • debugToolBar.background#081941
  • dropdown.background#091c4b
  • editor.background#06122F
  • editor.foreground#f8f8ff
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#00E08680
  • editorGroup.focusedEmptyBorder#00E086
  • editorGroupHeader.tabsBackground#071538
  • editorHoverWidget.background#071538
  • editorLineNumber.activeForeground#00E086
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#071538
  • editorWidget.background#071538
  • focusBorder#00E086
  • foreground#f8f8ff
  • input.background#091c4b
  • inputOption.activeBorder#00E086
  • list.activeSelectionBackground#00E08680
  • list.dropBackground#00E08680
  • list.focusBackground#00E08680
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#071538
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#f8f8ff80
  • panelTitle.inactiveForeground#f8f8ff80
  • peekView.border#00E086
  • peekViewEditor.background#040e25
  • peekViewResult.background#071538
  • peekViewTitle.background#06122F
  • pickerGroup.border#FFFFFF1a
  • selection.background#00E086
  • sideBar.background#071538
  • sideBarSectionHeader.background#081941
  • statusBar.background#040e25
  • statusBar.debuggingBackground#00E086
  • statusBar.noFolderBackground#040e25
  • statusBarItem.activeBackground#00E08680
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBorder#00E086
  • tab.activeModifiedBorder#00E086
  • tab.border#00000033
  • tab.inactiveBackground#081941
  • tab.inactiveModifiedBorder#008650
  • tab.unfocusedActiveModifiedBorder#00b36b
  • tab.unfocusedInactiveModifiedBorder#008650
  • titleBar.activeBackground#040e25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#f8f8ff
string#9381ff
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#dcc1ff
constant.language.boolean#00E086
constant.numeric#FFAA00
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#00ffc9
keyword, modifier, variable.language.this, support.type.object, constant.language#00E086
entity.name.function, support.function#FFAA00
storage.type, storage.modifier#00E086
support.module, support.node#00ffc9italic
support.type#FFAA00
entity.name.type, entity.other.inherited-class#FFAA00
comment#9381ffitalic
entity.name.type.class#FFAA00underline
variable.object.property, meta.field.declaration entity.name.function#FFAA00
meta.definition.method entity.name.function#FFAA00
meta.function entity.name.function#FFAA00
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#00E086
meta.embedded, source.groovy.embedded, meta.template.expression#f8f8ff
entity.name.tag.yaml#00ffc9
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#00ffc9
constant.language.json#00E086
entity.other.attribute-name.class#00E086
entity.other.attribute-name.id#9381ff
source.css entity.name.tag#FFAA00
meta.tag, punctuation.definition.tag#00E086
entity.name.tag#00ffc9
entity.other.attribute-name#FFAA00
markup.heading#00E086
text.html.markdown meta.link.inline, meta.link.reference#00ffc9
text.html.markdown beginning.punctuation.definition.list#00E086
markup.italic#00ffc9italic
markup.bold#00ffc9bold
markup.bold markup.italic, markup.italic markup.bold#00ffc9italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#9381ff
markup.inline.raw.string.markdown#9381ff
keyword.other.definition.ini#00ffc9
entity.name.section.group-title.ini#00E086
source.cs meta.class.identifier storage.type#FFAA00underline
source.cs meta.method.identifier entity.name.function#FFAA00
source.cs meta.method-call meta.method, source.cs entity.name.function#FFAA00
source.cs storage.type#FFAA00
source.cs meta.method.return-type#FFAA00
source.cs meta.preprocessor#9381ff
source.cs entity.name.type.namespace#f8f8ff
Global settings#f8f8ff
Tragedy and Geometry by Moonside Games - VS Code Theme