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.activeBackground#af5f5f
  • activityBar.activeBorder#af5f5f
  • activityBar.background#121212
  • activityBar.foreground#dfdfaf
  • activityBarBadge.background#af5f5f
  • badge.background#af5f5f
  • button.background#af5f5f
  • editor.background#080808
  • editor.foreground#dfdfaf
  • editor.lineHighlightBackground#121212
  • editor.lineHighlightBorder#121212
  • editor.selectionBackground#875f5f70
  • editorGroupHeader.tabsBackground#121212
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#282828
  • editorLineNumber.activeForeground#dfdfaf
  • editorLineNumber.foreground#444444
  • editorLink.activeForeground#ff0000
  • editorRuler.foreground#333333
  • editorSuggestWidget.background#080808
  • editorSuggestWidget.foreground#dfdfaf
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#af5f5f
  • focusBorder#444444
  • foreground#dfdfaf
  • input.background#080808
  • input.border#444444
  • list.activeSelectionBackground#af5f5f
  • list.focusBackground#af5f5f
  • list.focusForeground#dfdfaf
  • list.highlightForeground#ffffff
  • list.inactiveSelectionBackground#af5f5f
  • menu.background#121212
  • menu.border#444444
  • menu.foreground#dfdfaf
  • menu.selectionBackground#af5f5f
  • menu.selectionForeground#dfdfaf
  • notifications.background#121212
  • notifications.foreground#585858
  • panel.background#080808
  • panel.border#444444
  • peekView.border#444444
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#af5f5f60
  • pickerGroup.border#444444
  • pickerGroup.foreground#585858
  • progressBar.background#af5f5f
  • quickInput.background#121212
  • quickInput.foreground#dfdfaf
  • quickInputList.focusBackground#af5f5f
  • selection.background#af5f5f
  • sideBar.background#080808
  • sideBar.border#444444
  • sideBarTitle.foreground#dfdfaf
  • statusBar.background#000000
  • statusBar.debuggingBackground#af5f5f
  • statusBar.foreground#8a8a8a
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#666666
  • tab.activeBorder#121212
  • tab.activeForeground#dfdfaf
  • tab.border#121212
  • tab.hoverBackground#333333
  • tab.hoverBorder#333333
  • tab.hoverForeground#dfdfaf
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#666650
  • textLink.activeForeground#af8787
  • textLink.foreground#af5f5f
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1a1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#87875f
comment.line.documentation, comment.block.documentation#afaf7c
variable, string constant.other.placeholder, variable.parameter, meta.function-call.arguments#87afaf
constant.other.color#ffffff
invalid, invalid.illegal#af5f5f
keyword, storage.type, storage.modifier, keyword.other.unit, keyword.other#878787
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution#878787
punctuation.definition.tag, punctuation.definition.arguments, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.separator.element, punctuation.separator.arguments, punctuation.section.embedded, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#dfdfaf
meta.attribute#dfaf87
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#af5f5f
entity.name.function, meta.function-call, variable.function, support.function#875f5f
keyword.control.directive.include, meta.preprocessor.include#dfaf87
entity.name.function.preprocessor, keyword.other.special-method, entity.name.function.macro, meta.macro#dfaf87
meta.block variable.other#af5f5f
support.other.variable, string.other.link#af5f5f
constant.numeric, constant.language, support.constant, constant.character, constant.escape#af5f00
string, punctuation.definition.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#ffdf87
entity.name.namespace#dfaf87
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#af875f
support.type#af875f
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#af875f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#af5f5f
variable.language#af8787
variable.other.enummember#af8787
entity.name.method.js#875f5f
meta.class-method.js entity.name.function.js, variable.function.constructor#875f5f
entity.other.attribute-name#af875f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#dfaf87
entity.other.attribute-name.class#dfaf87
source.sass keyword.control#875f5f
markup.inserted#008787
markup.deleted#af5f5f
markup.changed#af875f
string.regexp#af8787
constant.character.escape#af8787
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#875f5f
source.js constant.other.object.key.js string.unquoted.label.js#af5f5f
source.json meta.structure.dictionary.json support.type.property-name.json#af8787
text.html.markdown, punctuation.definition.list_item.markdown#dfdfaf
text.html.markdown markup.inline.raw.markdown#af875f
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#dfdfaf
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#dfdfaf
entity.name.section.markdown#dfaf87
markup.italicitalic
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
markup.underlineunderline
markup.quote punctuation.definition.blockquote.markdown#ffdf87
markup.quote
string.other.link.title.markdown#875f5f
string.other.link.description.title.markdown#af875f
constant.other.reference.link.markdown#dfaf87
markup.raw.block#af875f
markup.raw.block.fenced.markdown#1c1c1c50
punctuation.definition.fenced.markdown#1c1c1c50
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#dfdfaf
variable.language.fenced.markdown#ffdf87
meta.separator#ffdf87bold
markup.table#dfdfaf
punctuation.definition.list.begin.markdown#87afaf
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, punctuation.definition.constant.markdown, constant.other.reference.link.markdown#af5f5f
meta.link.inline.markdown#ffdf87
punctuation.definition.table.toml, entity.other.attribute-name.table.toml#dfaf87
keyword.key.toml#87afaf