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.activeBorder#f472b6
  • activityBar.background#1e293b
  • activityBar.foreground#93c5fd
  • activityBarBadge.background#f472b6
  • button.background#27354c
  • editor.background#1e293b
  • editor.foreground#f8fafc
  • editorGroupHeader.tabsBackground#1e293b
  • editorLineNumber.foreground#475569
  • editorOverviewRuler.border#151d2a
  • focusBorder#2f405d75
  • input.background#27354c
  • input.border#384c6e
  • keybindingLabel.background#151d2a
  • list.activeSelectionBackground#2f405d
  • list.focusOutline#f472b6
  • list.hoverBackground#384c6e
  • menu.background#1e293b
  • panel.border#151d2a
  • panelInput.border#f472b6
  • quickInput.background#151d2a
  • quickInput.foreground#64748B
  • scrollbar.shadow#1e293b
  • scrollbarSlider.activeBackground#2f405d
  • scrollbarSlider.background#2f405d75
  • scrollbarSlider.hoverBackground#2f405d
  • sideBar.background#1e293b
  • sideBar.border#151d2a
  • sideBarSectionHeader.background#1e293b
  • statusBar.background#151d2a
  • statusBar.debuggingBackground#151d2a
  • statusBar.noFolderBackground#151d2a
  • tab.activeBackground#151d2a
  • tab.activeBorder#f472b6
  • tab.hoverBackground#27354c
  • tab.inactiveBackground#1e293b
  • titleBar.activeBackground#1e293b
  • welcomePage.tileBackground#1e293b
  • welcomePage.tileHoverBackground#1e293b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#F472B6
constant.other.color#ffffff
invalid, invalid.illegal#f87171
keyword, storage.type, storage.modifier#CBD5E1
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7dd3fc
keyword.controlitalic
punctuation.definition.block.js#64748b
punctuation.definition.tag#64748b
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f472b6
source.css.scss entity.name.tag#CBD5E1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#F472B6
meta.block variable.other#F472B6
support.other.variable, string.other.link#F472B6
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F472B6
string, 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#7dd3fc
source.js meta.brace.square.js#64748B
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#F472B6
support.type#f472b6
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#facc15
variable.language#facc15italic
entity.name.method.js#F472B6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#F472B6
entity.other.attribute-name#cbd5e1
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F472B6italic
entity.other.attribute-name.class#F472B6
source.sass keyword.control#F472B6
constant.numeric.css#7DD3FC
markup.inserted#7dd3fc
markup.deleted#facc15
markup.changed#94a3b8
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F472B6italic
source.js constant.other.object.key.js string.unquoted.label.js#facc15italic
source.js meta.block variable.other, source.js keyword.control#f472b6
source.js entity.name.function.js, source.js meta.var-single-variable.expr.js#7dd3fc
meta.jsx.children.js#f8fafc
punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, string.quoted.double.ts, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, string.quoted.double.js#CBD5E198
punctuation.definition.binding-pattern.array.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, meta.brace.round.js#94A3B8
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js#64748B
source.js punctuation.definition.parameters.begin.js, source.js punctuation.definition.parameters.end.js#64748B
source.js variable.other.readwrite.alias.js#7dd3fc
source.json meta.structure.dictionary.json support.type.property-name.json#F8FAFC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F472B6
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#f9a8d4
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#a78bfa
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#c4b5fd
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#6ee7b7
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#5eead4
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#99f6e4
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#CBD5E1
text.html.markdown, punctuation.definition.list_item.markdown#CBD5E1
text.html.markdown markup.inline.raw.markdown#94a3b8
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#7dd3fc
markup.italic#F472B6italic
markup.bold, markup.bold string#F472B6bold
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#F472B6bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#F472B6
string.other.link.description.title.markdown#94a3b8
constant.other.reference.link.markdown#F472B6
markup.raw.block#94a3b8
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#CBD5E1
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#CBD5E1
entity.tag.tagbraces.nunjucks, storage.type.templatetag.nunjucks#CBD5E198
storage.type.attr.nunjucks#CBD5E198
keyword.operator.nunjucks#F472B6
Skye by Jamie Bradley - VS Code Theme