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#050813
  • activityBar.foreground#38bdf8
  • activityBar.inactiveForeground#475569
  • activityBarBadge.background#6366f1
  • activityBarBadge.foreground#ffffff
  • badge.background#6366f1
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#6366f1
  • breadcrumb.focusForeground#38bdf8
  • breadcrumb.foreground#64748b
  • button.background#6366f1
  • button.foreground#ffffff
  • button.hoverBackground#4f46e5
  • dropdown.background#0d172e
  • dropdown.border#6366f160
  • dropdown.foreground#f1f5f9
  • editor.background#080d1a
  • editor.findMatchBackground#6366f170
  • editor.findMatchHighlightBackground#38bdf835
  • editor.foreground#f1f5f9
  • editor.inactiveSelectionBackground#1e293b50
  • editor.selectionBackground#6366f13d
  • editor.selectionHighlightBackground#38bdf825
  • editor.wordHighlightBackground#818cf830
  • editorCursor.foreground#38bdf8
  • editorGroupHeader.border#6366f1
  • editorGroupHeader.tabsBackground#0d1527
  • editorLineNumber.activeForeground#38bdf8
  • editorLineNumber.foreground#334155
  • focusBorder#6366f1
  • foreground#f1f5f9
  • gitDecoration.deletedResourceForeground#f43f5e
  • gitDecoration.modifiedResourceForeground#38bdf8
  • gitDecoration.untrackedResourceForeground#34d399
  • input.background#0d172e
  • input.border#6366f160
  • input.foreground#f1f5f9
  • input.placeholderForeground#64748b
  • list.activeSelectionBackground#19274a
  • list.activeSelectionForeground#38bdf8
  • list.hoverBackground#131f38
  • list.inactiveSelectionBackground#131f38
  • sideBar.background#050914
  • sideBar.border#131f38
  • sideBar.foreground#94a3b8
  • sideBarSectionHeader.background#0d1527
  • sideBarSectionHeader.foreground#38bdf8
  • sideBarTitle.foreground#f1f5f9
  • statusBar.background#0b1326
  • statusBar.debuggingBackground#e11d48
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#38bdf8
  • statusBar.noFolderBackground#050813
  • statusBarItem.hoverBackground#162444
  • tab.activeBackground#080d1a
  • tab.activeBorder#38bdf8
  • tab.activeForeground#38bdf8
  • tab.border#131f38
  • tab.hoverBackground#131f38
  • tab.inactiveBackground#0d1527
  • tab.inactiveForeground#94a3b8
  • terminal.ansiBlack#080d1a
  • terminal.ansiBlue#38bdf8
  • terminal.ansiBrightBlack#475569
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#5eead4
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#e879f9
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#2dd4bf
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#c084fc
  • terminal.ansiRed#f43f5e
  • terminal.ansiWhite#f1f5f9
  • terminal.ansiYellow#facc15
  • terminal.background#080d1a
  • terminal.foreground#f1f5f9
  • terminalCursor.foreground#38bdf8
  • titleBar.activeBackground#050914
  • titleBar.activeForeground#94a3b8
  • titleBar.inactiveBackground#080d1a
  • titleBar.inactiveForeground#475569

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4b5563italic
variable, string constant.other.placeholder#c084fc
constant.other.color#ffffff
invalid, invalid.illegal#f43f5e
keyword, storage.type, storage.modifier#38bdf8
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#fb7185
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f43f5e
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#818cf8
meta.block variable.other#ffffff
support.other.variable, string.other.link#a5b4fc
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#2dd4bf
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#facc15
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#60a5fa
support.type#38bdf8
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#a855f7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#818cf8
variable.language#c084fcitalic
entity.name.method.js#818cf8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#818cf8
entity.other.attribute-name#c084fc
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#facc15italic
entity.other.attribute-name.class#a855f7
source.sass keyword.control#38bdf8
markup.inserted#34d399
markup.deleted#f43f5e
markup.changed#38bdf8
string.regexp#2dd4bf
constant.character.escape#2dd4bf
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#818cf8italic
source.js constant.other.object.key.js string.unquoted.label.js#fb7185italic
source.json meta.structure.dictionary.json support.type.property-name.json#38bdf8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c084fc
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#2dd4bf
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#facc15
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#818cf8
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#fb7185
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#60a5fa
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#e879f9
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#34d399
text.html.markdown, punctuation.definition.list_item.markdown#f1f5f9
text.html.markdown markup.inline.raw.markdown#c084fc
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4b5563
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#38bdf8
markup.italic#fb7185italic
markup.bold, markup.bold string#38bdf8bold
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#fb7185bold
markup.underline#38bdf8underline
markup.quote punctuation.definition.blockquote.markdown#4b5563
markup.quoteitalic
string.other.link.title.markdown#38bdf8
string.other.link.description.title.markdown#c084fc
constant.other.reference.link.markdown#facc15
markup.raw.block#c084fc
markup.raw.block.fenced.markdown#ffffff15
punctuation.definition.fenced.markdown#ffffff15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f1f5f9
variable.language.fenced.markdown#4b5563
meta.separator#4b5563bold
markup.table#f1f5f9