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#050a16
  • activityBar.foreground#22d3ee
  • activityBarBadge.background#2563eb
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#22d3ee
  • breadcrumb.background#060b18
  • breadcrumb.focusForeground#38bdf8
  • breadcrumb.foreground#3b5b8a
  • editor.background#060b18
  • editor.foreground#dbeafe
  • editor.lineHighlightBackground#0d1630
  • editorGroup.emptyBackground#060b18
  • editorGroupHeader.tabsBackground#050a16
  • editorGroupHeader.tabsBorder#050a16
  • editorIndentGuide.activeBackground1#5fd2ff
  • editorIndentGuide.activeBackground2#46b8e6
  • editorIndentGuide.activeBackground3#3196c4
  • editorIndentGuide.activeBackground4#26759a
  • editorIndentGuide.activeBackground5#1d5c7d
  • editorIndentGuide.activeBackground6#164762
  • editorIndentGuide.background1#35b4ed
  • editorIndentGuide.background2#2c91c0
  • editorIndentGuide.background3#226d93
  • editorIndentGuide.background4#1a5272
  • editorIndentGuide.background5#143d57
  • editorIndentGuide.background6#0f2b40
  • sideBar.background#050a16
  • sideBarTitle.foreground#38bdf8
  • statusBar.background#040812
  • statusBar.foreground#dbeafe
  • tab.activeBackground#060b18
  • tab.activeBorderTop#3b82f6
  • tab.activeForeground#22d3ee
  • tab.inactiveBackground#050816
  • tab.inactiveForeground#3b5b8a
  • titleBar.activeBackground#050a16
  • titleBar.activeForeground#38bdf8
  • titleBar.inactiveBackground#040812
  • titleBar.inactiveForeground#3b5b8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a6587italic
variable, string constant.other.placeholder#dbeafe
constant.other.color#38bdf8
invalid, invalid.illegal#3b82f6
keyword, storage.type, storage.modifier#3b82f6
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#2dd4bf
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7dd3fc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#38bdf8
meta.block variable.other#7dd3fc
support.other.variable, string.other.link#7dd3fc
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#22d3ee
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#4da6ff
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#dbeafe
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#60a5fa
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7dd3fc
variable.language#7dd3fcitalic
entity.name.method.js#38bdf8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#38bdf8
entity.other.attribute-name#3b82f6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#60a5faitalic
entity.other.attribute-name.class#7dd3fc
source.sass keyword.control#38bdf8
markup.inserted#38bdf8
markup.deleted#4895ef
markup.changed#3b82f6
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#38bdf8italic
source.js constant.other.object.key.js string.unquoted.label.js#7dd3fcitalic
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#38bdf8
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#22d3ee
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#2dd4bf
text.html.markdown, punctuation.definition.list_item.markdown#dbeafe
text.html.markdown markup.inline.raw.markdown#3b82f6
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#38bdf8
markup.italic#7dd3fcitalic
markup.bold, markup.bold string#7dd3fcbold