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#eaeee3
  • activityBar.border#cad4bf
  • activityBar.foreground#5c834a
  • activityBar.inactiveForeground#788772
  • activityBarBadge.background#5c834a
  • activityBarBadge.foreground#ffffff
  • badge.background#5c834a
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#5c834a
  • breadcrumb.focusForeground#5c834a
  • breadcrumb.foreground#788772
  • button.background#5c834a
  • button.foreground#ffffff
  • button.hoverBackground#4a6e39
  • dropdown.background#ffffff
  • dropdown.border#cad4bf
  • dropdown.foreground#3d4737
  • editor.background#f4f6f0
  • editor.findMatchBackground#e07a5f60
  • editor.findMatchHighlightBackground#e07a5f30
  • editor.foreground#3d4737
  • editor.inactiveSelectionBackground#ccd9c240
  • editor.selectionBackground#a4c29545
  • editor.selectionHighlightBackground#a4c29525
  • editor.wordHighlightBackground#5c834a25
  • editorCursor.foreground#5c834a
  • editorGroupHeader.border#cad4bf
  • editorGroupHeader.tabsBackground#eaeee3
  • editorLineNumber.activeForeground#5c834a
  • editorLineNumber.foreground#788772
  • focusBorder#5c834a
  • foreground#3d4737
  • gitDecoration.deletedResourceForeground#c85a54
  • gitDecoration.modifiedResourceForeground#c28b3a
  • gitDecoration.untrackedResourceForeground#4a7c59
  • input.background#ffffff
  • input.border#cad4bf
  • input.foreground#3d4737
  • input.placeholderForeground#788772
  • list.activeSelectionBackground#ccd9c260
  • list.activeSelectionForeground#5c834a
  • list.hoverBackground#dde4d4
  • list.inactiveSelectionBackground#dde4d4
  • sideBar.background#eaeee3
  • sideBar.border#cad4bf
  • sideBar.foreground#3d4737
  • sideBarSectionHeader.background#eaeee3
  • sideBarSectionHeader.foreground#5c834a
  • sideBarTitle.foreground#3d4737
  • statusBar.background#dde4d4
  • statusBar.debuggingBackground#e07a5f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5c834a
  • statusBar.noFolderBackground#eaeee3
  • statusBarItem.hoverBackground#dde4d4
  • tab.activeBackground#f4f6f0
  • tab.activeBorder#5c834a
  • tab.activeForeground#3d4737
  • tab.border#cad4bf
  • tab.hoverBackground#dde4d4
  • tab.inactiveBackground#eaeee3
  • tab.inactiveForeground#788772
  • terminal.ansiBlack#4a5444
  • terminal.ansiBlue#3b7a57
  • terminal.ansiBrightBlack#788772
  • terminal.ansiBrightBlue#3b7a57
  • terminal.ansiBrightCyan#3d858e
  • terminal.ansiBrightGreen#4a7c59
  • terminal.ansiBrightMagenta#755984
  • terminal.ansiBrightRed#c85a54
  • terminal.ansiBrightWhite#3d4737
  • terminal.ansiBrightYellow#c28b3a
  • terminal.ansiCyan#3d858e
  • terminal.ansiGreen#4a7c59
  • terminal.ansiMagenta#755984
  • terminal.ansiRed#c85a54
  • terminal.ansiWhite#9aab92
  • terminal.ansiYellow#c28b3a
  • terminal.background#f4f6f0
  • terminal.foreground#3d4737
  • terminalCursor.foreground#5c834a
  • titleBar.activeBackground#eaeee3
  • titleBar.activeForeground#3d4737
  • titleBar.border#cad4bf
  • titleBar.inactiveBackground#f4f6f0
  • titleBar.inactiveForeground#788772

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a9983italic
variable, string constant.other.placeholder#8b6f9a
constant.other.color#3d4737
invalid, invalid.illegal#c85a54
keyword, storage.type, storage.modifier#755984
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#e07a5f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c85a54
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#3b7a57
meta.block variable.other#3d4737
support.other.variable, string.other.link#b86b88
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e07a5f
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#4a7c59
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#c28b3a
support.type#3d858e
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#8b6f9a
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#3b7a57
variable.language#8b6f9aitalic
entity.name.method.js#3b7a57italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3b7a57
entity.other.attribute-name#8b6f9a
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e07a5fitalic
entity.other.attribute-name.class#8b6f9a
source.sass keyword.control#3b7a57
markup.inserted#4a7c59
markup.deleted#c85a54
markup.changed#3b7a57
string.regexp#3d858e
constant.character.escape#3d858e
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#755984italic
source.js constant.other.object.key.js string.unquoted.label.js#e07a5fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#3b7a57
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#755984
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#c85a54
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#e07a5f
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#4a7c59
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#3d858e
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#8b6f9a
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#c28b3a
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#4c9ca8
text.html.markdown, punctuation.definition.list_item.markdown#3d4737
text.html.markdown markup.inline.raw.markdown#b86b88
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8a9983
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#755984
markup.italic#b86b88italic
markup.bold, markup.bold string#755984bold
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#b86b88bold
markup.underline#3b7a57underline
markup.quote punctuation.definition.blockquote.markdown#8a9983
markup.quoteitalic
string.other.link.title.markdown#3b7a57
string.other.link.description.title.markdown#755984
constant.other.reference.link.markdown#e07a5f
markup.raw.block#b86b88
markup.raw.block.fenced.markdown#3d473715
punctuation.definition.fenced.markdown#3d473715
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3d4737
variable.language.fenced.markdown#8a9983
meta.separator#8a9983bold
markup.table#3d4737