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.activeBackground#352742
  • activityBar.activeBorder#5c1a7a
  • activityBar.background#291f33
  • activityBar.foreground#c852ff
  • activityBar.inactiveForeground#62408a
  • activityBarBadge.background#e042ff
  • activityBarBadge.foreground#191622
  • badge.background#e042ff
  • badge.foreground#191622
  • button.background#513a69
  • button.hoverBackground#5d4477
  • dropdown.background#2c2038
  • editor.background#19161d
  • editor.foreground#eeffff
  • editor.selectionBackground#331f46
  • editor.wordHighlightBackground#ffa60050
  • editorGroup.border#513a69
  • editorGroup.dropBackground#4c3f5c70
  • editorGroup.emptyBackground#151318
  • editorGroupHeader.border#100418
  • editorGroupHeader.tabsBackground#151318
  • editorLineNumber.foreground#65388f
  • focusBorder#5a3485
  • icon.foreground#b68dce
  • input.background#191622
  • input.border#1e0e2c
  • input.foreground#f3fcee
  • input.placeholderForeground#5a3485
  • list.activeSelectionBackground#552c8160
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#5d348860
  • list.inactiveSelectionBackground#552c8160
  • list.inactiveSelectionForeground#ffffff
  • menubar.selectionBackground#be6aff33
  • menubar.selectionForeground#ffffff
  • notificationCenterHeader.background#be6aff
  • notifications.background#1a121d
  • notifications.border#be6aff
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#f57125
  • notificationsInfoIcon.foreground#be6aff
  • notificationsWarningIcon.foreground#ffcc00
  • panel.border#be6aff
  • panelTitle.activeBorder#be6aff
  • sideBar.background#151318
  • sideBar.border#19161d
  • sideBar.foreground#e7d8f0
  • sideBarSectionHeader.background#1c1624
  • sideBarSectionHeader.border#271e35
  • sideBarSectionHeader.foreground#cea9ff
  • sideBarTitle.background#151318
  • sideBarTitle.border#211824
  • sideBarTitle.foreground#d9b1f0
  • statusBar.background#180d20
  • statusBar.debuggingBackground#9e4e1f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.activeBackground#8f669b55
  • statusBarItem.hoverBackground#8d73af33
  • tab.activeBackground#1b1820
  • tab.activeBorderTop#8545ed80
  • tab.border#1f1625
  • tab.hoverBackground#15131844
  • tab.hoverForeground#dbb0ffc9
  • tab.inactiveBackground#151318
  • tab.inactiveForeground#be6aff88
  • terminal.ansiBrightYellow#eedafd
  • terminal.foreground#be6aff
  • titleBar.activeBackground#151318
  • titleBar.activeForeground#b06de4
  • titleBar.inactiveBackground#151318
  • titleBar.inactiveForeground#be6aff88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#249756
markup.heading, variable, variable.other.constant.js, storage.modifier.package.java, storage.modifier.import.java, punctuation.definition.string.end.html, punctuation.definition.string.begin.html#dbb0fdf9
constant.other.placeholder#fa74f3
string#f5c39ff9
variable.other.readwrite.alias#fcebfff9
constant.other.color, constant.language#00f7ff
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#D145ED
storage.type.annotation.java, meta.declaration.annotation.java, punctuation.definition.annotation.java, meta.declaration.annotation.java#6ba4d5italic
storage.modifier.java, meta.class.java#e9a44bitalic
storage.type.java, meta.method.java, meta.class.java, entity.name.type.class.java, entity.name.type.record.java, entity.name.function.java
storage.type.generic, entity.name.tag.html, keyword.other.import, keyword.other.package#be6afff9
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, punctuation.bracket.angle#D145ED
keyword.control, constant.other.color, punctuation.separator, punctuation.terminator, keyword.other.template, punctuation.definition.annotation#D145ED
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, meta.method-call#be6afff9
entity.name.function, variable.function, meta.function-call, keyword.other.special-method#d64c6f
meta.function-call#DBB0FDF9
storage.modifier.import, storage.modifier.package#ebe7f0
support.other.variable, string.other.link#f07178
constant.character, constant.escape#f2f6f7
keyword.other.unit, keyword.other#D145ED
support.constant#cdf59ff9
constant.numeric, variable.parameter#31cfff
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#8ae0ec
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ba73e4
entity.name#f0742citalic
support.type, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class, entity.other.attribute-name.id#ba73e4
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, meta.at-rule.media.header.css#D145ED
support.constant.property-value.css, support.constant.font-name, constant.other.color.rgb-value.hex, constant.numeric.css, meta.property-value.css, keyword.other.unit#f5c39ff9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#D145ED
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
text.html, source.vue, string.unquoted.html, text.html.basic, punctuation.attribute-shorthand.event.html, punctuation.attribute-shorthand.bind.html, keyword.control.conditional, property.value.dotenv, source.dotenv#D145ED
text.html.derivative#fd9df8
meta.at-rule.keyframes.body.css, source.css#f5c39ff9
variable.parameter.keyframe-list.css#d64c6f
support.function, keyword.control#be6afff9
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
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#82AAFFitalic
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#D145ED
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#D145ED
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#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 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, punctuation.definition.list_item.markdown#f0d7ff
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, entity.name.section.markdown#b789f3
markup.italic#b371f0italic
markup.bold, markup.bold string#b371f0bold
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#b371f0bold
markup.underline#d06cf7underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
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
Velvet Nebula by Moondust - VS Code Theme