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.background#0A0008
  • activityBar.foreground#FF4DB8
  • activityBar.inactiveForeground#3D1A4A
  • activityBarBadge.background#FF4DB8
  • activityBarBadge.foreground#ffffff
  • badge.background#FF4DB8
  • badge.foreground#ffffff
  • button.background#FF4DB8
  • button.foreground#ffffff
  • button.hoverBackground#C778DD
  • dropdown.background#180018
  • dropdown.border#2A0030
  • dropdown.foreground#F2D4F5
  • editor.background#000000
  • editor.foreground#F2D4F5
  • editor.inactiveSelectionBackground#FF4DB822
  • editor.lineHighlightBackground#1C0020
  • editor.selectionBackground#FF4DB844
  • editorCursor.foreground#FF4DB8
  • editorGroupHeader.tabsBackground#0E000C
  • editorLineNumber.activeForeground#C778DD
  • editorLineNumber.foreground#3D1A4A
  • editorWhitespace.foreground#2A0035
  • focusBorder#FF4DB8
  • input.background#180018
  • input.border#2A0030
  • input.foreground#F2D4F5
  • input.placeholderForeground#3D1A4A
  • list.activeSelectionBackground#2A0030
  • list.activeSelectionForeground#FF4DB8
  • list.hoverBackground#1C0020
  • list.hoverForeground#F2D4F5
  • list.inactiveSelectionBackground#180018
  • notifications.background#180018
  • notifications.border#2A0030
  • notifications.foreground#F2D4F5
  • panel.background#0E000C
  • panel.border#2A0030
  • panelTitle.activeBorder#FF4DB8
  • panelTitle.activeForeground#FF4DB8
  • panelTitle.inactiveForeground#5A2A6A
  • progressBar.background#FF4DB8
  • scrollbarSlider.activeBackground#FF4DB855
  • scrollbarSlider.background#2A003077
  • scrollbarSlider.hoverBackground#FF4DB833
  • sideBar.background#0E000C
  • sideBar.foreground#D9A8E8
  • sideBarSectionHeader.background#180018
  • sideBarSectionHeader.foreground#C778DD
  • sideBarTitle.foreground#FF4DB8
  • statusBar.background#180018
  • statusBar.foreground#FF4DB8
  • statusBarItem.hoverBackground#2A0030
  • tab.activeBackground#120010
  • tab.activeBorderTop#FF4DB8
  • tab.activeForeground#FF4DB8
  • tab.border#1C0020
  • tab.inactiveBackground#0E000C
  • tab.inactiveForeground#5A2A6A
  • terminal.ansiBlue#C778DD
  • terminal.ansiCyan#E0A0F0
  • terminal.ansiMagenta#FF4DB8
  • terminal.ansiRed#FF5370
  • terminal.background#120010
  • terminal.foreground#F2D4F5
  • titleBar.activeBackground#0A0008
  • titleBar.activeForeground#F2D4F5
  • titleBar.inactiveBackground#0A0008

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3D1A4Aitalic
variable, string constant.other.placeholder#F2D4F5
constant.other.color#FF4DB8
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#FF4DB8bold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#E0A0F0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF4DB8
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#C778DD
meta.block variable.other#F2D4F5
support.other.variable, string.other.link#E0A0F0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF79C6
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#D9A8E8
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#C778DDbold
support.type#E0A0F0
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#D9A8E8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF4DB8
variable.language#FF4DB8italic
entity.name.method.js#C778DDitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#C778DD
entity.other.attribute-name#FF79C6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E0A0F0italic
entity.other.attribute-name.class#FF79C6
source.sass keyword.control#C778DD
markup.inserted#D9A8E8
markup.deleted#FF5370
markup.changed#C778DD
string.regexp#FF79C6
constant.character.escape#E0A0F0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#C778DDitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF4DB8italic
source.json meta.structure.dictionary.json support.type.property-name.json#FF4DB8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C778DD
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#E0A0F0
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#FF79C6
text.html.markdown, punctuation.definition.list_item.markdown#F2D4F5
text.html.markdown markup.inline.raw.markdown#C778DD
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FF4DB8bold
markup.italic#E0A0F0italic
markup.bold, markup.bold string#FF79C6bold
markup.underline#E0A0F0underline
markup.table#F2D4F5
Aestwave Purple Pink Minimalist Theme by Amelita Dela Torre - VS Code Theme