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#020202
  • activityBar.border#202020
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#87431D
  • activityBarBadge.foreground#ffffff
  • badge.background#8d1515
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#87431Da1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#87431Dd5
  • breadcrumb.foreground#a8a8a8
  • breadcrumbPicker.background#111111
  • button.background#12122c
  • button.hoverBackground#2b2b5a
  • debugToolBar.background#191936
  • debugToolBar.border#191936
  • diffEditor.insertedTextBackground#1eff0013
  • diffEditor.removedTextBackground#ff027822
  • dropdown.background#000000
  • dropdown.border#999999
  • editor.background#040303
  • editor.findMatchBackground#ff802bcc
  • editor.findMatchBorder#ff802b
  • editor.findMatchHighlightBackground#ff2b7c8e
  • editor.findMatchHighlightBorder#ff4444aa
  • editor.findRangeHighlightBackground#3a3a3a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#2b2b2b50
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#3a3a3a
  • editor.selectionBackground#00c3ff3a
  • editor.selectionForeground#eff8ff
  • editor.selectionHighlightBackground#6241a450
  • editor.selectionHighlightBorder#e18cc9
  • editor.wordHighlightBackground#575757
  • editorBracketMatch.background#ffffff13
  • editorCursor.background#5f3b23
  • editorCursor.foreground#ffffff
  • editorGroup.border#666666
  • editorGroup.dropBackground#2b2b5acc
  • editorGroupHeader.tabsBackground#000
  • editorGutter.addedBackground#87431D
  • editorGutter.background#050505
  • editorGutter.commentRangeForeground#f1ff28
  • editorGutter.deletedBackground#ff0055
  • editorGutter.modifiedBackground#9765c9
  • editorOverviewRuler.bracketMatchForeground#985bd143
  • editorWhitespace.foreground#ffffff40
  • editorWidget.background#000000
  • editorWidget.border#ffffff
  • focusBorder#223344
  • gitDecoration.addedResourceForeground#87431D
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#ba66ff
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#ffffff
  • input.background#151515
  • input.border#87431D
  • input.foreground#ffffff
  • input.placeholderForeground#7d7d7dd0
  • list.activeSelectionBackground#87431D
  • list.activeSelectionForeground#5efffc
  • list.dropBackground#a183d333
  • list.errorForeground#ca0d36
  • list.hoverBackground#2c145f7a
  • menu.background#000000
  • menu.foreground#fff
  • panel.background#000000
  • panel.border#87431D
  • panelSection.dropBackground#310303
  • panelTitle.activeBorder#87431D
  • panelTitle.activeForeground#ffffff
  • peekView.border#0000ff
  • peekViewEditor.background#000033
  • peekViewEditorGutter.background#00074b
  • peekViewResult.background#090b13
  • peekViewResult.fileForeground#7998fd
  • peekViewTitle.background#1a1a58
  • progressBar.background#ff5500
  • sideBar.background#000
  • sideBar.border#87431D
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#87431D
  • sideBarSectionHeader.border#888888
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#87431D
  • statusBar.border#080808
  • statusBar.debuggingBackground#292949
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#87431D
  • statusBarItem.activeBackground#2c2c62
  • statusBarItem.remoteBackground#312915
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#87431D
  • tab.activeForeground#e0e0e0
  • tab.border#070707
  • tab.hoverBackground#303030
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000
  • tab.inactiveForeground#969696
  • tab.inactiveModifiedBorder#ffcc00
  • terminal.background#000000
  • terminal.border#87431D
  • textLink.activeForeground#fffee6
  • textLink.foreground#87431D
  • titleBar.activeBackground#87431D
  • titleBar.activeForeground#fff
  • titleBar.border#000000
  • titleBar.inactiveBackground#87431D
  • titleBar.inactiveForeground#fff
  • tree.indentGuidesStroke#808080
  • welcomePage.background#000000
  • welcomePage.buttonBackground#424242
  • welcomePage.buttonHoverBackground#1b1b35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#646464italic
variable, string constant.other.placeholder#cf9d6b
constant.other.color#fff8f1
invalid, invalid.illegal#b94040
keyword, storage.type, storage.modifier#bb7423
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#bb7423
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#bb7423
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ee750b
string.quoted.double.html, string.quoted.single.js, string.quoted.double.js, string.template.ts#ffdbb7
meta.block variable.other#cf9d6b
support.other.variable, string.other.link#d4a373
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fff8f1
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#fff8f1
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#ffcb6b
support.type#b2ccd6
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#ad9073
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370
variable.language#c36866italic
constant.language.boolean.true.js, constant.language.boolean.false.js#c36866
meta.object-literal.key.js, meta.object.member.js, meta.objectliteral.js, meta.export.default.js#ad9073
entity.name.method.js#ffdbb7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffdbb7
entity.other.attribute-name#ad9073
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffcb6bitalic
entity.other.attribute-name.class#ffcb6b
source.sass keyword.control#ffdbb7
markup.inserted#c3e88d
markup.deleted#ff5370
markup.changed#c792ea
string.regexp#89ddff
constant.character.escape#89ddff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffdbb7italic
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#ee750b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bb7423
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#ad9073
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#cf9d6b
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#ffdbb7
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#ffcb6b
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#ad9073
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#ad9073
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#bb7423
text.html.markdown, punctuation.definition.list_item.markdown#fff8f1
text.html.markdown markup.inline.raw.markdown#c792ea
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#646464
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ee750b
markup.italic#cf9d6bitalic
markup.bold, markup.bold string#cf9d6bbold
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#cf9d6bbold
markup.underline#AD9073underline
markup.quote punctuation.definition.blockquote.markdown#646464
markup.quoteitalic
string.other.link.title.markdown#ffdbb7
string.other.link.description.title.markdown#c792ea
constant.other.reference.link.markdown#ffcb6b
markup.raw.block#c792ea
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fff8f1
variable.language.fenced.markdown#646464
meta.separator#646464bold
markup.table#fff8f1
Foodie by Ammar-Khan - VS Code Theme