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#070a1f
  • activityBar.foreground#a78bfa
  • activityBar.inactiveForeground#4a5278
  • activityBarBadge.background#ec4899
  • activityBarBadge.foreground#0c1230
  • editor.background#0c1230
  • editor.foreground#dbe7ff
  • editor.lineHighlightBackground#11173a
  • editor.selectionBackground#a78bfa33
  • editorBracketHighlight.foreground1#ec4899
  • editorBracketHighlight.foreground2#a78bfa
  • editorBracketHighlight.foreground3#22d3ee
  • editorBracketHighlight.foreground4#7dd3fc
  • editorCursor.background#0c1230
  • editorCursor.foreground#ec4899
  • editorGroup.border#161c40
  • editorGroupHeader.tabsBackground#070a1f
  • editorGroupHeader.tabsBorder#161c40
  • editorLineNumber.activeForeground#22d3ee
  • editorLineNumber.foreground#3a3f6e
  • list.activeSelectionBackground#2a1d5c
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#16194a
  • list.inactiveSelectionBackground#161c40
  • menu.background#0e1438
  • menu.foreground#dbe7ff
  • menu.selectionBackground#a78bfa
  • menu.selectionForeground#0c1230
  • menu.separatorBackground#22264a
  • panel.background#070a1f
  • panel.border#161c40
  • pickerGroup.border#22264a
  • pickerGroup.foreground#22d3ee
  • quickInput.background#0e1438
  • quickInput.foreground#dbe7ff
  • quickInputList.focusBackground#a78bfa
  • quickInputList.focusForeground#0c1230
  • scrollbarSlider.background#a78bfa33
  • scrollbarSlider.hoverBackground#ec489988
  • sideBar.background#0a0f28
  • sideBar.border#161c40
  • sideBar.foreground#dbe7ff
  • sideBarSectionHeader.background#0e1438
  • sideBarSectionHeader.foreground#a78bfa
  • sideBarTitle.foreground#22d3ee
  • statusBar.background#070a1f
  • statusBar.foreground#22d3ee
  • tab.activeBackground#0c1230
  • tab.activeBorder#ec4899
  • tab.activeBorderTop#a78bfa
  • tab.activeForeground#ffffff
  • tab.border#161c40
  • tab.hoverBackground#16194a
  • tab.inactiveBackground#070a1f
  • tab.inactiveForeground#6b7299
  • tab.unfocusedActiveBorder#ec489988
  • tab.unfocusedActiveBorderTop#a78bfa88
  • terminal.ansiBlue#7dd3fc
  • terminal.ansiBrightBlue#bae6fd
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#bef264
  • terminal.ansiBrightMagenta#f472b6
  • terminal.ansiBrightRed#fda4af
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#a3e635
  • terminal.ansiMagenta#ec4899
  • terminal.ansiRed#fb7185
  • terminal.ansiYellow#fbbf24
  • terminal.background#04061a
  • terminal.foreground#dbe7ff
  • titleBar.activeBackground#070a1f
  • titleBar.activeForeground#dbe7ff
  • titleBar.inactiveBackground#0c1230
  • titleBar.inactiveForeground#6b7299

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5278italic
variable, string constant.other.placeholder#dbe7ff
constant.other.color#ffffff
invalid, invalid.illegal#fb7185
keyword, storage.type, storage.modifier#a78bfa
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#22d3ee
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f472b6
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7dd3fc
meta.block variable.other#f472b6
support.other.variable, string.other.link#f472b6
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fb923c
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#a3e635
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#fde047
support.type#67e8f9
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#67e8f9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fb7185
variable.language#fb7185italic
entity.name.method.js#7dd3fcitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7dd3fc
entity.other.attribute-name#a78bfa
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fde047italic
entity.other.attribute-name.class#fde047
source.sass keyword.control#7dd3fc
markup.inserted#a3e635
markup.deleted#fb7185
markup.changed#a78bfa
string.regexp#22d3ee
constant.character.escape#22d3ee
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7dd3fcitalic
source.js constant.other.object.key.js string.unquoted.label.js#fb7185italic
source.json meta.structure.dictionary.json support.type.property-name.json#a78bfa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fde047
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#fb923c
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#fb7185
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#ec4899
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#7dd3fc
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#f472b6
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#a78bfa
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#a3e635
text.html.markdown, punctuation.definition.list_item.markdown#dbe7ff
text.html.markdown markup.inline.raw.markdown#a78bfa
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4a5278
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a3e635
markup.italic#f472b6italic
markup.bold, markup.bold string#f472b6bold
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#f472b6bold
markup.underline#fb923cunderline
markup.quote punctuation.definition.blockquote.markdown#4a5278
markup.quoteitalic
string.other.link.title.markdown#7dd3fc
string.other.link.description.title.markdown#a78bfa
constant.other.reference.link.markdown#fde047
markup.raw.block#a78bfa
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#dbe7ff
variable.language.fenced.markdown#4a5278
meta.separator#4a5278bold
markup.table#dbe7ff