Skip to main content
Coding Theme

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#0D1821
  • activityBar.foreground#2E89AC
  • activityBarBadge.background#00BBC9
  • activityBarBadge.foreground#0D1821
  • badge.background#047aa6
  • button.background#2AA19899
  • debugExceptionWidget.background#0D1821
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#0D1821
  • dropdown.background#0D1821
  • dropdown.border#00000039
  • editor.background#0D1821
  • editor.lineHighlightBackground#102233
  • editor.selectionBackground#2AA19899
  • editor.selectionHighlightBackground#2AA19899
  • editor.wordHighlightBackground#004454AA
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorCursor.foreground#FF5887
  • editorGroup.border#0D1821
  • editorGroup.dropBackground#0D1821
  • editorGroupHeader.tabsBackground#0D1821
  • editorHoverWidget.background#004052
  • editorIndentGuide.activeBackground#93A1A140
  • editorIndentGuide.background#0000004b
  • editorLineNumber.activeForeground#2E89AC
  • editorLineNumber.foreground#194b5f
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWhitespace.foreground#93A1A125
  • editorWidget.background#0D1821
  • errorForeground#ffeaea
  • focusBorder#00000039
  • input.background#0D1821
  • input.foreground#93A1A1
  • input.placeholderForeground#93A1A1AA
  • inputOption.activeBorder#2AA19899
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#a92049
  • list.activeSelectionBackground#2AA19899
  • list.activeSelectionForeground#00ffddd0
  • list.dropBackground#00445488
  • list.focusBackground#005A6F
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454AA
  • list.inactiveSelectionBackground#2AA19899
  • panel.background#0D1821
  • panel.border#00000039
  • panelTitle.activeBorder#00ffdd
  • peekView.border#00000039
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#0D1821
  • peekViewResult.fileForeground#00ffdd
  • peekViewTitle.background#0D1821
  • pickerGroup.border#000000
  • pickerGroup.foreground#2AA19899
  • progressBar.background#047aa6
  • selection.background#2AA19899
  • sideBar.background#0D1821
  • sideBar.border#00000039
  • sideBar.foreground#e4fffb57
  • sideBarSectionHeader.background#102233
  • sideBarTitle.foreground#e4fffb91
  • statusBar.background#102233
  • statusBar.border#00000039
  • statusBar.debuggingBackground#0D1821
  • statusBar.foreground#e4fffb57
  • statusBar.noFolderBackground#0D1821
  • statusBarItem.prominentBackground#0D1821
  • statusBarItem.prominentHoverBackground#0D1821
  • tab.activeBackground#0D1821
  • tab.activeBorder#00ffdd
  • tab.activeForeground#e4fffb
  • tab.inactiveBackground#0D1821
  • tab.inactiveForeground#6b8aa7
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#25BEFA
  • terminal.ansiBrightBlack#0D1821
  • terminal.ansiBrightBlue#FFD2AD
  • terminal.ansiBrightCyan#25BEFA
  • terminal.ansiBrightGreen#00BBC9
  • terminal.ansiBrightMagenta#ff5887
  • terminal.ansiBrightRed#2E89AC
  • terminal.ansiBrightWhite#FDF6E3
  • terminal.ansiBrightYellow#8dbeae
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#00BBC9
  • terminal.ansiMagenta#D33682
  • terminal.ansiRed#FF5887
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#8dbeae
  • terminal.background#0D1821
  • terminalCursor.background#0D1821
  • terminalCursor.foreground#FFD2AD
  • titleBar.activeBackground#0D1821

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FFD2AD
comment, punctuation.definition.comment#c3ddff4ditalic
punctuation.output.jekyll, punctuation.tag.jekyll, punctuation.frontmatter.jekyll, punctuation.output.liquid, punctuation.tag.liquid#269EA6
entity.name.tag.jekyll, entity.name.tag.liquid#D33682italic
punctuation.tag.jekyll, punctuation.tag.liquid#269EA6
variable.other.jekyll, variable.other.liquid#269EA6
support.function.with-args.jekyllitalic
entity.name.type.instance.jsdoc#8dbeae
variable, string constant.other.placeholder, keyword.control.default#ffd0a9
variable.other.object#ffb87dff
variable.other.object.property#FF94B3
keyword.control.conditional#d998ff
invalid#ffffff
invalid.deprecated#ffffff
keyword, storage.modifier#00BBC9
storage.type.function.arrow#269EA6
keyword.operator, 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#2aa198
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8dbeae
meta.object-literal.key#269EA6
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level, meta.var.expr, meta.block, meta.var-single-variable.expr#00ffdd
storage.type#00ffddbb
support.other.variable, string.other.link#0ec9a1italic bold underline
constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit#FF94B3
keyword.other.unit#ff6590
variable.parameter, entity.other.attribute-name.class#FFD0A9
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#4ccdd6normal
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#8dbeae
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5887
variable.language#FF5887italic
entity.name.method.js#25BEFA
meta.class-method.js entity.name.function.js, variable.function.constructor#25BEFA
entity.other.attribute-name#ff5887
markup.inserted#00BBC9
markup.deleted#FF5887
markup.changed#ff5887
string.regexp#2aa198
constant.character.escape#2aa198
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#7f2a1d
entity.name.filename.find-in-files#00BBC9
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#25BEFAitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5887italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FF5887bf
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#25BEFAbf
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#8dbeaebf
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#ff5887bf
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#2E89ACbold underline
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FF5887
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#25BEFA
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#8dbeae
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#ff5887
text.html.markdown, punctuation.definition.list_item.markdown#FFD2AD
text.html.markdown markup.raw.inline#FFD2ADcc
text.html.markdown meta.dummy.line-break#ffffff50
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#0ec9a1
markup.italic, markup.italic stringitalic
markup.bold, markup.bold stringbold
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 stringbold italic
markup.underline#00BBC9underline
markup.strike#586e75strike
markup.quote punctuation.definition.blockquote.markdown#ffffff16
markup.quote#586e75italic
string.other.link.title.markdown#25BEFA
string.other.link.description.title.markdown#ff5887
constant.other.reference.link.markdown#8dbeae
markup.raw.block#FFD2ADcc
markup.raw.block.fenced.markdown
punctuation.definition.fenced.markdown
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FFD2AD
punctuation.definition.fenced.markdown, meta.definition.language.raw.block.fenced.markdown#ffffff50
variable.language.fenced.markdown#586e75
meta.separator#586e75bold
markup.table#FFD2ADcc
text.html#eee
text.html.markdown punctuation.definition, text.html.markdown.note punctuation.definition.list_item.markdown, markup.table.markdown punctuation.definition.table.vertical-line.markdown, text.html.markdown markup.checkbox.markdown#ffffff50
text.html.markdown meta.disable-markdown punctuation.definition#2aa198
punctuation.definition.list_item.todo.done#00BBC9
punctuation.definition.list_item.todo.cancelled#FF5887
markup.checkbox.markdown markup.checkbox.checked_symbol.markdown#00BBC9
markup.admonition.markdown string.other.admonition.title.markdown#FFD2ADbold
markup.admonition.markdown markup.admonition.header.markdown
markup.admonition.markdown markup.admonition.body.markdown
markup.admonition.markdown punctuation.definition.admonition.markdown, markup.admonition.markdown punctuation.definition.heading, markup.admonition.markdown punctuation.definition.table.vertical-line, markup.admonition.markdown punctuation.definition.table.horizontal-line, markup.admonition.markdown punctuation.definition.table.alignments, markup.admonition.markdown punctuation.definition.heading, markup.admonition.markdown punctuation.definition.bold, markup.admonition.markdown punctuation.definition.italic, markup.admonition.markdown punctuation.definition.list_item, markup.admonition.markdown punctuation.definition.raw, markup.admonition.markdown markup.checkbox.markdown, markup.admonition.markdown punctuation.definition.list_item.todo.pending, markup.admonition.markdown meta.link punctuation.definition, markup.admonition.markdown meta.link.inline markup.underline.link, markup.admonition.markdown meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown punctuation.definition.entity.html, markup.admonition.markdown meta.separator.markdown, markup.admonition.markdown markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown meta.definition.language.raw.block.fenced.markdown#644ea075
markup.admonition.markdown entity.name.admonition.markdown#644ea0bold
markup.admonition.markdown markup.table, markup.admonition.markdown markup.raw, markup.admonition.markdown markup.raw.block.fenced meta.language, markup.admonition.markdown punctuation.definition.blockquote.markdown, markup.admonition.markdown meta.separator, markup.admonition.markdown markup.raw.inline, markup.admonition.markdown markup.raw.block
markup.admonition.markdown markup.quote punctuation.definition.blockquote.markdown#644ea035
markup.admonition.markdown.hint markup.admonition.header.markdown
markup.admonition.markdown.hint markup.admonition.body.markdown
markup.admonition.markdown.hint punctuation.definition.admonition.markdown, markup.admonition.markdown.hint punctuation.definition.heading, markup.admonition.markdown.hint punctuation.definition.table.vertical-line, markup.admonition.markdown.hint punctuation.definition.table.horizontal-line, markup.admonition.markdown.hint punctuation.definition.table.alignments, markup.admonition.markdown.hint punctuation.definition.heading, markup.admonition.markdown.hint punctuation.definition.bold, markup.admonition.markdown.hint punctuation.definition.italic, markup.admonition.markdown.hint punctuation.definition.list_item, markup.admonition.markdown.hint punctuation.definition.raw, markup.admonition.markdown.hint markup.checkbox.markdown, markup.admonition.markdown.hint punctuation.definition.list_item.todo.pending, markup.admonition.markdown.hint meta.link punctuation.definition, markup.admonition.markdown.hint meta.link.inline markup.underline.link, markup.admonition.markdown.hint meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.hint punctuation.definition.entity.html, markup.admonition.markdown.hint meta.separator.markdown, markup.admonition.markdown.hint markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.hint meta.definition.language.raw.block.fenced.markdown#25BEFA75
markup.admonition.markdown.hint entity.name.admonition.markdown#25BEFAbold
markup.admonition.markdown.hint markup.table, markup.admonition.markdown.hint markup.raw, markup.admonition.markdown.hint markup.raw.block.fenced meta.language, markup.admonition.markdown.hint punctuation.definition.blockquote.markdown, markup.admonition.markdown.hint meta.separator, markup.admonition.markdown.hint markup.raw.inline, markup.admonition.markdown.hint markup.raw.block
markup.admonition.markdown.hint markup.quote punctuation.definition.blockquote.markdown#25BEFA35
markup.admonition.markdown.warning markup.admonition.header.markdown
markup.admonition.markdown.warning markup.admonition.body.markdown
markup.admonition.markdown.warning punctuation.definition.admonition.markdown, markup.admonition.markdown.warning punctuation.definition.heading, markup.admonition.markdown.warning punctuation.definition.table.vertical-line, markup.admonition.markdown.warning punctuation.definition.table.horizontal-line, markup.admonition.markdown.warning punctuation.definition.table.alignments, markup.admonition.markdown.warning punctuation.definition.heading, markup.admonition.markdown.warning punctuation.definition.bold, markup.admonition.markdown.warning punctuation.definition.italic, markup.admonition.markdown.warning punctuation.definition.list_item, markup.admonition.markdown.warning punctuation.definition.raw, markup.admonition.markdown.warning markup.checkbox.markdown, markup.admonition.markdown.warning punctuation.definition.list_item.todo.pending, markup.admonition.markdown.warning meta.link punctuation.definition, markup.admonition.markdown.warning meta.link.inline markup.underline.link, markup.admonition.markdown.warning meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.warning punctuation.definition.entity.html, markup.admonition.markdown.warning meta.separator.markdown, markup.admonition.markdown.warning markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.warning meta.definition.language.raw.block.fenced.markdown#8dbeae75
markup.admonition.markdown.warning entity.name.admonition.markdown#8dbeaebold
markup.admonition.markdown.warning markup.table, markup.admonition.markdown.warning markup.raw, markup.admonition.markdown.warning markup.raw.block.fenced meta.language, markup.admonition.markdown.warning punctuation.definition.blockquote.markdown, markup.admonition.markdown.warning meta.separator, markup.admonition.markdown.warning markup.raw.inline, markup.admonition.markdown.warning markup.raw.block
markup.admonition.markdown.warning markup.quote punctuation.definition.blockquote.markdown#8dbeae35
markup.admonition.markdown.danger markup.admonition.header.markdown
markup.admonition.markdown.danger markup.admonition.body.markdown
markup.admonition.markdown.danger punctuation.definition.admonition.markdown, markup.admonition.markdown.danger punctuation.definition.heading, markup.admonition.markdown.danger punctuation.definition.table.vertical-line, markup.admonition.markdown.danger punctuation.definition.table.horizontal-line, markup.admonition.markdown.danger punctuation.definition.table.alignments, markup.admonition.markdown.danger punctuation.definition.heading, markup.admonition.markdown.danger punctuation.definition.bold, markup.admonition.markdown.danger punctuation.definition.italic, markup.admonition.markdown.danger punctuation.definition.list_item, markup.admonition.markdown.danger punctuation.definition.raw, markup.admonition.markdown.danger markup.checkbox.markdown, markup.admonition.markdown.danger punctuation.definition.list_item.todo.pending, markup.admonition.markdown.danger meta.link punctuation.definition, markup.admonition.markdown.danger meta.link.inline markup.underline.link, markup.admonition.markdown.danger meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.danger punctuation.definition.entity.html, markup.admonition.markdown.danger meta.separator.markdown, markup.admonition.markdown.danger markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.danger meta.definition.language.raw.block.fenced.markdown#FF588775
markup.admonition.markdown.danger entity.name.admonition.markdown#FF5887bold
markup.admonition.markdown.danger markup.table, markup.admonition.markdown.danger markup.raw, markup.admonition.markdown.danger markup.raw.block.fenced meta.language, markup.admonition.markdown.danger punctuation.definition.blockquote.markdown, markup.admonition.markdown.danger meta.separator, markup.admonition.markdown.danger markup.raw.inline, markup.admonition.markdown.danger markup.raw.block
markup.admonition.markdown.danger markup.quote punctuation.definition.blockquote.markdown#FF588735
markup.admonition.markdown.attention markup.admonition.header.markdown
markup.admonition.markdown.attention markup.admonition.body.markdown
markup.admonition.markdown.attention punctuation.definition.admonition.markdown, markup.admonition.markdown.attention punctuation.definition.heading, markup.admonition.markdown.attention punctuation.definition.table.vertical-line, markup.admonition.markdown.attention punctuation.definition.table.horizontal-line, markup.admonition.markdown.attention punctuation.definition.table.alignments, markup.admonition.markdown.attention punctuation.definition.heading, markup.admonition.markdown.attention punctuation.definition.bold, markup.admonition.markdown.attention punctuation.definition.italic, markup.admonition.markdown.attention punctuation.definition.list_item, markup.admonition.markdown.attention punctuation.definition.raw, markup.admonition.markdown.attention markup.checkbox.markdown, markup.admonition.markdown.attention punctuation.definition.list_item.todo.pending, markup.admonition.markdown.attention meta.link punctuation.definition, markup.admonition.markdown.attention meta.link.inline markup.underline.link, markup.admonition.markdown.attention meta.link.reference.markdown constant.other.reference.link.markdown, markup.admonition.markdown.attention punctuation.definition.entity.html, markup.admonition.markdown.attention meta.separator.markdown, markup.admonition.markdown.attention markup.table.markdown punctuation.definition.table.vertical-line.markdown, markup.admonition.markdown.attention meta.definition.language.raw.block.fenced.markdown#00BBC975
markup.admonition.markdown.attention entity.name.admonition.markdown#00BBC9bold
markup.admonition.markdown.attention markup.table, markup.admonition.markdown.attention markup.raw, markup.admonition.markdown.attention markup.raw.block.fenced meta.language, markup.admonition.markdown.attention punctuation.definition.blockquote.markdown, markup.admonition.markdown.attention meta.separator, markup.admonition.markdown.attention markup.raw.inline, markup.admonition.markdown.attention markup.raw.block
markup.admonition.markdown.attention markup.quote punctuation.definition.blockquote.markdown#00BBC935
acejump.label#ffffff
sublimelinter.mark.warning#8dbeae
sublimelinter.gutter-mark#ffffff
sublimelinter.mark.error#FF5887
markup.ignored.git_gutter#586e75
markup.untracked.git_gutter#586e75
markup.inserted.git_gutter#00BBC9
markup.changed.git_gutter#8dbeae
markup.deleted.git_gutter#FF5887
brackethighlighter.default#ff5887
brackethighlighter.unmatched#FF5887
brackethighlighter.curly#644ea0
brackethighlighter.round#8dbeae
brackethighlighter.square#25BEFA
brackethighlighter.angle#2E89AC
brackethighlighter.tag#2aa198
support.variable.property#3dd8cb
support.type.property-name.media#199edb
support.type.property-name.css#23a095
brackethighlighter.quote#00BBC9
Hexagon Color Theme Dark by Hexagon Production Software - VS Code Theme