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#1f1f1f
  • activityBar.foreground#0088ff
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#0088ff
  • badge.background#0088ff
  • badge.foreground#ffffff
  • breadcrumb.foreground#777777
  • dropdown.background#1b1b1b
  • dropdown.border#00000000
  • dropdown.foreground#ffffff
  • dropdown.listBackground#ffffff
  • editor.background#121212
  • editor.findMatchBackground#4CCFFF44
  • editor.findMatchHighlightBackground#4CCFFF44
  • editor.findRangeHighlightBackground#4CCFFF44
  • editor.foldBackground#4e4e4e44
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#77777733
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#aaaaaa44
  • editorBracketHighlight.foreground1#FFF387
  • editorBracketHighlight.foreground2#DF87FF
  • editorBracketHighlight.foreground3#4CCFFF
  • editorBracketHighlight.unexpectedBracket.foreground#ff3846
  • editorCursor.foreground#dddddd
  • editorGroup.dropBackground#222222aa
  • editorGroupHeader.border#444444
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGutter.background#1f1f1f
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#555555
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#bbbbbb
  • editorLineNumber.foreground#444444
  • menu.selectionBackground#0088ff
  • menubar.selectionBackground#0088ff
  • minimap.background#22222288
  • minimap.errorHighlight#ff1f1f
  • minimap.findMatchHighlight#4CCFFF66
  • minimap.selectionHighlight#77777766
  • minimap.selectionOccurrenceHighlight#aaaaaa66
  • minimapSlider.background#44444488
  • minimapSlider.hoverBackground#66666688
  • panel.border#222222
  • panel.dropBorder#333333
  • panelInput.border#222222
  • panelSection.border#222222
  • panelTitle.activeForeground#efefef
  • panelTitle.inactiveForeground#444444
  • progressBar.background#0088ff
  • scrollbarSlider.activeBackground#77777766
  • scrollbarSlider.background#66666666
  • scrollbarSlider.hoverBackground#99999966
  • searchEditor.findMatchBackground#4CCFFF44
  • sideBar.background#121212
  • sideBar.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#222222
  • tab.activeBackground#4CCFFF22
  • tab.activeBorder#0088ff
  • tab.activeForeground#ffffff
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1b1b1b
  • terminal.ansiBrightYellow#FF994C
  • terminal.foreground#efefef
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#ffffff
  • welcomePage.background#222222
  • welcomePage.progress.foreground#4CCFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#676767—
variable#ffffff—
string constant.other.placeholder#4CCFFF—
constant.other.color#ffffff—
invalid, invalid.illegal#ff3846—
keyword#FF994C—
storage.type, storage.modifier#FC517Citalic
keyword.control#FC517C—
punctuation#FC517C—
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#FC517C—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag.html#ffffff—
entity.name.tag.html#A6F05F—
entity.other.attribute-name.html#4CCFFF—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FC517C—
meta.function-call, variable.function, support.function, entity.name.function, keyword.other.special-method#A6F05F—
meta.block variable.other#f07178—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#DF87FF—
string#FFF387—
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#FFF387—
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#A6F05F—
support.type#42B2F1—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FC517C—
variable.language#FC517Citalic
entity.name.method.js#42B2F1—
meta.class-method.js entity.name.function.js, variable.function.constructor#42B2F1—
entity.other.attribute-name#DF87FF—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFF387italic
entity.other.attribute-name.class#FF8C21—
source.sass keyword.control#DF87FF—
markup.inserted#A6F05F—
markup.deleted#ff1c2f—
markup.changed#C792EA—
string.regexp#4CCFFF—
constant.character.escape#4CCFFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#42B2F1italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
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#FFCB6B—
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#F78C6C—
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#FF5370—
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#C17E70—
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#82AAFF—
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#f07178—
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#C3E88D—
text.html.markdown#ffffff—
punctuation.definition.list_item.markdown#4CCFFF—
text.html.markdown markup.inline.raw.markdown#C792EA—
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#8FDE40—
markup.italic#FC517Citalic
markup.bold, markup.bold string#DF87FFbold
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#DF87FFbold
markup.underline#4CCFFFunderline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#FFF387—
string.other.link.description.title.markdown#DF87FF—
constant.other.reference.link.markdown#FFCB6B—
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—
Heptico Theme by Tathya Patel - VS Code Theme