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#f8fafc
  • activityBar.border#e2e8f0
  • activityBar.foreground#0284c7
  • activityBar.inactiveForeground#94a3b8
  • activityBarBadge.background#0284c7
  • activityBarBadge.foreground#ffffff
  • badge.background#0284c7
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#0284c7
  • breadcrumb.focusForeground#0f172a
  • breadcrumb.foreground#64748b
  • button.background#0284c7
  • button.foreground#ffffff
  • button.hoverBackground#0369a1
  • dropdown.background#ffffff
  • dropdown.border#cbd5e1
  • dropdown.foreground#0f172a
  • editor.background#ffffff
  • editor.findMatchBackground#fde04780
  • editor.findMatchHighlightBackground#fef08a60
  • editor.foreground#0f172a
  • editor.inactiveSelectionBackground#e2e8f080
  • editor.selectionBackground#bae6fd80
  • editor.selectionHighlightBackground#bae6fd40
  • editor.wordHighlightBackground#e0f2fe80
  • editorCursor.foreground#0284c7
  • editorGroupHeader.border#e2e8f0
  • editorGroupHeader.tabsBackground#f1f5f9
  • editorLineNumber.activeForeground#0284c7
  • editorLineNumber.foreground#94a3b8
  • focusBorder#0284c7
  • foreground#1e293b
  • gitDecoration.deletedResourceForeground#dc2626
  • gitDecoration.modifiedResourceForeground#0284c7
  • gitDecoration.untrackedResourceForeground#16a34a
  • input.background#ffffff
  • input.border#cbd5e1
  • input.foreground#0f172a
  • input.placeholderForeground#94a3b8
  • list.activeSelectionBackground#e0f2fe
  • list.activeSelectionForeground#0369a1
  • list.hoverBackground#f1f5f9
  • list.inactiveSelectionBackground#f1f5f9
  • sideBar.background#f8fafc
  • sideBar.border#e2e8f0
  • sideBar.foreground#334155
  • sideBarSectionHeader.background#f1f5f9
  • sideBarSectionHeader.foreground#0f172a
  • sideBarTitle.foreground#0f172a
  • statusBar.background#0284c7
  • statusBar.debuggingBackground#d97706
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0369a1
  • statusBarItem.hoverBackground#0369a1
  • tab.activeBackground#ffffff
  • tab.activeBorder#0284c7
  • tab.activeForeground#0f172a
  • tab.border#e2e8f0
  • tab.hoverBackground#f8fafc
  • tab.inactiveBackground#f1f5f9
  • tab.inactiveForeground#64748b
  • terminal.ansiBlack#0f172a
  • terminal.ansiBlue#0284c7
  • terminal.ansiBrightBlack#64748b
  • terminal.ansiBrightBlue#38bdf8
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#22c55e
  • terminal.ansiBrightMagenta#c084fc
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#9333ea
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#f8fafc
  • terminal.ansiYellow#d97706
  • terminal.background#ffffff
  • terminal.foreground#0f172a
  • terminalCursor.foreground#0284c7
  • titleBar.activeBackground#f8fafc
  • titleBar.activeForeground#0f172a
  • titleBar.border#e2e8f0
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#94a3b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
variable, string constant.other.placeholder#7c3aed
constant.other.color#0f172a
invalid, invalid.illegal#dc2626
keyword, storage.type, storage.modifier#0284c7
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#e11d48
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e11d48
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#2563eb
meta.block variable.other#0f172a
support.other.variable, string.other.link#0891b2
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#0d9488
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#16a34a
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#0891b2
support.type#0284c7
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#9333ea
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#2563eb
variable.language#2563ebitalic
entity.name.method.js#2563ebitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#2563eb
entity.other.attribute-name#7c3aed
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d97706italic
entity.other.attribute-name.class#9333ea
source.sass keyword.control#2563eb
markup.inserted#16a34a
markup.deleted#dc2626
markup.changed#0284c7
string.regexp#0891b2
constant.character.escape#0891b2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7c3aeditalic
source.js constant.other.object.key.js string.unquoted.label.js#e11d48italic
source.json meta.structure.dictionary.json support.type.property-name.json#0284c7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7c3aed
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#0d9488
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#d97706
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#2563eb
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#9333ea
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#059669
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#c026d3
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#0891b2
text.html.markdown, punctuation.definition.list_item.markdown#0f172a
text.html.markdown markup.inline.raw.markdown#7c3aed
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#64748b
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#0284c7
markup.italic#e11d48italic
markup.bold, markup.bold string#0f172abold
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#e11d48bold
markup.underline#0891b2underline
markup.quote punctuation.definition.blockquote.markdown#64748b
markup.quoteitalic
string.other.link.title.markdown#0284c7
string.other.link.description.title.markdown#7c3aed
constant.other.reference.link.markdown#d97706
markup.raw.block#7c3aed
markup.raw.block.fenced.markdown#0f172a15
punctuation.definition.fenced.markdown#0f172a15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#0f172a
variable.language.fenced.markdown#64748b
meta.separator#64748bbold
markup.table#0f172a