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#EFEEE9
  • activityBar.foreground#22322E
  • activityBar.inactiveForeground#7AAE8F
  • activityBarBadge.background#C94349
  • activityBarBadge.foreground#F8F7F3
  • badge.background#C94349
  • badge.foreground#F8F7F3
  • breadcrumb.activeSelectionForeground#C94349
  • breadcrumb.background#F8F7F3
  • breadcrumb.focusForeground#1A5D4A
  • breadcrumb.foreground#22322E
  • breadcrumbPicker.background#F0EFEB
  • button.background#7AAE8F
  • button.foreground#F8F7F3
  • button.hoverBackground#52B373
  • dropdown.background#FFFFFF
  • dropdown.border#DDD9D0
  • dropdown.foreground#22322E
  • editor.background#F8F7F3
  • editor.foreground#22322E
  • editor.inactiveSelectionBackground#7AAE8F20
  • editor.lineHighlightBackground#F0EFEB
  • editor.selectionBackground#7AAE8F40
  • editorCursor.foreground#C94349
  • editorGroupHeader.tabsBackground#F0EFEB
  • editorHoverWidget.background#F0EFEB
  • editorHoverWidget.border#DDD9D0
  • editorIndentGuide.activeBackground1#7AAE8F
  • editorIndentGuide.background1#B8C5C1
  • editorLineNumber.activeForeground#22322E
  • editorLineNumber.foreground#B8C5C1
  • editorSuggestWidget.background#F0EFEB
  • editorSuggestWidget.border#DDD9D0
  • editorSuggestWidget.selectedBackground#7AAE8F
  • editorWhitespace.foreground#B8C5C1
  • editorWidget.background#F0EFEB
  • editorWidget.border#DDD9D0
  • input.background#FFFFFF
  • input.border#DDD9D0
  • input.foreground#22322E
  • inputOption.activeBorder#7AAE8F
  • list.activeSelectionBackground#7AAE8F
  • list.activeSelectionForeground#F8F7F3
  • list.hoverBackground#E8E7E2
  • list.inactiveSelectionBackground#E8E7E2
  • notificationCenter.border#DDD9D0
  • notifications.background#F0EFEB
  • notifications.foreground#22322E
  • notificationToast.border#DDD9D0
  • panel.background#F0EFEB
  • panel.border#DDD9D0
  • panelTitle.activeForeground#1A5D4A
  • panelTitle.inactiveForeground#7AAE8F
  • peekView.border#7AAE8F
  • peekViewEditor.background#F8F7F3
  • peekViewResult.background#F0EFEB
  • peekViewTitle.background#DDD9D0
  • progressBar.background#7AAE8F
  • scrollbar.shadow#F0EFEB
  • scrollbarSlider.activeBackground#7AAE8F
  • scrollbarSlider.background#B8C5C180
  • scrollbarSlider.hoverBackground#7AAE8F80
  • sideBar.background#F0EFEB
  • sideBar.border#DDD9D0
  • sideBar.foreground#22322E
  • sideBarSectionHeader.background#F8F7F3
  • sideBarSectionHeader.foreground#22322E
  • sideBarTitle.foreground#1A5D4A
  • statusBar.background#7AAE8F
  • statusBar.debuggingBackground#C94349
  • statusBar.debuggingForeground#F8F7F3
  • statusBar.foreground#F8F7F3
  • statusBar.noFolderBackground#6596BD
  • tab.activeBackground#F8F7F3
  • tab.activeForeground#22322E
  • tab.border#DDD9D0
  • tab.inactiveBackground#F0EFEB
  • tab.inactiveForeground#7AAE8F
  • terminal.ansiBlack#22322E
  • terminal.ansiBlue#4A7A9B
  • terminal.ansiBrightBlack#7AAE8F
  • terminal.ansiBrightBlue#6596BD
  • terminal.ansiBrightCyan#7AAE8F
  • terminal.ansiBrightGreen#52B373
  • terminal.ansiBrightMagenta#8A90AB
  • terminal.ansiBrightRed#E65A67
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D49C2A
  • terminal.ansiCyan#1A5D4A
  • terminal.ansiGreen#1A5D4A
  • terminal.ansiMagenta#5C6475
  • terminal.ansiRed#C94349
  • terminal.ansiWhite#F8F7F3
  • terminal.ansiYellow#B8820A
  • terminal.background#F8F7F3
  • terminal.foreground#22322E
  • terminal.selectionBackground#7AAE8F40
  • terminalCursor.foreground#C94349
  • titleBar.activeBackground#F8F7F3
  • titleBar.activeForeground#22322E
  • titleBar.inactiveBackground#EFEEE9
  • titleBar.inactiveForeground#7AAE8F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7AAE8Fitalic
variable, string constant.other.placeholder#22322E
constant.other.color#000000
invalid, invalid.illegal#C94349
keyword, storage.type, storage.modifier#4A7A9B
keyword.control#C94349
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#1A5D4A
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#B8820A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1A5D4A
meta.block variable.other#B8820A
support.other.variable, string.other.link#B8820A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#B85C32
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#A67A2B
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#1A5D4A
entity.name.type, support.type#1A5D4A
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#4A7A9B
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#C94349
variable.language#C94349italic
entity.name.method.js#1A5D4Aitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#1A5D4A
entity.other.attribute-name#8A5AA0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#A67A2Bitalic
entity.other.attribute-name.class#A67A2B
source.sass keyword.control#4A7A9B
markup.inserted#1A5D4A
markup.deleted#C94349
markup.changed#8A5AA0
string.regexp#1A5D4A
constant.character.escape#1A5D4A
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4A7A9Bitalic
source.js constant.other.object.key.js string.unquoted.label.js#C94349italic
source.json meta.structure.dictionary.json support.type.property-name.json#8A5AA0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A67A2B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B85C32
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#C94349
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#B85C32
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#4A7A9B
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#B8820A
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#8A5AA0
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#1A5D4A
text.html.markdown, punctuation.definition.list_item.markdown#22322E
text.html.markdown markup.inline.raw.markdown#8A5AA0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7AAE8F
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1A5D4A
markup.italic#B8820Aitalic
markup.bold, markup.bold string#B8820Abold
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#B8820Abold
markup.underline#B85C32underline
markup.quote punctuation.definition.blockquote.markdown#7AAE8F
markup.quoteitalic
string.other.link.title.markdown#4A7A9B
string.other.link.description.title.markdown#8A5AA0
constant.other.reference.link.markdown#A67A2B
markup.raw.block#8A5AA0
markup.raw.block.fenced.markdown#B8C5C150
punctuation.definition.fenced.markdown#B8C5C150
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#22322E
variable.language.fenced.markdown#7AAE8F
meta.separator#7AAE8Fbold
markup.table#22322E