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#3E0AAB
  • activityBar.activeFocusBorder#3E0AAB
  • activityBar.background#09001C
  • activityBar.foreground#7436f8
  • activityBarBadge.background#00ffbf
  • activityBarBadge.foreground#3E0AAB
  • button.background#3E0AAB
  • button.hoverBackground#280969
  • checkbox.border#7436f8
  • dropdown.background#04000cad
  • dropdown.border#7436f8
  • editor.background#09001C
  • editor.selectionBackground#9474da75
  • editorGroupHeader.tabsBackground#04000C
  • editorGutter.addedBackground#00ffbf
  • editorGutter.modifiedBackground#00ffbf
  • errorForeground#972c2c
  • focusBorder#7436f8
  • gitlens.trailingLineForegroundColor#9474da9d
  • icon.foreground#966df0
  • input.background#190347
  • input.border#7436f8
  • list.activeSelectionBackground#3d0aab65
  • list.focusBackground#3d0aab65
  • list.highlightForeground#966df0
  • list.hoverBackground#33088f52
  • list.inactiveSelectionBackground#3d0aab65
  • menu.background#3E0AAB
  • menu.selectionBackground#280969
  • menubar.selectionBackground#6d3ecc81
  • minimap.background#09001C
  • minimap.selectionHighlight#512f9681
  • minimapSlider.activeBackground#512f9681
  • minimapSlider.hoverBackground#512f9681
  • notifications.background#2e0783
  • notificationsInfoIcon.foreground#2968C7
  • notificationToast.border#7436f8
  • panelInput.border#7436f8
  • panelTitle.activeBorder#7436f8
  • scrollbarSlider.activeBackground#512f9681
  • scrollbarSlider.background#512f9681
  • scrollbarSlider.hoverBackground#6d3ecc81
  • searchEditor.findMatchBackground#04000C
  • sideBar.background#04000C
  • sideBarSectionHeader.background#09001C
  • statusBar.background#2968C7
  • statusBarItem.hoverBackground#20529e
  • tab.activeBorder#7436f8
  • tab.inactiveBackground#04000C
  • tab.inactiveForeground#969696
  • terminal.background#09001C
  • terminal.foreground#d6c6fc
  • titleBar.activeBackground#09001C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.double, string.quoted.double punctuation, string.quoted.single, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, string.template.js#80aef3
keyword.operator.arithmetic.js, keyword.operator.comparison.js, keyword.operator.assignment.js, keyword.operator.logical.js#d2a1ff
comment, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ffd0ead3italic
entity.name.tag.html#ec635f
entity.other.attribute-name#F0E0C0italic
meta.var.expr.js#F0E0C0
support.type.property-name.json, support.type.property-name.json punctuation#a480f3
storage.type.js#EB71B6
storage.type.js, support.class.component.js, entity.name.tag.js#f9c0c6
variable.other.constant.js#EB71B6
support.function.js, keyword.control.export.js#e6d0c5
storage.type.function.js#afa568italic
entity.name.function.js#e4d4c5
keyword.control.flow.js#97b99e
support.type.object.module.js#9c714f
variable.parameter.js#fab1f6italic
variable.other.object.js#bf9e8d
variable.other.property.js#fe7ed3
variable.other.readwrite.js#fccef9
variable.other.object.property.js#925870
variable.other.readwrite.alias.js, storage.type.function.arrow.js#d897f7
keyword.control.import.js#fe7ed3
keyword.control.from.js#fe7ed3
constant.language.import-export-all.js, constant.language.boolean.true.js, constant.language.boolean.false.js#d897f7
string.quoted.single.js, string.quoted.double.js, string.template.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.string.template.end.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js#a4a3b3
keyword.control.conditional.js#c2817f
entity.name.tag.wildcard.css#d2a1ff
entity.name.tag.css#b06c17
support.type.property-name.css, support.type.vendored.property-name.css#f9ea83
entity.other.attribute-name.id.css#a72406
entity.other.attribute-name.class.css#818eb8
support.constant.property-value.css, constant.numeric.css, string.quoted.single.css, string.quoted.double.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css#cab49d
keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.vh.css, keyword.other.unit.rem.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.deg.css#cab49d
constant.other.color.rgb-value.hex.css, support.function.misc.css#cab49d
meta.property-value.css#d4a36d
entity.other.attribute-name.pseudo-class.css#fcf0b6italic
keyword.control.at-rule.keyframes.css#e45b3c
variable.parameter.keyframe-list.css#ff957d
entity.other.keyframe-offset.css#818eb8
entity.name.tag.localname.xml#ec635f
entity.other.attribute-name.localname.xml#F0E0C0
entity.name.section.markdown, punctuation.definition.heading.markdown#fe7ed3italic underline
string.other.link.title.markdown#fab1f6
markup.inline.raw.string.markdown#fab1f6italic
markup.bold.markdown#d897f7
markup.underline.link.markdown#a84ffa
Ren and Stimpy Show: Space Madness Color Palette by victoriasuarez97 - VS Code Theme