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#0d0b0b
  • activityBar.border#3d2f2f
  • activityBar.foreground#ff5722
  • activityBar.inactiveForeground#a89797
  • activityBarBadge.background#ff5722
  • activityBarBadge.foreground#ffffff
  • badge.background#ff5722
  • badge.foreground#11111b
  • breadcrumb.activeSelectionForeground#ff5722
  • breadcrumb.focusForeground#ff5722
  • breadcrumb.foreground#a89797
  • button.background#ff5722
  • button.foreground#11111b
  • button.hoverBackground#e64a19
  • dropdown.background#1c1717
  • dropdown.border#3d2f2f
  • dropdown.foreground#fafaf9
  • editor.background#141111
  • editor.findMatchBackground#ff572270
  • editor.findMatchHighlightBackground#ffea0035
  • editor.foreground#fafaf9
  • editor.inactiveSelectionBackground#2b222250
  • editor.selectionBackground#ff572240
  • editor.selectionHighlightBackground#ff572220
  • editor.wordHighlightBackground#ffea0025
  • editorCursor.foreground#ff5722
  • editorGroupHeader.border#3d2f2f
  • editorGroupHeader.tabsBackground#1c1717
  • editorLineNumber.activeForeground#ff5722
  • editorLineNumber.foreground#a89797
  • focusBorder#ff5722
  • foreground#fafaf9
  • gitDecoration.deletedResourceForeground#f43f5e
  • gitDecoration.modifiedResourceForeground#ffea00
  • gitDecoration.untrackedResourceForeground#84cc16
  • input.background#1c1717
  • input.border#3d2f2f
  • input.foreground#fafaf9
  • input.placeholderForeground#a89797
  • list.activeSelectionBackground#2b222280
  • list.activeSelectionForeground#ff5722
  • list.hoverBackground#2b2222
  • list.inactiveSelectionBackground#2b2222
  • sideBar.background#1c1717
  • sideBar.border#3d2f2f
  • sideBar.foreground#fafaf9
  • sideBarSectionHeader.background#0d0b0b
  • sideBarSectionHeader.foreground#ff5722
  • sideBarTitle.foreground#fafaf9
  • statusBar.background#080707
  • statusBar.debuggingBackground#ff5722
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ff5722
  • statusBar.noFolderBackground#0d0b0b
  • statusBarItem.hoverBackground#2b2222
  • tab.activeBackground#141111
  • tab.activeBorder#ff5722
  • tab.activeForeground#fafaf9
  • tab.border#3d2f2f
  • tab.hoverBackground#2b2222
  • tab.inactiveBackground#1c1717
  • tab.inactiveForeground#a89797
  • terminal.ansiBlack#2b2222
  • terminal.ansiBlue#ff9100
  • terminal.ansiBrightBlack#a89797
  • terminal.ansiBrightBlue#ff9100
  • terminal.ansiBrightCyan#2dd4bf
  • terminal.ansiBrightGreen#84cc16
  • terminal.ansiBrightMagenta#f43f5e
  • terminal.ansiBrightRed#f43f5e
  • terminal.ansiBrightWhite#fafaf9
  • terminal.ansiBrightYellow#ffea00
  • terminal.ansiCyan#2dd4bf
  • terminal.ansiGreen#84cc16
  • terminal.ansiMagenta#f43f5e
  • terminal.ansiRed#f43f5e
  • terminal.ansiWhite#a89797
  • terminal.ansiYellow#ffea00
  • terminal.background#141111
  • terminal.foreground#fafaf9
  • terminalCursor.foreground#ff5722
  • titleBar.activeBackground#0d0b0b
  • titleBar.activeForeground#fafaf9
  • titleBar.border#3d2f2f
  • titleBar.inactiveBackground#141111
  • titleBar.inactiveForeground#a89797

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e5d5ditalic
variable, string constant.other.placeholder#ff9100
constant.other.color#fafaf9
invalid, invalid.illegal#f43f5e
keyword, storage.type, storage.modifier#f43f5e
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#ff5722
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f43f5e
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ff9100
meta.block variable.other#fafaf9
support.other.variable, string.other.link#fb7185
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff5722
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#84cc16
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#ffea00
support.type#2dd4bf
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#c084fc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff9100
variable.language#ff9100italic
entity.name.method.js#ff9100italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff9100
entity.other.attribute-name#c084fc
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff5722italic
entity.other.attribute-name.class#c084fc
source.sass keyword.control#ff9100
markup.inserted#84cc16
markup.deleted#f43f5e
markup.changed#ff9100
string.regexp#2dd4bf
constant.character.escape#2dd4bf
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#f43f5eitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5722italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff9100
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f43f5e
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#f43f5e
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#ff5722
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#84cc16
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#2dd4bf
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#c084fc
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#ffea00
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#38bdf8
text.html.markdown, punctuation.definition.list_item.markdown#fafaf9
text.html.markdown markup.inline.raw.markdown#fb7185
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6e5d5d
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f43f5e
markup.italic#fb7185italic
markup.bold, markup.bold string#f43f5ebold
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#fb7185bold
markup.underline#ff9100underline
markup.quote punctuation.definition.blockquote.markdown#6e5d5d
markup.quoteitalic
string.other.link.title.markdown#ff9100
string.other.link.description.title.markdown#f43f5e
constant.other.reference.link.markdown#ff5722
markup.raw.block#fb7185
markup.raw.block.fenced.markdown#fafaf915
punctuation.definition.fenced.markdown#fafaf915
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fafaf9
variable.language.fenced.markdown#6e5d5d
meta.separator#6e5d5dbold
markup.table#fafaf9