Skip to main content
Coding Theme

Color themes

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