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.

  • activityBarBadge.background#FF8C5B
  • button.background#FF8C5B
  • button.foreground#402B1F
  • button.hoverBackground#FFAA88
  • dropdown.background#F6E1DA
  • dropdown.border#D8B0A0
  • dropdown.foreground#3B2A20
  • editor.background#ffc5ad
  • editor.findMatchBackground#FFB9A533
  • editor.findMatchHighlightBackground#FFB9A522
  • editor.findRangeHighlightBackground#00000010
  • editor.foreground#3B2A20
  • editor.hoverHighlightBackground#00000010
  • editor.lineHighlightBackground#ffb299
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#FFD1BC66
  • editor.selectionHighlightBackground#FFD1BC44
  • editor.wordHighlightBackground#FFC4AC33
  • editor.wordHighlightStrongBackground#FFC4AC55
  • editorCursor.foreground#D84424
  • editorGroupHeader.tabsBackground#ff9170
  • editorLineNumber.foreground#ff9b77
  • editorLink.activeForeground#5B7BC6
  • editorWhitespace.foreground#C8B6AF
  • input.background#F6E1DA
  • input.border#D8B0A0
  • input.foreground#3B2A20
  • inputOption.activeBackground#963818
  • inputOption.activeBorder#FF8C5B
  • inputOption.activeForeground#3B2A20
  • list.activeSelectionBackground#ca7359
  • list.activeSelectionForeground#3B2A20
  • list.focusBackground#d88166
  • list.focusForeground#3B2A20
  • list.hoverBackground#ff784e
  • list.hoverForeground#3B2A20
  • pickerGroup.foreground#D84424
  • quickInput.background#ffa789
  • quickInput.foreground#704a33
  • quickInputTitle.background#ffbcaa
  • sideBar.background#bd755d
  • sideBar.foreground#14100f
  • sideBarSectionHeader.background#ff987c
  • sideBarSectionHeader.foreground#3B2A20
  • sideBarTitle.foreground#3B2A20
  • statusBar.background#d19376
  • statusBar.debuggingBackground#E9B8A2
  • statusBar.debuggingForeground#3B2A20
  • statusBar.foreground#3B2A20
  • tab.activeBackground#ffc1b0
  • tab.activeForeground#3B2A20
  • tab.border#97330c
  • tab.inactiveBackground#ff9572
  • tab.inactiveForeground#7E6254
  • textLink.activeForeground#FF704A
  • textLink.foreground#D84424
  • titleBar.activeBackground#f7824c
  • titleBar.activeForeground#3B2A20
  • titleBar.inactiveBackground#483024
  • titleBar.inactiveForeground#7E6254

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A4B43italic
variable, string constant.other.placeholder#529898
constant.other.color#000000
invalid, invalid.illegal#702b36
keyword, storage.type, storage.modifier#6c250f
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#632c10
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#a42600
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4361a3
meta.block variable.other#703033
support.other.variable, string.other.link#65292c
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#7a2208
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#714a21
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#893f10
support.type#39525c
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#2f5462
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6c2e38
variable.language#853218italic
entity.name.method.js#1b3e8bitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#2c374f
entity.other.attribute-name#4c0b78
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5a3a01italic
entity.other.attribute-name.class#543d12
source.sass keyword.control#33456d
markup.inserted#567527
markup.deleted#3b1104
markup.changed#24003d
string.regexp#1b4150
constant.character.escape#1e5a71
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1a3163italic
source.js constant.other.object.key.js string.unquoted.label.js#49151eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#1d0030
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3f2b07
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#3f1e14
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#4e111b
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#813323
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#142c61
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#451517
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#491c67
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#3e5a14
text.html.markdown, punctuation.definition.list_item.markdown#172c2c
text.html.markdown markup.inline.raw.markdown#3d1459
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#36434e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2f3c1c
markup.italic#461214italic
markup.bold, markup.bold string#742e31bold
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#2e1718bold
markup.underline#5c200eunderline
markup.quote punctuation.definition.blockquote.markdown#19252f
markup.quoteitalic
string.other.link.title.markdown#17326c
string.other.link.description.title.markdown#1f0432
constant.other.reference.link.markdown#462d00
markup.raw.block#4a186b
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#234e4e
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#2c4848