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#070f18
  • activityBar.foreground#22D3EE
  • activityBar.inactiveForeground#5B8899
  • activityBarBadge.background#0EA5E9
  • activityBarBadge.foreground#042023
  • editor.background#0c1824
  • editor.foreground#E0F2FE
  • editor.inactiveSelectionBackground#38BDF833
  • editor.lineHighlightBackground#0EA5E933
  • editor.selectionBackground#38BDF855
  • editorCursor.foreground#7DD3FC
  • editorLineNumber.activeForeground#7DD3FC
  • editorLineNumber.foreground#5B7FA8
  • panel.background#070f18
  • panel.border#164e63
  • panelInput.border#38BDF855
  • panelTitle.activeForeground#E0F2FE
  • panelTitle.inactiveForeground#22D3EECC
  • sideBar.background#070f18
  • sideBar.foreground#E0F2FE
  • sideBarTitle.foreground#22D3EE
  • statusBar.background#070f18
  • statusBar.debuggingBackground#070f18
  • statusBar.debuggingForeground#E0F2FE
  • statusBar.foreground#E0F2FE
  • statusBar.noFolderBackground#070f18
  • statusBar.noFolderForeground#E0F2FE
  • statusBarItem.activeForeground#F0FDFF
  • statusBarItem.errorForeground#E0F2FE
  • statusBarItem.hoverForeground#F0FDFF
  • statusBarItem.prominentForeground#E0F2FE
  • statusBarItem.remoteForeground#E0F2FE
  • statusBarItem.warningForeground#7DD3FC
  • tab.activeBackground#0c1824
  • tab.activeBorder#38BDF8
  • tab.activeForeground#E0F2FE
  • tab.inactiveBackground#070f18
  • tab.inactiveForeground#22D3EECC
  • titleBar.activeBackground#070f18
  • titleBar.activeForeground#E0F2FE
  • titleBar.inactiveBackground#070f18
  • titleBar.inactiveForeground#22D3EE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B8FA4AAitalic
variable, string constant.other.placeholder#38BDF8
constant.other.color#E0F2FE
invalid, invalid.illegal#EF4444
keyword, storage.type, storage.modifier#7DD3FC
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#67E8F9
entity.name.tag, meta.tag.sgml#2DD4BF
markup.deleted.git_gutter#DC2626
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#E0F2FE
meta.block variable.other#38BDF8
support.other.variable, string.other.link#22D3EE
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#7DD3FC
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#BAE6FD
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#22D3EE
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#38BDF8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#818CF8
variable.language#22D3EEitalic
entity.name.method.js#E0F2FEitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#E0F2FE
entity.other.attribute-name#22D3EE
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#22D3EEitalic
entity.other.attribute-name.class#22D3EE
source.sass keyword.control#38BDF8
markup.inserted#38BDF8
markup.deleted#DC2626
markup.changed#818CF8
string.regexp#38BDF8
constant.character.escape#38BDF8
*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#22D3EEitalic
source.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 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 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#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 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 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#E0F2FE
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#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 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#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 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#38BDF8
text.html.markdown, punctuation.definition.list_item.markdown#E0F2FE
text.html.markdown markup.inline.raw.markdown#22D3EE
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#155E7599
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#38BDF8
markup.italic#22D3EEitalic
markup.bold, markup.bold string#22D3EEbold
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#22D3EEbold
markup.underline#22D3EEunderline
markup.quote punctuation.definition.blockquote.markdown#155E7599
markup.quoteitalic
string.other.link.title.markdown#38BDF8
string.other.link.description.title.markdown#22D3EE
constant.other.reference.link.markdown#22D3EE
markup.raw.block#22D3EE
markup.raw.block.fenced.markdown#38BDF844
punctuation.definition.fenced.markdown#38BDF844
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E0F2FE
variable.language.fenced.markdown#155E7599
meta.separator#155E7599bold
markup.table#E0F2FE
entity.name.tag.yaml, support.type.property-name.yaml, punctuation.support.type.property-name.begin.yaml, punctuation.support.type.property-name.end.yaml#7DD3FC
punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.mapping.begin.yaml, punctuation.definition.mapping.end.yaml, punctuation.definition.sequence.begin.yaml, punctuation.definition.sequence.end.yaml#67E8F9
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.yaml#F0F9FF