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.

  • actionBar.toggledBackground#DD1144
  • activityBar.activeBackground#2a343d
  • activityBar.activeBorder#80ea6e
  • activityBar.activeFocusBorder#80ea6e
  • activityBar.background#101b25
  • activityBar.border#63a35c
  • activityBar.dropBorder#101b25
  • activityBar.foreground#00FF7F
  • activityBar.inactiveForeground#63a35c
  • activityBarBadge.background#80ea6e
  • activityBarBadge.foreground#101b25
  • activityBarTop.activeBackground#2a343d
  • activityBarTop.activeBorder#63a35c
  • activityBarTop.background#101b25
  • activityBarTop.dropBorder#63a35c
  • activityBarTop.foreground#63a35c
  • activityErrorBadge.background#DD1144
  • activityErrorBadge.foreground#DD1144
  • activityWarningBadge.background#1f98ff
  • activityWarningBadge.foreground#1f98ff
  • badge.background#63a35c
  • banner.background#fff
  • breadcrumb.background#2a343d
  • breadcrumb.foreground#fff
  • button.background#1f98ff
  • button.secondaryBackground#63a35c
  • commandCenter.activeBackground#2a343d
  • commandCenter.activeBorder#80ea6e
  • commandCenter.activeForeground#80ea6e
  • commandCenter.background#2a343d
  • commandCenter.debuggingBackground#2a343d
  • debugIcon.breakpointCurrentStackframeForeground#63a35c
  • debugIcon.breakpointForeground#DD1144
  • debugIcon.continueForeground#1f98ff
  • debugIcon.restartForeground#63a35c
  • debugIcon.stopForeground#DD1144
  • debugTokenExpression.boolean#1f98ff
  • debugTokenExpression.error#DD1144
  • debugTokenExpression.name#63a35c
  • debugTokenExpression.number#1f98ff
  • debugTokenExpression.string#d4f088
  • debugTokenExpression.type#fff
  • debugTokenExpression.value#85d9eb
  • debugToolBar.background#101b25
  • debugToolBar.border#80ea6e
  • debugView.stateLabelBackground#63a35c
  • editor.background#2a343d
  • editor.foreground#63a35c
  • editor.hoverHighlightBackground#374450
  • editor.lineHighlightBackground#101b25
  • editorGroupHeader.border#2a343d
  • editorGroupHeader.tabsBackground#101b25
  • editorHoverWidget.background#101b25
  • editorWidget.background#101b25
  • input.background#2a343d
  • input.border#101b25
  • input.foreground#fff
  • list.activeSelectionBackground#374450
  • list.activeSelectionForeground#63a35c
  • list.hoverBackground#374450
  • list.inactiveSelectionBackground#374450
  • menu.background#2a343d
  • minimap.background#101b25
  • notifications.background#2a343d
  • notifications.foreground#1f98ff
  • notificationsErrorIcon.foreground#DD1144
  • panel.background#101b25
  • panelSectionHeader.foreground#80ea6e
  • panelTitle.activeForeground#80ea6e
  • quickInput.background#2a343d
  • quickInput.foreground#fff
  • quickInputList.focusBackground#374450
  • search.resultsInfoForeground#1f98ff
  • searchEditor.findMatchBackground#2a343d
  • searchEditor.findMatchBorder#2a343d
  • searchEditor.textInputBorder#1f98ff
  • sideBar.background#101b25
  • sideBar.border#2a343d
  • sideBar.dropBackground#DD1144
  • sideBar.foreground#fff
  • sideBarActivityBarTop.border#101b25
  • sideBarSectionHeader.background#2a343d
  • sideBarSectionHeader.foreground#63a35c
  • sideBarStickyScroll.background#2a343d
  • sideBarStickyScroll.shadow#101b25
  • sideBarTitle.background#101b25
  • sideBarTitle.foreground#80ea6e
  • statusBar.background#101b25
  • statusBar.debuggingBackground#DD1144
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#fff
  • statusBarItem.hoverBackground#63a35c
  • tab.activeBackground#2a343d
  • tab.hoverBackground#2a343d
  • tab.inactiveBackground#101b25
  • terminal.background#2a343d
  • terminal.foreground#fff
  • terminal.tab.activeBorder#1f98ff
  • titleBar.activeBackground#101b25
  • titleBar.activeForeground#63a35c
  • titleBar.inactiveBackground#2a343d
  • toolbar.activeBackground#63a35c
  • toolbar.hoverBackground#374450

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d7579italic
variable, string constant.other.placeholder, meta.function-call#fff
constant.other.color#DD1144
invalid, invalid.illegal#DD1144
storage.type#56e27aitalic
keyword.control, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, storage.modifier#1f98ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#DD1144
entity.name.function, variable.function, support.function, keyword.other.special-method#d4f088
meta.block variable.other#fff
support.other.variable, string.other.link#6d7579
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#1f98ff
string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#63a35c
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fff
support.type, constant.other.key, punctuation, keyword#85d9eb
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#63a35c
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#DD1144
variable.language#1f98ffitalic
entity.name.method.js#1f98ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#1f98ff
entity.other.attribute-name#1f98ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#DD1144italic
entity.other.attribute-name.class#DD1144
source.sass keyword.control#1f98ff
markup.inserted#C3E88D
markup.deleted#DD1144
markup.changed#63a35c
string.regexp#1f98ff
constant.character.escape#6d7579
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1f98ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#DD1144italic
source.json meta.structure.dictionary.json support.type.property-name.json#00FF7F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1f98ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#63a35c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DD1144
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DD1144
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6d7579
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DD1144
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#63a35c
text.html.markdown, punctuation.definition.list_item.markdown#fff
text.html.markdown markup.inline.raw.markdown#6d7579
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#DD1144italic
markup.bold, markup.bold string#DD1144bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#DD1144bold
markup.underline#DD1144underline
markup.quote punctuation.definition.blockquote.markdown#6d7579
markup.quoteitalic
string.other.link.title.markdown#1f98ff
string.other.link.description.title.markdown#63a35c
constant.other.reference.link.markdown#63a35c
markup.raw.block#1f98ff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#6d7579
meta.separator#6d7579bold
markup.table#fff
men-jv-spring by Fernando Menjivar - VS Code Theme