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#f3e8ee
  • activityBar.border#dec5d4
  • activityBar.foreground#d44d7d
  • activityBar.inactiveForeground#8c7283
  • activityBarBadge.background#d44d7d
  • activityBarBadge.foreground#ffffff
  • badge.background#d44d7d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d44d7d
  • breadcrumb.focusForeground#d44d7d
  • breadcrumb.foreground#8c7283
  • button.background#d44d7d
  • button.foreground#ffffff
  • button.hoverBackground#bf3969
  • dropdown.background#ffffff
  • dropdown.border#dec5d4
  • dropdown.foreground#4d3946
  • editor.background#faf4f6
  • editor.findMatchBackground#e26d5c60
  • editor.findMatchHighlightBackground#e26d5c30
  • editor.foreground#4d3946
  • editor.inactiveSelectionBackground#e4cbd940
  • editor.selectionBackground#f2a8c345
  • editor.selectionHighlightBackground#f2a8c325
  • editor.wordHighlightBackground#8c52ff25
  • editorCursor.foreground#d44d7d
  • editorGroupHeader.border#dec5d4
  • editorGroupHeader.tabsBackground#f3e8ee
  • editorLineNumber.activeForeground#d44d7d
  • editorLineNumber.foreground#8c7283
  • focusBorder#d44d7d
  • foreground#4d3946
  • gitDecoration.deletedResourceForeground#d13862
  • gitDecoration.modifiedResourceForeground#df7a38
  • gitDecoration.untrackedResourceForeground#48a97c
  • input.background#ffffff
  • input.border#dec5d4
  • input.foreground#4d3946
  • input.placeholderForeground#8c7283
  • list.activeSelectionBackground#e4cbd960
  • list.activeSelectionForeground#d44d7d
  • list.hoverBackground#ebdbe4
  • list.inactiveSelectionBackground#ebdbe4
  • sideBar.background#f3e8ee
  • sideBar.border#dec5d4
  • sideBar.foreground#4d3946
  • sideBarSectionHeader.background#f3e8ee
  • sideBarSectionHeader.foreground#d44d7d
  • sideBarTitle.foreground#4d3946
  • statusBar.background#ebdbe4
  • statusBar.debuggingBackground#e26d5c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d44d7d
  • statusBar.noFolderBackground#f3e8ee
  • statusBarItem.hoverBackground#ebdbe4
  • tab.activeBackground#faf4f6
  • tab.activeBorder#d44d7d
  • tab.activeForeground#4d3946
  • tab.border#dec5d4
  • tab.hoverBackground#ebdbe4
  • tab.inactiveBackground#f3e8ee
  • tab.inactiveForeground#8c7283
  • terminal.ansiBlack#5d4755
  • terminal.ansiBlue#5b8def
  • terminal.ansiBrightBlack#8c7283
  • terminal.ansiBrightBlue#5b8def
  • terminal.ansiBrightCyan#389eb0
  • terminal.ansiBrightGreen#48a97c
  • terminal.ansiBrightMagenta#9656a2
  • terminal.ansiBrightRed#d13862
  • terminal.ansiBrightWhite#4d3946
  • terminal.ansiBrightYellow#df7a38
  • terminal.ansiCyan#389eb0
  • terminal.ansiGreen#48a97c
  • terminal.ansiMagenta#9656a2
  • terminal.ansiRed#d13862
  • terminal.ansiWhite#ad93a4
  • terminal.ansiYellow#df7a38
  • terminal.background#faf4f6
  • terminal.foreground#4d3946
  • terminalCursor.foreground#d44d7d
  • titleBar.activeBackground#f3e8ee
  • titleBar.activeForeground#4d3946
  • titleBar.border#dec5d4
  • titleBar.inactiveBackground#faf4f6
  • titleBar.inactiveForeground#8c7283

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9c8493italic
variable, string constant.other.placeholder#8c52ff
constant.other.color#4d3946
invalid, invalid.illegal#d13862
keyword, storage.type, storage.modifier#9656a2
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#e26d5c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d13862
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5b8def
meta.block variable.other#4d3946
support.other.variable, string.other.link#e36394
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e26d5c
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#48a97c
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#df7a38
support.type#389eb0
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#8c52ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#5b8def
variable.language#8c52ffitalic
entity.name.method.js#5b8defitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#5b8def
entity.other.attribute-name#8c52ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e26d5citalic
entity.other.attribute-name.class#8c52ff
source.sass keyword.control#5b8def
markup.inserted#48a97c
markup.deleted#d13862
markup.changed#5b8def
string.regexp#389eb0
constant.character.escape#389eb0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9656a2italic
source.js constant.other.object.key.js string.unquoted.label.js#e26d5citalic
source.json meta.structure.dictionary.json support.type.property-name.json#5b8def
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9656a2
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#d13862
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#e26d5c
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#48a97c
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#389eb0
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#8c52ff
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#df7a38
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#4eaec2
text.html.markdown, punctuation.definition.list_item.markdown#4d3946
text.html.markdown markup.inline.raw.markdown#e36394
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9c8493
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9656a2
markup.italic#e36394italic
markup.bold, markup.bold string#9656a2bold
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#e36394bold
markup.underline#5b8defunderline
markup.quote punctuation.definition.blockquote.markdown#9c8493
markup.quoteitalic
string.other.link.title.markdown#5b8def
string.other.link.description.title.markdown#9656a2
constant.other.reference.link.markdown#e26d5c
markup.raw.block#e36394
markup.raw.block.fenced.markdown#4d394615
punctuation.definition.fenced.markdown#4d394615
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#4d3946
variable.language.fenced.markdown#9c8493
meta.separator#9c8493bold
markup.table#4d3946