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#070812
  • activityBar.foreground#8b95c9
  • activityBar.inactiveForeground#3f4660
  • activityBarBadge.background#5b6bc4
  • activityBarBadge.foreground#ffffff
  • editor.background#0b0d1a
  • editor.foreground#c5cce0
  • editor.lineHighlightBackground#11142a
  • editor.selectionBackground#3949ab33
  • editorBracketHighlight.foreground1#5b6bc4
  • editorBracketHighlight.foreground2#7986cb
  • editorBracketHighlight.foreground3#9fa8da
  • editorBracketHighlight.foreground4#b39ddb
  • editorCursor.background#0b0d1a
  • editorCursor.foreground#a4adda
  • editorGroup.border#161930
  • editorGroupHeader.tabsBackground#070812
  • editorGroupHeader.tabsBorder#161930
  • editorLineNumber.activeForeground#8b95c9
  • editorLineNumber.foreground#2d3354
  • list.activeSelectionBackground#1f2547
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#13172e
  • list.inactiveSelectionBackground#141830
  • menu.background#10122a
  • menu.foreground#c5cce0
  • menu.selectionBackground#1f2547
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#1f2340
  • panel.background#070812
  • panel.border#161930
  • pickerGroup.border#1f2340
  • pickerGroup.foreground#8b95c9
  • quickInput.background#10122a
  • quickInput.foreground#c5cce0
  • quickInputList.focusBackground#1f2547
  • quickInputList.focusForeground#ffffff
  • scrollbarSlider.background#3949ab44
  • scrollbarSlider.hoverBackground#5b6bc488
  • sideBar.background#0d0f1f
  • sideBar.border#161930
  • sideBar.foreground#a8b0cc
  • sideBarSectionHeader.background#10122a
  • sideBarSectionHeader.foreground#a4adda
  • sideBarTitle.foreground#8b95c9
  • statusBar.background#070812
  • statusBar.foreground#8b95c9
  • tab.activeBackground#0b0d1a
  • tab.activeBorder#5b6bc4
  • tab.activeBorderTop#5b6bc4
  • tab.activeForeground#e8ebf5
  • tab.border#161930
  • tab.hoverBackground#13172e
  • tab.inactiveBackground#070812
  • tab.inactiveForeground#5a6184
  • tab.unfocusedActiveBorder#5b6bc488
  • tab.unfocusedActiveBorderTop#5b6bc488
  • terminal.ansiBlue#7986cb
  • terminal.ansiBrightBlue#9fa8da
  • terminal.ansiBrightCyan#b2ebf2
  • terminal.ansiBrightGreen#c8e6c9
  • terminal.ansiBrightMagenta#d1c4e9
  • terminal.ansiBrightRed#ffcdd2
  • terminal.ansiBrightYellow#fff9c4
  • terminal.ansiCyan#80deea
  • terminal.ansiGreen#a5d6a7
  • terminal.ansiMagenta#b39ddb
  • terminal.ansiRed#ef9a9a
  • terminal.ansiYellow#fff59d
  • terminal.background#04050d
  • titleBar.activeBackground#070812
  • titleBar.activeForeground#c5cce0
  • titleBar.inactiveBackground#0b0d1a
  • titleBar.inactiveForeground#5a6184

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3f4660italic
variable, string constant.other.placeholder#c5cce0
constant.other.color#ffffff
invalid, invalid.illegal#ef9a9a
keyword, storage.type, storage.modifier#b39ddb
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#80deea
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f48fb1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7986cb
meta.block variable.other#f48fb1
support.other.variable, string.other.link#f48fb1
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffab91
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#a5d6a7
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#fff59d
support.type#b2ebf2
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#b2ebf2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ef9a9a
variable.language#ef9a9aitalic
entity.name.method.js#7986cbitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7986cb
entity.other.attribute-name#b39ddb
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fff59ditalic
entity.other.attribute-name.class#fff59d
source.sass keyword.control#7986cb
markup.inserted#a5d6a7
markup.deleted#ef9a9a
markup.changed#b39ddb
string.regexp#80deea
constant.character.escape#80deea
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7986cbitalic
source.js constant.other.object.key.js string.unquoted.label.js#ef9a9aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#b39ddb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff59d
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#ffab91
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#ef9a9a
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#bcaaa4
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#7986cb
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#f48fb1
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#b39ddb
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#a5d6a7
text.html.markdown, punctuation.definition.list_item.markdown#c5cce0
text.html.markdown markup.inline.raw.markdown#b39ddb
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3f4660
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a5d6a7
markup.italic#f48fb1italic
markup.bold, markup.bold string#f48fb1bold
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#f48fb1bold
markup.underline#ffab91underline
markup.quote punctuation.definition.blockquote.markdown#3f4660
markup.quoteitalic
string.other.link.title.markdown#7986cb
string.other.link.description.title.markdown#b39ddb
constant.other.reference.link.markdown#fff59d
markup.raw.block#b39ddb
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c5cce0
variable.language.fenced.markdown#3f4660
meta.separator#3f4660bold
markup.table#c5cce0