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#e6e9ef
  • activityBar.border#ccd0da
  • activityBar.foreground#1e66f5
  • activityBar.inactiveForeground#8c8fa1
  • activityBarBadge.background#7287fd
  • activityBarBadge.foreground#ffffff
  • badge.background#1e66f5
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1e66f5
  • breadcrumb.focusForeground#1e66f5
  • breadcrumb.foreground#8c8fa1
  • button.background#1e66f5
  • button.foreground#ffffff
  • button.hoverBackground#04a5e5
  • dropdown.background#ffffff
  • dropdown.border#ccd0da
  • dropdown.foreground#4c4f69
  • editor.background#eff1f5
  • editor.findMatchBackground#df8e1d60
  • editor.findMatchHighlightBackground#df8e1d30
  • editor.foreground#4c4f69
  • editor.inactiveSelectionBackground#bcc0cc50
  • editor.selectionBackground#7287fd40
  • editor.selectionHighlightBackground#7287fd25
  • editor.wordHighlightBackground#8839ef25
  • editorCursor.foreground#1e66f5
  • editorGroupHeader.border#ccd0da
  • editorGroupHeader.tabsBackground#e6e9ef
  • editorLineNumber.activeForeground#1e66f5
  • editorLineNumber.foreground#8c8fa1
  • focusBorder#1e66f5
  • foreground#4c4f69
  • gitDecoration.deletedResourceForeground#d20f39
  • gitDecoration.modifiedResourceForeground#df8e1d
  • gitDecoration.untrackedResourceForeground#40a02b
  • input.background#ffffff
  • input.border#ccd0da
  • input.foreground#4c4f69
  • input.placeholderForeground#8c8fa1
  • list.activeSelectionBackground#bcc0cc60
  • list.activeSelectionForeground#1e66f5
  • list.hoverBackground#dce0e8
  • list.inactiveSelectionBackground#dce0e8
  • sideBar.background#e6e9ef
  • sideBar.border#ccd0da
  • sideBar.foreground#4c4f69
  • sideBarSectionHeader.background#e6e9ef
  • sideBarSectionHeader.foreground#1e66f5
  • sideBarTitle.foreground#4c4f69
  • statusBar.background#dce0e8
  • statusBar.debuggingBackground#fe640b
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#1e66f5
  • statusBar.noFolderBackground#e6e9ef
  • statusBarItem.hoverBackground#dce0e8
  • tab.activeBackground#eff1f5
  • tab.activeBorder#1e66f5
  • tab.activeForeground#4c4f69
  • tab.border#ccd0da
  • tab.hoverBackground#dce0e8
  • tab.inactiveBackground#e6e9ef
  • tab.inactiveForeground#8c8fa1
  • terminal.ansiBlack#5c5f77
  • terminal.ansiBlue#1e66f5
  • terminal.ansiBrightBlack#8c8fa1
  • terminal.ansiBrightBlue#1e66f5
  • terminal.ansiBrightCyan#179299
  • terminal.ansiBrightGreen#40a02b
  • terminal.ansiBrightMagenta#8839ef
  • terminal.ansiBrightRed#d20f39
  • terminal.ansiBrightWhite#4c4f69
  • terminal.ansiBrightYellow#df8e1d
  • terminal.ansiCyan#179299
  • terminal.ansiGreen#40a02b
  • terminal.ansiMagenta#8839ef
  • terminal.ansiRed#d20f39
  • terminal.ansiWhite#acb0be
  • terminal.ansiYellow#df8e1d
  • terminal.background#eff1f5
  • terminal.foreground#4c4f69
  • terminalCursor.foreground#1e66f5
  • titleBar.activeBackground#e6e9ef
  • titleBar.activeForeground#4c4f69
  • titleBar.border#ccd0da
  • titleBar.inactiveBackground#eff1f5
  • titleBar.inactiveForeground#8c8fa1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9ca0b0italic
variable, string constant.other.placeholder#ea76cb
constant.other.color#4c4f69
invalid, invalid.illegal#d20f39
keyword, storage.type, storage.modifier#8839ef
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#fe640b
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d20f39
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1e66f5
meta.block variable.other#4c4f69
support.other.variable, string.other.link#ea76cb
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fe640b
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#40a02b
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#df8e1d
support.type#179299
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#7287fd
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#1e66f5
variable.language#ea76cbitalic
entity.name.method.js#1e66f5italic
meta.class-method.js entity.name.function.js, variable.function.constructor#1e66f5
entity.other.attribute-name#7287fd
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fe640bitalic
entity.other.attribute-name.class#7287fd
source.sass keyword.control#1e66f5
markup.inserted#40a02b
markup.deleted#d20f39
markup.changed#1e66f5
string.regexp#179299
constant.character.escape#179299
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8839efitalic
source.js constant.other.object.key.js string.unquoted.label.js#fe640bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#1e66f5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8839ef
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#d20f39
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#fe640b
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#40a02b
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#179299
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#7287fd
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#df8e1d
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#04a5e5
text.html.markdown, punctuation.definition.list_item.markdown#4c4f69
text.html.markdown markup.inline.raw.markdown#ea76cb
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9ca0b0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8839ef
markup.italic#ea76cbitalic
markup.bold, markup.bold string#8839efbold
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#ea76cbbold
markup.underline#1e66f5underline
markup.quote punctuation.definition.blockquote.markdown#9ca0b0
markup.quoteitalic
string.other.link.title.markdown#1e66f5
string.other.link.description.title.markdown#8839ef
constant.other.reference.link.markdown#fe640b
markup.raw.block#ea76cb
markup.raw.block.fenced.markdown#4c4f6915
punctuation.definition.fenced.markdown#4c4f6915
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#4c4f69
variable.language.fenced.markdown#9ca0b0
meta.separator#9ca0b0bold
markup.table#4c4f69