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#1F1129
  • activityBar.foreground#B794D1
  • activityBar.inactiveForeground#8B5FBF
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#1F1129
  • badge.background#D4AF37
  • badge.foreground#1F1129
  • breadcrumb.activeSelectionForeground#D4AF37
  • breadcrumb.background#2A1B3D
  • breadcrumb.focusForeground#B794D1
  • breadcrumb.foreground#F4F1F8
  • breadcrumbPicker.background#1F1129
  • button.background#8B5FBF
  • button.foreground#F4F1F8
  • button.hoverBackground#B794D1
  • dropdown.background#1F1129
  • dropdown.border#5A4A6B
  • dropdown.foreground#F4F1F8
  • editor.background#2A1B3D
  • editor.foreground#F4F1F8
  • editor.inactiveSelectionBackground#8B5FBF40
  • editor.lineHighlightBackground#3D2B52
  • editor.selectionBackground#8B5FBF80
  • editorCursor.foreground#D4AF37
  • editorGroupHeader.tabsBackground#1F1129
  • editorHoverWidget.background#1F1129
  • editorHoverWidget.border#5A4A6B
  • editorIndentGuide.activeBackground1#8B5FBF
  • editorIndentGuide.background1#5A4A6B
  • editorLineNumber.activeForeground#F4F1F8
  • editorLineNumber.foreground#5A4A6B
  • editorSuggestWidget.background#1F1129
  • editorSuggestWidget.border#5A4A6B
  • editorSuggestWidget.selectedBackground#8B5FBF
  • editorWhitespace.foreground#5A4A6B
  • editorWidget.background#1F1129
  • editorWidget.border#5A4A6B
  • input.background#1F1129
  • input.border#5A4A6B
  • input.foreground#F4F1F8
  • inputOption.activeBorder#8B5FBF
  • list.activeSelectionBackground#8B5FBF
  • list.activeSelectionForeground#F4F1F8
  • list.hoverBackground#5A4A6B
  • list.inactiveSelectionBackground#5A4A6B
  • notificationCenter.border#5A4A6B
  • notifications.background#1F1129
  • notifications.foreground#F4F1F8
  • notificationToast.border#5A4A6B
  • panel.background#1F1129
  • panel.border#5A4A6B
  • panelTitle.activeForeground#B794D1
  • panelTitle.inactiveForeground#8B5FBF
  • peekView.border#8B5FBF
  • peekViewEditor.background#2A1B3D
  • peekViewResult.background#1F1129
  • peekViewTitle.background#5A4A6B
  • progressBar.background#8B5FBF
  • scrollbar.shadow#1F1129
  • scrollbarSlider.activeBackground#8B5FBF
  • scrollbarSlider.background#5A4A6B80
  • scrollbarSlider.hoverBackground#8B5FBF80
  • sideBar.background#1F1129
  • sideBar.border#5A4A6B
  • sideBar.foreground#F4F1F8
  • sideBarSectionHeader.background#2A1B3D
  • sideBarSectionHeader.foreground#F4F1F8
  • sideBarTitle.foreground#B794D1
  • statusBar.background#8B5FBF
  • statusBar.debuggingBackground#D4AF37
  • statusBar.debuggingForeground#1F1129
  • statusBar.foreground#F4F1F8
  • statusBar.noFolderBackground#6A4C93
  • tab.activeBackground#2A1B3D
  • tab.activeForeground#F4F1F8
  • tab.border#5A4A6B
  • tab.inactiveBackground#1F1129
  • tab.inactiveForeground#8B5FBF
  • terminal.ansiBlack#1F1129
  • terminal.ansiBlue#8B5FBF
  • terminal.ansiBrightBlack#5A4A6B
  • terminal.ansiBrightBlue#B794D1
  • terminal.ansiBrightCyan#78DCE8
  • terminal.ansiBrightGreen#A9DC76
  • terminal.ansiBrightMagenta#D19A66
  • terminal.ansiBrightRed#F287A1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F4D03F
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06B74
  • terminal.ansiWhite#F4F1F8
  • terminal.ansiYellow#D4AF37
  • terminal.background#2A1B3D
  • terminal.foreground#F4F1F8
  • terminal.selectionBackground#8B5FBF80
  • terminalCursor.foreground#D4AF37
  • titleBar.activeBackground#2A1B3D
  • titleBar.activeForeground#F4F1F8
  • titleBar.inactiveBackground#1F1129
  • titleBar.inactiveForeground#8B5FBF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B5FBFitalic
variable, string constant.other.placeholder#F4F1F8
constant.other.color#ffffff
invalid, invalid.illegal#E06B74
keyword, storage.type, storage.modifier#B794D1
keyword.control#D4AF37
keyword.control, constant.other.color, 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#C678DD
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F287A1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#56B6C2
meta.block variable.other#F287A1
support.other.variable, string.other.link#F287A1
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#D19A66
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#F4D03F
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#98C379
entity.name.type, support.type#98C379
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#78DCE8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E06B74
variable.language#E06B74italic
entity.name.method.js#56B6C2italic
meta.class-method.js entity.name.function.js, variable.function.constructor#56B6C2
entity.other.attribute-name#C678DD
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D4AF37italic
entity.other.attribute-name.class#D4AF37
source.sass keyword.control#B794D1
markup.inserted#98C379
markup.deleted#E06B74
markup.changed#C678DD
string.regexp#56B6C2
constant.character.escape#56B6C2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#B794D1italic
source.js constant.other.object.key.js string.unquoted.label.js#E06B74italic
source.json meta.structure.dictionary.json support.type.property-name.json#C678DD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4AF37
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D19A66
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#E06B74
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#B794D1
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#56B6C2
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#F287A1
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#C678DD
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#98C379
text.html.markdown, punctuation.definition.list_item.markdown#F4F1F8
text.html.markdown markup.inline.raw.markdown#D4AF37
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8B5FBF
markup.heading.markdown punctuation.definition.heading.markdown#B794D1
markup.italic#F4F1F8italic
markup.bold string#F4F1F8bold
markup.quote markup.bold string#F4F1F8bold
markup.underlineunderline
markup.quote punctuation.definition.blockquote.markdown#8B5FBF
markup.quoteitalic
string.other.link.title.markdown#56B6C2
string.other.link.description.title.markdown#D4AF37
constant.other.reference.link.markdown#B794D1
markup.raw.block#8B5FBF
markup.raw.block.fenced.markdown#8B5FBF
punctuation.definition.fenced.markdown#56B6C2
punctuation.section.class.end#56B6C2
variable.language.fenced.markdown#D4AF37
meta.separator#8B5FBFbold
markup.table#F4F1F8
Apothecary Diary Theme by Matheus Montemurro - VS Code Theme