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#F3EFFA
  • activityBar.foreground#2A1B3D
  • activityBar.inactiveForeground#8B5FBF
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#2A1B3D
  • badge.background#D4AF37
  • badge.foreground#2A1B3D
  • breadcrumb.activeSelectionForeground#D4AF37
  • breadcrumb.background#FDFCFF
  • breadcrumb.focusForeground#6A4C93
  • breadcrumb.foreground#2A1B3D
  • breadcrumbPicker.background#F8F4FF
  • button.background#8B5FBF
  • button.foreground#FDFCFF
  • button.hoverBackground#7347A6
  • dropdown.background#FFFFFF
  • dropdown.border#E8DCF0
  • dropdown.foreground#2A1B3D
  • editor.background#FDFCFF
  • editor.foreground#2A1B3D
  • editor.inactiveSelectionBackground#8B5FBF20
  • editor.lineHighlightBackground#F8F4FF
  • editor.selectionBackground#8B5FBF40
  • editorCursor.foreground#D4AF37
  • editorGroupHeader.tabsBackground#F8F4FF
  • editorHoverWidget.background#F8F4FF
  • editorHoverWidget.border#E8DCF0
  • editorIndentGuide.activeBackground1#8B5FBF
  • editorIndentGuide.background1#C8B8D4
  • editorLineNumber.activeForeground#2A1B3D
  • editorLineNumber.foreground#C8B8D4
  • editorSuggestWidget.background#F8F4FF
  • editorSuggestWidget.border#E8DCF0
  • editorSuggestWidget.selectedBackground#8B5FBF
  • editorWhitespace.foreground#C8B8D4
  • editorWidget.background#F8F4FF
  • editorWidget.border#E8DCF0
  • input.background#FFFFFF
  • input.border#E8DCF0
  • input.foreground#2A1B3D
  • inputOption.activeBorder#8B5FBF
  • list.activeSelectionBackground#8B5FBF
  • list.activeSelectionForeground#FDFCFF
  • list.hoverBackground#F0E9F7
  • list.inactiveSelectionBackground#F0E9F7
  • notificationCenter.border#E8DCF0
  • notifications.background#F8F4FF
  • notifications.foreground#2A1B3D
  • notificationToast.border#E8DCF0
  • panel.background#F8F4FF
  • panel.border#E8DCF0
  • panelTitle.activeForeground#6A4C93
  • panelTitle.inactiveForeground#8B5FBF
  • peekView.border#8B5FBF
  • peekViewEditor.background#FDFCFF
  • peekViewResult.background#F8F4FF
  • peekViewTitle.background#E8DCF0
  • progressBar.background#8B5FBF
  • scrollbar.shadow#F8F4FF
  • scrollbarSlider.activeBackground#8B5FBF
  • scrollbarSlider.background#C8B8D480
  • scrollbarSlider.hoverBackground#8B5FBF80
  • sideBar.background#F8F4FF
  • sideBar.border#E8DCF0
  • sideBar.foreground#2A1B3D
  • sideBarSectionHeader.background#FDFCFF
  • sideBarSectionHeader.foreground#2A1B3D
  • sideBarTitle.foreground#6A4C93
  • statusBar.background#8B5FBF
  • statusBar.debuggingBackground#D4AF37
  • statusBar.debuggingForeground#2A1B3D
  • statusBar.foreground#FDFCFF
  • statusBar.noFolderBackground#6A4C93
  • tab.activeBackground#FDFCFF
  • tab.activeForeground#2A1B3D
  • tab.border#E8DCF0
  • tab.inactiveBackground#F8F4FF
  • tab.inactiveForeground#8B5FBF
  • terminal.ansiBlack#2A1B3D
  • terminal.ansiBlue#6A4C93
  • terminal.ansiBrightBlack#8B5FBF
  • terminal.ansiBrightBlue#8564A1
  • terminal.ansiBrightCyan#5A9394
  • terminal.ansiBrightGreen#6FA048
  • terminal.ansiBrightMagenta#A073CC
  • terminal.ansiBrightRed#D4576B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D4AF37
  • terminal.ansiCyan#4A7B7C
  • terminal.ansiGreen#5A8B3A
  • terminal.ansiMagenta#8B5FBF
  • terminal.ansiRed#B83E5A
  • terminal.ansiWhite#FDFCFF
  • terminal.ansiYellow#C4971E
  • terminal.background#FDFCFF
  • terminal.foreground#2A1B3D
  • terminal.selectionBackground#8B5FBF40
  • terminalCursor.foreground#D4AF37
  • titleBar.activeBackground#FDFCFF
  • titleBar.activeForeground#2A1B3D
  • titleBar.inactiveBackground#F3EFFA
  • titleBar.inactiveForeground#8B5FBF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B5FBFitalic
variable, string constant.other.placeholder#2A1B3D
constant.other.color#000000
invalid, invalid.illegal#B83E5A
keyword, storage.type, storage.modifier#6A4C93
keyword.control#B83E5A
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#4A7B7C
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#C4971E
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4A7B7C
meta.block variable.other#C4971E
support.other.variable, string.other.link#C4971E
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#B8652A
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#A08A2A
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#5A8B3A
entity.name.type, support.type#5A8B3A
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#6A4C93
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#B83E5A
variable.language#B83E5Aitalic
entity.name.method.js#4A7B7Citalic
meta.class-method.js entity.name.function.js, variable.function.constructor#4A7B7C
entity.other.attribute-name#8B5FBF
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#6A4C93
markup.inserted#5A8B3A
markup.deleted#B83E5A
markup.changed#8B5FBF
string.regexp#4A7B7C
constant.character.escape#4A7B7C
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6A4C93italic
source.js constant.other.object.key.js string.unquoted.label.js#B83E5Aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#8B5FBF
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#B8652A
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#B83E5A
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#6A4C93
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#4A7B7C
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#C4971E
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#8B5FBF
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#5A8B3A
text.html.markdown, punctuation.definition.list_item.markdown#2A1B3D
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#6A4C93
markup.italic#2A1B3Ditalic
markup.bold string#2A1B3Dbold
markup.quote markup.bold string#2A1B3Dbold
markup.underlineunderline
markup.quote punctuation.definition.blockquote.markdown#8B5FBF
markup.quoteitalic
string.other.link.title.markdown#4A7B7C
string.other.link.description.title.markdown#D4AF37
constant.other.reference.link.markdown#6A4C93
markup.raw.block#8B5FBF
markup.raw.block.fenced.markdown#8B5FBF
punctuation.definition.fenced.markdown#4A7B7C
punctuation.section.class.end#4A7B7C
variable.language.fenced.markdown#D4AF37
meta.separator#8B5FBFbold
markup.table#2A1B3D
Apothecary Diary Theme by Matheus Montemurro - VS Code Theme