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.activeFocusBorder#ff8ad2
  • activityBar.background#0e0d0d
  • activityBar.border#7bff74
  • activityBar.foreground#00eeff
  • activityBar.inactiveForeground#ff8ad2
  • activityBarBadge.background#045ded
  • breadcrumb.foreground#7bff74
  • button.background#ae6dfd
  • button.foreground#7bff74
  • checkbox.border#7bff74
  • commandCenter.activeBackground#050404
  • commandCenter.activeBorder#7bff74
  • commandCenter.activeForeground#ff8ad2
  • commandCenter.background#0e0d0d
  • commandCenter.border#ff8ad2
  • commandCenter.foreground#00eeff
  • contrastActiveBorder#7bff74
  • contrastBorder#7bff74
  • dropdown.background#000
  • dropdown.border#3ff2ff
  • dropdown.foreground#fff
  • dropdown.listBackground#000
  • editor.background#171616
  • editor.findMatchHighlightBackground#3b3b3b6d
  • editor.foreground#fff
  • editor.rangeHighlightBackground#3b3b3b6d
  • editor.selectionHighlightBackground#3b3b3b6d
  • editorBracketHighlight.foreground1#f0ff4a
  • editorBracketHighlight.foreground2#ff8ad2
  • editorBracketHighlight.foreground3#9bff7c
  • editorBracketHighlight.foreground4#f6e7a3
  • editorBracketHighlight.foreground5#a255ff
  • editorBracketHighlight.foreground6#18eece
  • editorBracketHighlight.unexpectedBracket.foreground#f9aab7
  • editorGroupHeader.tabsBackground#171616
  • editorGroupHeader.tabsBorder#00eeff
  • editorInlayHint.foreground#8ae1e4df
  • editorLineNumber.activeForeground#ff6bc6
  • editorLineNumber.foreground#00dffd
  • gitDecoration.deletedResourceForeground#ff8a4b
  • gitDecoration.ignoredResourceForeground#d2d2d2
  • gitDecoration.modifiedResourceForeground#ff2eaf
  • gitDecoration.renamedResourceForeground#cb47ff
  • gitDecoration.stageModifiedResourceForeground#7bff74
  • gitDecoration.untrackedResourceForeground#a255ff
  • input.background#0e0d0d
  • input.border#7bff74
  • input.foreground#ff8ad2
  • input.placeholderForeground#00eeff
  • inputOption.activeBorder#ff8ad2
  • panel.border#00eeff
  • panelTitle.activeBorder#7bff74
  • panelTitle.activeForeground#ff8ad2
  • panelTitle.border#323131
  • panelTitle.inactiveForeground#00eeff
  • sideBar.background#131212
  • sideBar.border#7bff74
  • sideBar.foreground#00eeff
  • sideBarActivityBarTop.border#ff8ad2
  • sideBarSectionHeader.border#ff8ad2
  • sideBarSectionHeader.foreground#fff
  • sideBarTitle.background#0e0d0d
  • sideBarTitle.border#323131
  • sideBarTitle.foreground#ff82cf
  • statusBar.background#090909
  • statusBar.border#a255ff
  • statusBar.foreground#ff8ad2
  • statusBarItem.remoteBackground#000
  • statusBarItem.remoteForeground#ff6bc6
  • tab.activeBackground#171616
  • tab.activeBorder#ff8ad2
  • tab.activeBorderTop#00eeff
  • tab.activeForeground#7bff74
  • tab.border#a255ff
  • tab.inactiveBackground#0e0d0d
  • tab.inactiveForeground#00eeff
  • terminal.background#0e0d0d
  • terminal.border#7bff74
  • textLink.activeForeground#ff8ad2
  • textLink.foreground#00eeff
  • textPreformat.foreground#bd8bf9
  • titleBar.activeBackground#090909
  • titleBar.activeForeground#00eeff
  • titleBar.border#a255ff
  • window.activeBorder#7bff74
  • window.inactiveBorder#7bff74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#72bec1dfitalic
source.ts#ff8ad2
variable, string constant.other.placeholder#00eeff
punctuation#f0ff4a
constant.other.color#fff
invalid, invalid.illegal#ff82cf
storage.type, storage.modifier#ff4dbb
keyword#ff8a4b
support.type.object.module.js#f0ff4a
support.variable.property.js#ff6bc6
keyword.control.conditional#00f5d4
constant.other.color, punctuation, 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#f0ff4a
meta.brace.round.js#7bff74
meta.structure.dictionary.json#7bff74
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff82cf
meta.function-call, variable.function, support.function, keyword.other.special-method#f0ff4a
entity.name.function#7bff74
meta.block variable.other#00eeff
support.other.variable, string.other.link#ff82cf
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#f0ff4a
support.constant.handlebars#00f5d4
variable.language#f0ff4a
variable.parameter#cb47ff
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#7bff74
meta.block variable.other#00eeff
meta.object-literal.key.js#ff82cf
string#a255ff
entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#f0ff4a
support.type#acd4e3
support.type#7bff74
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#C792EA
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff82cf
variable.other.property#ff82cf
variable.language#f0ff4aitalic
entity.name.method.js#f0ff4aitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#f0ff4a
entity.other.attribute-name#7bff74
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff8a4bitalic
text.html.derivative#00ffff
meta.tag.sgml#608fdf
entity.other.attribute-name.class#7bff74
entity.other.attribute-name.id#ff8a4b
source.sass keyword.control#ff8a4b
markup.inserted#7bff74
markup.deleted#f9aab7
markup.changed#C792EA
string.regexp#00f5d4
constant.character.escape#00f5d4
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#f0ff4aitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff82cfitalic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff82cf
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#7bff74
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#00eeff
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#ff8a4b
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#f0ff4a
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#F990E8
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#C792EA
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#7bff74
text.html.markdown, punctuation.definition.list_item.markdown#00eeff
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#F990E8
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7bff74
markup.italic#F990E8italic
markup.bold, markup.bold string#F990E8bold
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#F990E8bold
markup.underline#d08affunderline
markup.quote punctuation.definition.blockquote.markdown#00eeff
markup.quoteitalic
string.other.link.title.markdown#ff8a4b
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#F990E8
markup.raw.block#C792EA
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#65737E
meta.separator#65737Ebold
markup.table#EEFFFF