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.activeBackground#121419
  • activityBar.background#121419
  • activityBar.foreground#6c6f82
  • activityBarBadge.background#a4b9d5
  • activityBarBadge.foreground#3c3f4e
  • badge.background#a0b9d8
  • badge.foreground#32343e
  • button.background#a4b9d5
  • button.foreground#3c3f4e
  • debugToolBar.background#121419
  • dropdown.background#121419
  • dropdown.foreground#3c3f4e
  • editor.background#121419
  • editor.foreground#b5b4c9
  • editor.lineHighlightBackground#1a1c23
  • editor.selectionBackground#1a1c23
  • editor.selectionHighlightBackground#1a1c2300
  • editor.wordHighlightBackground#1a1c2300
  • editor.wordHighlightStrongBackground#1a1c2300
  • editorBracketMatch.background#32343e
  • editorBracketMatch.border#32343e
  • editorGroup.border#121419
  • editorGroupHeader.noTabsBackground#121419
  • editorGroupHeader.tabsBackground#121419
  • editorGutter.addedBackground#92c47e
  • editorGutter.deletedBackground#fe9f7c
  • editorGutter.modifiedBackground#a0b9d8
  • editorIndentGuide.background#32343e
  • editorInlayHint.background#1a1c23
  • editorInlayHint.foreground#32343e
  • editorLineNumber.activeForeground#32343e
  • editorLineNumber.foreground#32343e
  • editorOverviewRuler.background#121419
  • editorOverviewRuler.border#121419
  • editorSuggestWidget.focusHighlightForeground#a0b9d8
  • editorSuggestWidget.highlightForeground#8296b0
  • editorWidget.background#121419
  • editorWidget.border#32343e
  • editorWidget.foreground#6c6f82
  • focusBorder#32343e
  • foreground#6c6f82
  • gitDecoration.addedResourceForeground#92c47e
  • gitDecoration.deletedResourceForeground#fe9f7c
  • gitDecoration.ignoredResourceForeground#32343e
  • gitDecoration.modifiedResourceForeground#d2b45f
  • icon.foreground#6c6f82
  • input.background#1a1c23
  • input.foreground#6c6f82
  • list.activeSelectionBackground#1a1c23
  • list.activeSelectionForeground#a4b9d5
  • list.focusOutline#121419
  • list.highlightForeground#a0b9d8
  • list.hoverBackground#1a1c23
  • list.inactiveSelectionBackground#1a1c23
  • menu.separatorBackground#3c3f4e
  • minimap.selectionHighlight#32343e
  • minimapGutter.addedBackground#92c47e
  • minimapGutter.deletedBackground#fe9f7c
  • minimapGutter.modifiedBackground#d2b45f
  • minimapSlider.activeBackground#1a1c23aa
  • minimapSlider.hoverBackground#1a1c23aa
  • panel.border#121419
  • panelInput.border#32343e
  • panelTitle.activeBorder#121419
  • panelTitle.activeForeground#a0b9d8
  • panelTitle.inactiveForeground#32343e
  • scrollbar.shadow#121419
  • scrollbarSlider.background#1a1c23
  • selection.background#32343e
  • settings.checkboxBackground#1a1c23
  • settings.checkboxBorder#32343e
  • settings.checkboxForeground#6c6f82
  • settings.dropdownBackground#1a1c23
  • settings.dropdownBorder#32343e
  • settings.dropdownForeground#6c6f82
  • settings.focusedRowBackground#1a1c23
  • settings.focusedRowBorder#32343e
  • settings.headerForeground#a4b9d5
  • settings.modifiedItemIndicator#a4b9d5
  • settings.numberInputBackground#1a1c23
  • settings.numberInputBorder#32343e
  • settings.numberInputForeground#6c6f82
  • settings.rowHoverBackground#1a1c23
  • settings.textInputBackground#1a1c23
  • settings.textInputBorder#32343e
  • settings.textInputForeground#6c6f82
  • sideBar.background#121419
  • sideBar.foreground#6c6f82
  • sideBarSectionHeader.background#121419
  • sideBarSectionHeader.foreground#6c6f82
  • sideBarTitle.foreground#6c6f82
  • statusBar.background#121419
  • statusBar.foreground#6c6f82
  • statusBar.noFolderBackground#121419
  • tab.activeBackground#121419
  • tab.activeForeground#6c6f82
  • tab.border#121419
  • tab.inactiveBackground#121419
  • tab.inactiveForeground#32343e
  • terminal.ansiBlack#21242c
  • terminal.ansiBlue#8296b0
  • terminal.ansiBrightBlack#32343e
  • terminal.ansiBrightBlue#a0b9d8
  • terminal.ansiBrightCyan#7dc2c7
  • terminal.ansiBrightGreen#92c47e
  • terminal.ansiBrightMagenta#c6aed7
  • terminal.ansiBrightRed#fe9f7c
  • terminal.ansiBrightWhite#f0ecfe
  • terminal.ansiBrightYellow#d2b45f
  • terminal.ansiCyan#659ea2
  • terminal.ansiGreen#76a065
  • terminal.ansiMagenta#a18daf
  • terminal.ansiRed#cf8164
  • terminal.ansiWhite#b5b4c9
  • terminal.ansiYellow#ab924c
  • terminal.background#121419
  • terminal.border#121419
  • terminal.foreground#b5b4c9
  • textLink.activeForeground#a4b9d5
  • textLink.foreground#a4b9d5
  • textPreformat.foreground#7dc2c7
  • titleBar.activeBackground#121419
  • titleBar.activeForeground#6c6f82
  • titleBar.inactiveBackground#121419
  • tree.indentGuidesStroke#32343e
  • widget.shadow#121419

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#32343e
variable, string constant.other.placeholder#7dc2c7
constant.other.color#b5b4c9
invalid, invalid.illegal#cf8164
keyword, storage.type, storage.modifier#8296b0
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, support.type.property-name.json#8696ae
entity.other.attribute-name#b5b4c9
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#659ea2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#a0b9d8
meta.block variable.other#659ea2
support.other.variable, string.other.link#659ea2
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, entity.name.type.instance.jsdoc#a18daf
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, string.quoted.single.ts, punctuation.definition.string.begin, punctuation.definition.string.end#659ea2
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#7dc2c7
support.type#a18daf
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#b5b4c9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#cf8164
variable.language#cf8164
entity.name.method.js#a0b9d8
meta.class-method.js entity.name.function.js, variable.function.constructor#a0b9d8
entity.other.attribute-name#b5b4c9
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7dc2c7
entity.other.attribute-name.class#7dc2c7
source.sass keyword.control#a0b9d8
markup.inserted#659ea2
markup.deleted#cf8164
markup.changed#8296b0
string.regexp#89DDFF
constant.character.escape#7dc2c7
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a0b9d8
source.js constant.other.object.key.js string.unquoted.label.js#cf8164
source.json meta.structure.dictionary.json support.type.property-name.json#8296b0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7dc2c7
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#a18daf
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#cf8164
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#cf8164
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#a0b9d8
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#659ea2
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#8296b0
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#659ea2
text.html.markdown, punctuation.definition.list_item.markdown#7dc2c7
text.html.markdown markup.inline.raw.markdown#8296b0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8296b0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#659ea2
markup.italic#659ea2italic
markup.bold, markup.bold string#659ea2bold
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#659ea2bold
markup.underline#a18dafunderline
markup.quote punctuation.definition.blockquote.markdown#8296b0
markup.quoteitalic
string.other.link.title.markdown#a0b9d8
string.other.link.description.title.markdown#8296b0
constant.other.reference.link.markdown#7dc2c7
markup.raw.block#8296b0
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7dc2c7
variable.language.fenced.markdown#8296b0
meta.separator#8296b0bold
markup.table#7dc2c7