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#E8DECA
  • activityBar.foreground#3E2E22
  • activityBarBadge.background#C65F3C
  • activityBarBadge.foreground#F5EFE0
  • badge.background#C65F3C
  • badge.foreground#F5EFE0
  • button.background#C65F3C
  • button.foreground#F5EFE0
  • button.hoverBackground#D87D5C
  • dropdown.background#EFE6D6
  • dropdown.border#D3C5AE
  • dropdown.foreground#3E2E22
  • editor.background#F5EFE0
  • editor.foreground#3E2E22
  • editor.lineHighlightBackground#E8DECA
  • editor.selectionBackground#D3C5AE
  • editorCursor.foreground#C65F3C
  • editorGroup.border#D3C5AE
  • editorGroup.dropBackground#D3C5AE80
  • editorGroupHeader.tabsBackground#E8DECA
  • editorIndentGuide.background1#D3C5AE
  • editorLineNumber.activeForeground#C65F3C
  • editorLineNumber.foreground#A89883
  • editorWhitespace.foreground#D3C5AE80
  • focusBorder#C65F3C
  • input.background#EFE6D6
  • input.border#D3C5AE
  • input.foreground#3E2E22
  • input.placeholderForeground#A89883
  • list.activeSelectionBackground#C65F3C
  • list.activeSelectionForeground#F5EFE0
  • list.dropBackground#D3C5AE
  • list.focusBackground#D3C5AE
  • list.focusForeground#3E2E22
  • list.highlightForeground#E8A887
  • list.hoverBackground#E8DECA
  • list.hoverForeground#3E2E22
  • list.inactiveSelectionBackground#E8DECA
  • list.inactiveSelectionForeground#3E2E22
  • panel.background#F5EFE0
  • panel.border#D3C5AE
  • panelTitle.activeBorder#C65F3C
  • panelTitle.activeForeground#3E2E22
  • panelTitle.inactiveForeground#A89883
  • peekView.border#C65F3C
  • peekViewEditor.background#F5EFE0
  • peekViewEditor.matchHighlightBackground#C65F3C40
  • peekViewResult.background#E8DECA
  • peekViewResult.matchHighlightBackground#C65F3C40
  • peekViewResult.selectionBackground#D3C5AE
  • peekViewTitle.background#E8DECA
  • pickerGroup.foreground#C65F3C
  • progressBar.background#C65F3C
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#C65F3C80
  • scrollbarSlider.background#D3C5AE80
  • scrollbarSlider.hoverBackground#D3C5AEA0
  • sideBar.background#E8DECA
  • sideBar.foreground#3E2E22
  • sideBarSectionHeader.background#DFD3BB
  • sideBarSectionHeader.foreground#3E2E22
  • sideBarTitle.foreground#C65F3C
  • statusBar.background#E8DECA
  • statusBar.debuggingBackground#C65F3C
  • statusBar.debuggingForeground#F5EFE0
  • statusBar.foreground#3E2E22
  • statusBar.noFolderBackground#E8DECA
  • statusBarItem.hoverBackground#D3C5AE
  • statusBarItem.remoteBackground#C65F3C
  • statusBarItem.remoteForeground#F5EFE0
  • tab.activeBackground#F5EFE0
  • tab.activeBorder#C65F3C
  • tab.activeForeground#C65F3C
  • tab.border#E8DECA
  • tab.inactiveBackground#E8DECA
  • tab.inactiveForeground#A89883
  • terminal.ansiBlack#3E2E22
  • terminal.ansiBlue#5B7C99
  • terminal.ansiBrightBlack#A89883
  • terminal.ansiBrightBlue#7E9CB9
  • terminal.ansiBrightCyan#79AFB3
  • terminal.ansiBrightGreen#93A885
  • terminal.ansiBrightMagenta#AB84A8
  • terminal.ansiBrightRed#D87D5C
  • terminal.ansiBrightWhite#F5EFE0
  • terminal.ansiBrightYellow#C6B982
  • terminal.ansiCyan#599599
  • terminal.ansiGreen#748C6A
  • terminal.ansiMagenta#8C6789
  • terminal.ansiRed#C65F3C
  • terminal.ansiWhite#E6D7C3
  • terminal.ansiYellow#A69962
  • terminal.background#F5EFE0
  • terminal.foreground#3E2E22
  • titleBar.activeBackground#E8DECA
  • titleBar.activeForeground#3E2E22
  • titleBar.inactiveBackground#E8DECA
  • titleBar.inactiveForeground#A89883
  • tree.indentGuidesStroke#D3C5AE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89883italic
variable, string constant.other.placeholder#3E2E22—
constant.other.color#3E2E22—
invalid, invalid.illegal#E63E3E—
keyword, storage.type, storage.modifier#C65F3C—
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#B34924—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D87D5C—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5B7C99—
meta.block variable.other#D87D5C—
support.other.variable, string.other.link#D87D5C—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#A69962—
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#748C6A—
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#A69962—
support.type#599599—
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#599599—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D87D5C—
variable.language#D87D5Citalic
entity.other.attribute-name#C65F3C—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#A69962italic
entity.other.attribute-name.class#A69962—
source.sass keyword.control#5B7C99—
markup.inserted#748C6A—
markup.deleted#D87D5C—
markup.changed#C65F3C—
string.regexp#599599—
constant.character.escape#599599—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5B7C99italic
source.js constant.other.object.key.js string.unquoted.label.js#D87D5Citalic
source.json meta.structure.dictionary.json support.type.property-name.json#C65F3C—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A69962—
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#5B7C99—
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#599599—
text.html.markdown, punctuation.definition.list_item.markdown#3E2E22—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C65F3C—
markup.quote#A89883italic
string.other.link.title.markdown#5B7C99—
string.other.link.description.title.markdown#A69962—
constant.other.reference.link.markdown#A69962—
markup.raw.block#A69962—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3E2E22—
variable.language.fenced.markdown#A89883—
meta.separator#A89883bold
markup.table#3E2E22—
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#B34924—
entity.name.type.class.tsx, entity.name.type.interface.tsx#A69962—
meta.type.parameters.tsx#599599—
entity.name.tag.tsx, entity.name.tag.jsx#D87D5C—
support.class.component.tsx, support.class.component.jsx#A69962italic