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#07070a
  • activityBar.border#2e2e3d40
  • activityBar.foreground#3b82f6
  • activityBar.inactiveForeground#606073
  • activityBarBadge.background#3b82f6
  • activityBarBadge.foreground#07070a
  • button.background#3b82f6
  • button.foreground#07070a
  • button.hoverBackground#60a5fa
  • chat.avatarBackground#3b82f6
  • chat.avatarForeground#07070a
  • chat.background#07070a
  • chat.border#2e2e3d40
  • chat.replyBackground#07070a
  • chat.requestBackground#14141c
  • editor.background#0d0d12
  • editor.foreground#eaeaf2
  • editor.inactiveSelectionBackground#3b82f612
  • editor.lineHighlightBackground#1b1b26
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#3b82f62d
  • editorCursor.foreground#3b82f6
  • editorGroupHeader.tabsBackground#07070a
  • editorGroupHeader.tabsBorder#2e2e3d40
  • editorWidget.background#0d0d12
  • editorWidget.border#2e2e3da0
  • input.background#14141c
  • input.border#2e2e3da0
  • input.foreground#eaeaf2
  • input.placeholderForeground#60607380
  • inputOption.activeBorder#3b82f6
  • interactive.activeCodeBorder#3b82f6
  • interactive.background#0d0d12
  • interactive.inactiveCodeBorder#2e2e3d40
  • list.activeSelectionBackground#1b1b26
  • list.activeSelectionForeground#3b82f6
  • list.focusBackground#1b1b26
  • list.highlightForeground#60a5fa
  • list.hoverBackground#14141c88
  • list.inactiveSelectionBackground#14141c88
  • list.inactiveSelectionForeground#8c8c9e
  • panel.background#07070a
  • panel.border#2e2e3d40
  • panelTitle.activeBorder#3b82f6
  • panelTitle.activeForeground#3b82f6
  • panelTitle.inactiveForeground#606073
  • scrollbarSlider.activeBackground#3b82f635
  • scrollbarSlider.background#3b82f610
  • scrollbarSlider.hoverBackground#3b82f622
  • sideBar.background#07070a
  • sideBar.border#2e2e3d40
  • sideBar.foreground#8c8c9e
  • sideBarSectionHeader.background#14141c
  • sideBarSectionHeader.border#2e2e3d15
  • sideBarSectionHeader.foreground#eaeaf2
  • sideBarTitle.foreground#3b82f6
  • statusBar.background#07070a
  • statusBar.border#2e2e3d40
  • statusBar.foreground#3b82f6
  • statusBar.noFolderBackground#07070a
  • tab.activeBackground#0d0d12
  • tab.activeBorder#3b82f6
  • tab.activeForeground#3b82f6
  • tab.border#2e2e3d15
  • tab.inactiveBackground#07070a
  • tab.inactiveForeground#606073
  • terminal.ansiCyan#3b82f6
  • terminal.background#07070a
  • terminal.border#2e2e3d40
  • terminal.foreground#eaeaf2
  • titleBar.activeBackground#07070a
  • titleBar.activeForeground#3b82f6
  • titleBar.border#2e2e3d40
  • titleBar.inactiveBackground#07070a
  • titleBar.inactiveForeground#606073
  • widget.border#2e2e3da0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606073italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#eaeaf2
constant.other.color#ffffff
invalid, invalid.illegal#ef4444
keyword, storage.type, storage.modifier, keyword.control#ef4444
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, keyword.operator#8b5cf6
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3b82f6
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#3b82f6
meta.block variable.other#eaeaf2
support.other.variable, string.other.link#ef4444
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ef4444
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#10b981
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, entity.name.type#8b5cf6
support.type#8b5cf6
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#8b5cf6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#3b82f6
variable.language#3b82f6italic
entity.name.method.js#3b82f6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3b82f6
entity.other.attribute-name#ef4444
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8b5cf6italic
entity.other.attribute-name.class#8b5cf6
source.sass keyword.control#3b82f6
markup.inserted#10b981
markup.deleted#ef4444
markup.changed#ef4444
string.regexp#3b82f6
constant.character.escape#3b82f6
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3b82f6italic
source.js constant.other.object.key.js string.unquoted.label.js#3b82f6italic
source.json meta.structure.dictionary.json support.type.property-name.json#3b82f6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8b5cf6
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#10b981
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#ef4444
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#eaeaf2
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#3b82f6
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#3b82f6
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#8b5cf6
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#10b981
text.html.markdown, punctuation.definition.list_item.markdown#eaeaf2
text.html.markdown markup.inline.raw.markdown#ef4444
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#606073
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#3b82f6bold
markup.italic#ef4444italic
markup.bold, markup.bold string#ef4444bold
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#ef4444bold
markup.underline#3b82f6underline
markup.quote punctuation.definition.blockquote.markdown#606073
markup.quoteitalic
string.other.link.title.markdown#3b82f6
string.other.link.description.title.markdown#ef4444
constant.other.reference.link.markdown#ef4444
markup.raw.block#ef4444
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eaeaf2
variable.language.fenced.markdown#606073
meta.separator#606073bold
markup.table#eaeaf2