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#161618
  • activityBar.activeBorder#49b8fd
  • activityBar.activeFocusBorder#d87de4
  • activityBar.background#101012
  • activityBar.foreground#f1ebf3
  • badge.background#1cf3fb
  • badge.foreground#161618
  • button.background#c882d3
  • button.foreground#f1ebf3
  • button.hoverBackground#bb86fc
  • editor.background#161618
  • editor.findMatchHighlightBackground#5b5f60d0
  • editor.foreground#f1ebf3
  • editor.hoverHighlightBackground#5b5f60d0
  • editor.selectionBackground#5b5f60d0
  • editor.selectionHighlightBackground#5b5f60d0
  • editorCursor.foreground#f1ebf3
  • editorGroupHeader.tabsBackground#0b0b12
  • editorIndentGuide.activeBackground#dec0e9
  • editorIndentGuide.background#5a535d
  • editorLightBulb.foreground#ffe055
  • editorLightBulbAutoFix.foreground#55ed6a
  • editorLineNumber.activeForeground#dec0e9
  • editorLineNumber.foreground#786d7c
  • editorOverviewRuler.background#2a3044
  • icon.foreground#1cf3fb
  • sideBar.background#121215
  • sideBar.foreground#f1ebf3
  • sideBarSectionHeader.background#121215
  • sideBarSectionHeader.foreground#ff8d8d
  • sideBarTitle.foreground#49b8fd
  • tab.activeBackground#191d2c
  • tab.inactiveBackground#101115
  • terminal.ansiBlack#222
  • terminal.ansiBlue#729fcf
  • terminal.ansiBrightBlack#333
  • terminal.ansiBrightBlue#49b8fd
  • terminal.ansiBrightCyan#1cf3fb
  • terminal.ansiBrightGreen#55ed6a
  • terminal.ansiBrightMagenta#d87de4
  • terminal.ansiBrightRed#ff4646
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe055
  • terminal.ansiCyan#55dbe0
  • terminal.ansiGreen#89df95
  • terminal.ansiMagenta#b37ebc
  • terminal.ansiRed#ff8d8d
  • terminal.ansiWhite#fafafa
  • terminal.ansiYellow#fce789
  • terminal.background#161618
  • terminal.foreground#f1ebf3
  • terminalCursor.background#333
  • terminalCursor.foreground#fafafa
  • titleBar.activeBackground#101012
  • titleBar.inactiveBackground#0a0a0c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json meta.structure.dictionary.json support.type.property-name.json#fce789—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d99de2—
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#ff8d8d—
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#729fcf—
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#fcefb5—
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#ddbae2—
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#fcbebe—
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#92b1d3—
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#f1ebf3—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E—
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown#00000050—
variable.language.fenced.markdown, meta.separator#65737E—
comment, punctuation.definition.comment#7c857ditalic
meta.tag, support.constant, variable.parameter, text.html.markdown, punctuation.definition.list_item.markdown, markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end, punctuation.section.embedded, markup.table#f1ebf3—
string, source.css support.type.property-name, string.other.link, string constant.other.placeholder#fbddb9—
variable, meta.block variable.other, entity.other.inherited-class, support.type, support.other.variable, variable.import.parameter.js, variable.other.class.js, variable.function.constructor#b1defa—
invalid, invalid.illegal, constant.numeric, constant.language, support.class, markup.deleted#ff8d8d—
source.js constant.other.object.key.js string.unquoted.label.js, markup.italic#ff8d8ditalic
markup.underline#ff8d8dunderline
storage.type, markup.bold, markup.bold string, 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#ff8d8dbold
storage.modifier#ff8d8ditalic bold
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, markup.changed, text.html.markdown markup.inline.raw.markdown#d99de2italic bold
variable.language, string.other.link.description.title.markdown#d87de4italic
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.other.attribute-name.class, string.other.link.title.markdown, constant.other.reference.link.markdown, markup.raw.block#49b8fd—
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.sgml, string.regexp#55dbe0—
entity.name, constant.other.color, constant.character, markup.inserted, constant.character.escape, constant.escape, keyword.other.template, keyword.other.substitution, 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#89df95—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#89df95italic
keyword.control, keyword.other#a9e9b2italic bold
entity.name.tag, keyword, source.sass keyword.control, markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#fce789—
*url*, *link*, *uri*—underline