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#faf8f5
  • activityBar.border#f0e6d2
  • activityBar.foreground#1565c0
  • activityBar.inactiveForeground#8d7053
  • activityBarBadge.background#2e7d32
  • activityBarBadge.foreground#ffffff
  • button.background#2e7d32
  • button.foreground#ffffff
  • button.hoverBackground#1565c0
  • dropdown.background#f0e6d2
  • dropdown.border#d7ccc8
  • dropdown.foreground#3c3836
  • editor.background#faf8f5
  • editor.findMatchBackground#2e7d32aa
  • editor.findMatchHighlightBackground#2e7d3255
  • editor.findRangeHighlightBackground#2e7d3233
  • editor.foreground#3c3836
  • editor.hoverHighlightBackground#e1d5ca44
  • editor.inactiveSelectionBackground#e8ddd4
  • editor.lineHighlightBackground#f5f1eb
  • editor.selectionBackground#d7ccc8
  • editor.selectionHighlightBackground#e1d5ca
  • editor.wordHighlightBackground#d7ccc844
  • editor.wordHighlightStrongBackground#2e7d3244
  • editorCursor.foreground#2e7d32
  • editorGroupHeader.tabsBackground#f7f3ed
  • editorGroupHeader.tabsBorder#f0e6d2
  • editorHoverWidget.background#f5f1eb
  • editorHoverWidget.border#d7ccc8
  • editorIndentGuide.activeBackground#d7ccc8
  • editorIndentGuide.background#e8ddd4
  • editorLineNumber.activeForeground#1565c0
  • editorLineNumber.foreground#8d7053
  • editorLink.activeForeground#1565c0
  • editorRuler.foreground#e8ddd4
  • editorWhitespace.foreground#d7ccc8
  • input.background#f0e6d2
  • input.border#d7ccc8
  • input.foreground#3c3836
  • input.placeholderForeground#8d7053
  • panel.background#f7f3ed
  • panel.border#f0e6d2
  • panelTitle.activeForeground#1565c0
  • panelTitle.inactiveForeground#8d7053
  • scrollbarSlider.activeBackground#d7ccc8bb
  • scrollbarSlider.background#d7ccc866
  • scrollbarSlider.hoverBackground#d7ccc899
  • sideBar.background#f7f3ed
  • sideBar.border#f0e6d2
  • sideBar.foreground#5d4e37
  • sideBarSectionHeader.background#f0e6d2
  • sideBarSectionHeader.foreground#1565c0
  • sideBarTitle.foreground#1565c0
  • statusBar.background#2e7d32
  • statusBar.debuggingBackground#f57c00
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#8d7053
  • tab.activeBackground#faf8f5
  • tab.activeBorder#2e7d32
  • tab.activeForeground#3c3836
  • tab.border#f0e6d2
  • tab.inactiveBackground#f7f3ed
  • tab.inactiveForeground#6d5d4f
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#1565c0
  • terminal.ansiCyan#0097a7
  • terminal.ansiGreen#2e7d32
  • terminal.ansiMagenta#7b1fa2
  • terminal.ansiRed#d32f2f
  • terminal.ansiWhite#faf8f5
  • terminal.ansiYellow#f57c00
  • terminal.background#faf8f5
  • terminal.foreground#3c3836
  • titleBar.activeBackground#faf8f5
  • titleBar.activeForeground#3c3836
  • titleBar.border#f0e6d2
  • titleBar.inactiveBackground#f7f3ed
  • titleBar.inactiveForeground#8d7053

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8d7053italic
variable, string constant.other.placeholder#3c3836
constant.other.color#1565c0
invalid, invalid.illegal#d32f2f
keyword, storage.type, storage.modifier#2e7d32
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#6d4c41
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7b1fa2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1565c0
meta.block variable.other#7b1fa2
support.other.variable, string.other.link#7b1fa2
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f57c00
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#0097a7
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#f57c00
support.type#1565c0
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#1565c0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f57c00
variable.language#f57c00italic
entity.name.method.js#1565c0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#1565c0
entity.other.attribute-name#2e7d32
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f57c00italic
entity.other.attribute-name.class#f57c00
source.sass keyword.control#1565c0
markup.inserted#2e7d32
markup.deleted#d32f2f
markup.changed#0097a7
string.regexp#0097a7
constant.character.escape#0097a7
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1565c0italic
source.js constant.other.object.key.js string.unquoted.label.js#f57c00italic
source.json meta.structure.dictionary.json support.type.property-name.json#2e7d32
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f57c00
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#1565c0
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#7b1fa2
text.html.markdown, punctuation.definition.list_item.markdown#3c3836
text.html.markdown markup.inline.raw.markdown#0097a7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8d7053
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2e7d32
markup.italic#7b1fa2italic
markup.bold, markup.bold string#7b1fa2bold
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#7b1fa2bold
markup.underline#f57c00underline
markup.quote punctuation.definition.blockquote.markdown#8d7053
markup.quoteitalic
string.other.link.title.markdown#1565c0
string.other.link.description.title.markdown#0097a7
constant.other.reference.link.markdown#f57c00
markup.raw.block#0097a7
markup.raw.block.fenced.markdown#3c3836
punctuation.definition.fenced.markdown#3c3836
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3c3836
variable.language.fenced.markdown#8d7053
meta.separator#8d7053bold
markup.table#3c3836