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#05031a
  • activityBar.activeBorder#09FBD3
  • activityBar.background#070425
  • activityBar.border#09FBD3
  • activityBar.foreground#FF068B
  • activityBar.inactiveForeground#FF068B59
  • activityBarBadge.background#00FF00A0
  • activityBarBadge.foreground#00FFFF
  • badge.background#00FF00A0
  • badge.foreground#00FFFF
  • banner.background#ff0000
  • breadcrumb.activeSelectionForeground#00FFFF
  • breadcrumb.background#05031A
  • breadcrumb.focusForeground#FF7300
  • breadcrumb.foreground#00AF09
  • button.background#9900FF
  • button.border#5CB800
  • button.foreground#00FFFF
  • button.hoverBackground#5CB800B0
  • commandCenter.border#09FBD3
  • contrastActiveBorder#00FFFF80
  • contrastBorder#00FF0040
  • diffEditor.border#09FBD3
  • diffEditor.diagonalFill#9900FF
  • diffEditor.insertedLineBackground#00a00060
  • diffEditor.insertedTextBorder#09FBD380
  • diffEditor.removedLineBackground#EB000060
  • diffEditor.removedTextBorder#FF068B80
  • diffEditorOverview.insertedForeground#00a000
  • diffEditorOverview.removedForeground#EB0000
  • dropdown.background#0e0a3a
  • editor.background#070425
  • editor.findMatchBackground#FF068B
  • editor.findMatchHighlightBackground#FF730080
  • editor.foldBackground#FF068B3F
  • editor.foreground#58c4c4
  • editor.lineHighlightBackground#0e0a3a
  • editor.lineHighlightBorder#0e0a3a
  • editor.selectionBackground#191266
  • editor.selectionHighlightBackground#19126680
  • editor.snippetFinalTabstopHighlightBackground#0e0a3a
  • editorBracketMatch.border#00FFFF
  • editorError.border#ff1616
  • editorGhostText.foreground#ff0000
  • editorGroup.border#9900FF
  • editorGroup.dropBackground#9900FF7F
  • editorGroupHeader.border#9c005350
  • editorGroupHeader.noTabsBackground#0E0A3A
  • editorGroupHeader.tabsBackground#0E0A3A
  • editorGroupHeader.tabsBorder#ff068b59
  • editorGutter.addedBackground#80FF00
  • editorGutter.background#9900FF20
  • editorGutter.deletedBackground#FF068B
  • editorGutter.foldingControlForeground#FF7300
  • editorGutter.modifiedBackground#09FBD3
  • editorLink.activeForeground#f72c98
  • editorPane.background#070425
  • editorRuler.foreground#FF7300
  • editorWidget.background#0d0935
  • editorWidget.border#f72c98
  • editorWidget.foreground#00FFFF
  • focusBorder#FF068B
  • foreground#58c4c4
  • gitDecoration.deletedResourceForeground#FF0000
  • gitDecoration.ignoredResourceForeground#996999
  • gitDecoration.modifiedResourceForeground#80FF00
  • gitDecoration.renamedResourceForeground#9900FF
  • gitDecoration.stageDeletedResourceForeground#EB0000
  • gitDecoration.stageModifiedResourceForeground#5CB800
  • input.background#05031A
  • inputValidation.errorBackground#070425
  • inputValidation.errorBorder#FF068B
  • list.activeSelectionBackground#9c005367
  • list.activeSelectionForeground#80FF00
  • list.errorForeground#FF000080
  • list.focusBackground#0077FF80
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#FF068B
  • list.highlightForeground#0077ff
  • list.hoverBackground#9c005342
  • list.hoverForeground#09FBD3
  • list.inactiveSelectionBackground#9c005342
  • list.warningForeground#FF7300
  • menu.border#09FBD3
  • minimap.background#9900FF20
  • minimap.errorHighlight#FF000080
  • minimap.findMatchHighlight#0077ff80
  • minimap.selectionOccurrenceHighlight#ff00aa80
  • minimap.warningHighlight#FF7300
  • minimapGutter.addedBackground#80FF00
  • minimapGutter.modifiedBackground#09FBD3
  • minimapSlider.activeBackground#80ff0080
  • minimapSlider.hoverBackground#09FBD380
  • notebook.outputContainerBackgroundColor#665fb8
  • notifications.background#070425
  • panel.border#80FF00
  • panelTitle.activeBorder#f72c98
  • panelTitle.activeForeground#f72c98
  • panelTitle.inactiveForeground#38355a
  • quickInput.background#070425
  • quickInput.foreground#ffffff
  • sash.hoverBorder#80FF00
  • scrollbar.shadow#FF0077
  • scrollbarSlider.activeBackground#80ff0080
  • scrollbarSlider.background#9900FF9F
  • scrollbarSlider.hoverBackground#09FBD380
  • settings.checkboxBackground#f72c98
  • settings.headerForeground#09FBD3
  • settings.modifiedItemIndicator#f72c98
  • sideBar.background#14113d
  • sideBar.border#09FBD3
  • sideBarSectionHeader.background#070425
  • sideBarSectionHeader.border#FF0077
  • sideBarTitle.foreground#80FF00
  • statusBar.background#770077
  • statusBar.border#FF0077
  • statusBar.foreground#80FF00
  • statusBarItem.hoverBackground#09FBD3AA
  • tab.activeBackground#77007780
  • tab.activeBorder#FF0077
  • tab.activeForeground#09FBD3
  • tab.hoverBackground#77007740
  • tab.hoverForeground#58c4c4
  • tab.inactiveBackground#070425
  • tab.inactiveForeground#665fb8
  • terminal.background#05031A
  • terminal.border#FF0077
  • titleBar.activeBackground#9900FFA0
  • titleBar.activeForeground#80FF00
  • titleBar.border#FF0077
  • titleBar.inactiveBackground#DD00FF40
  • titleBar.inactiveForeground#80FF0080
  • welcomePage.progress.foreground#09FBD3
  • widget.shadow#80FF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#737384italic
variable, string constant.other.placeholder#09FBD3
variable.parameter#FF7300italic
constant.other.color#FFFFFF
invalid, invalid.illegal#FF5370
keyword, storage.type#9900FF
storage.modifier, punctuation.section.embedded.substatement#B700FFitalic
entity.name.tag, keyword.control, constant.character.escape#FF0077
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#08F7FE
punctuation.definition.string#FFFF00
meta.tag.sgml, markup.deleted.git_gutter#FE53BB
entity.name.function#5CB800
meta.function-call, variable.function, support.function, keyword.other.special-method#76EE00
meta.block variable.other#FE53BB
support.other.variable, string.other.link#FE53BB
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#4499FFitalic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, markup.inline.raw, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FF6F77
string.quoted.double, meta.paragraph.markdown#0887FE
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#09FBD3
support.type#D6E5EF
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#D6E5EF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.other.member.powershell#FF5370
meta.scriptblock#FF6F77
variable.language#FF4998italic
entity.name.method.js#EBF3F7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#EBF3F7
entity.other.attribute-name#76EE00
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#09FBD3italic
entity.other.attribute-name.class#09FBD3
source.sass keyword.control#EBF3F7
markup.deleted#FF00AA
markup.inserted#76EE00
markup.changed#EEEE22
string.regexp#08F7FE
*url*, *link*, *uri*underline
support.function.attribute, support.variable, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#EBF3F7italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#F5D300
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#09FBD3
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#FE53BB
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#EBF3F7
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#FE53BB
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#F5D300
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#CCCCCC
constant.language.powershell, punctuation.definition.list_item.markdown, string.quoted.single, text.html.derivative, text.html.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#F5D300
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#CCCCCC
markup.italic#FE53BBitalic
markup.bold, markup.bold string#FE53BBbold
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#FE53BBbold
markup.bold.markdown, markup.italic.markdown#44B9EFbold
markup.deleted#FF00AA
markup.inserted#76EE00
markup.changed#EEEE22
markup.underlineunderline
markup.boldbold
beginning.punctuation.definition.list.markdown#BB77FF
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.link.markdown#BB77FF
meta.paragraph.markdown#66D9EF
punctuation.definition.heading.markdown#FF00AA
meta.link.inline.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown#76EE00underline
punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#FFFF00bold
markup.fenced_code.block.markdown#FF00AA
entity.name.section.markdown#33CC99bold
meta.separator#65737Ebold
markup.table#EEFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Neon Vomit Night by Steven Wiener - VS Code Theme