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#1d212f
  • activityBar.foreground#a6accd
  • activityBarBadge.background#df4576
  • activityBarBadge.foreground#E4F0FB
  • badge.background#df4576
  • badge.foreground#E4F0FB
  • button.background#717cb450
  • diffEditor.insertedTextBackground#c3e88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#242938
  • dropdown.border#ffffff10
  • editor.background#242938
  • editor.foreground#a6accd
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#717cb450
  • editor.selectionHighlightBackground#53a69750
  • editorBracketHighlight.foreground1#7390aa
  • editorBracketHighlight.foreground2#89ddff
  • editorBracketHighlight.foreground3#a6accd
  • editorBracketHighlight.foreground4#91b4d5
  • editorBracketHighlight.foreground5#c3e88d
  • editorBracketHighlight.foreground6#c792ea
  • editorBracketHighlight.unexpectedBracket.foreground#ff5370
  • editorBracketMatch.border#42675A
  • editorCursor.foreground#27E8A7
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#1d212f
  • editorHoverWidget.background#242938
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.background#4e557980
  • editorLineNumber.foreground#3a3f58
  • editorLink.activeForeground#a6accd
  • editorSuggestWidget.background#242938
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#a6accd
  • editorSuggestWidget.highlightForeground#80cbc4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWidget.background#242938
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#ffffff00
  • gitlens.trailingLineForegroundColor#506477
  • input.background#ffffff05
  • input.border#ffffff10
  • input.foreground#e4f0fb
  • input.placeholderForeground#a6accd60
  • inputValidation.errorBorder#ff5370
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBorder#ffcb6b
  • list.activeSelectionBackground#242938
  • list.activeSelectionForeground#7390aa
  • list.focusBackground#a6accd10
  • list.focusForeground#a6accd
  • list.highlightForeground#32AE85
  • list.hoverBackground#242938
  • list.hoverForeground#e4f0fb
  • list.inactiveSelectionBackground#242938
  • list.inactiveSelectionForeground#91b4d5
  • notifications.background#242938
  • notifications.foreground#e4f0fb
  • panel.border#393f59
  • panelTitle.activeForeground#a6accd
  • peekView.border#00000030
  • peekViewEditor.background#a6accd05
  • peekViewEditorGutter.background#a6accd05
  • peekViewResult.background#a6accd05
  • peekViewTitle.background#a6accd05
  • peekViewTitleDescription.foreground#a6accd60
  • scrollbar.shadow#24293800
  • scrollbarSlider.activeBackground#80cbc450
  • scrollbarSlider.background#00000050
  • scrollbarSlider.hoverBackground#00000030
  • selection.background#a6accd
  • sideBar.background#1d212f
  • sideBar.foreground#676e95
  • sideBarSectionHeader.background#1d212f
  • sideBarTitle.foreground#a6accd
  • statusBar.background#1d212f
  • statusBar.foreground#676e95
  • statusBar.noFolderBackground#242938
  • tab.activeBackground#242938
  • tab.activeForeground#a6accd
  • tab.border#191d28
  • tab.inactiveBackground#1d212f
  • tab.inactiveForeground#676e95
  • tab.unfocusedActiveForeground#a6accd
  • terminal.ansiBlack#676e95
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#676e95
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • textLink.activeForeground#a6accd
  • textLink.foreground#32AE85
  • titleBar.activeBackground#191d28
  • titleBar.activeForeground#676e95
  • titleBar.inactiveBackground#1d212f
  • titleBar.inactiveForeground#676e95
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#a6accdff—
comment, punctuation.definition.comment#506477italic
meta.parameters comment.block#42675A italic
variable, string constant.other.placeholder#add7ff—
constant.other.color#ffffff—
invalid, invalid.illegal#DF4576—
invalid.deprecated#DF4576—
keyword, storage.type, storage.modifier#32AE85—
Keyword, Storage—italic
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#7390aa—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e4f0fb—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#e4f0fb—
source.cpp meta.block variable.other#add7ff—
variable.other.constant#27E8A7—
support.other.variable, string.other.link#27E8A7—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#27E8A7—
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#53beb2—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e4f0fb—
support.type#91b4d5—
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#add7ff—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#91b4d5—
variable.language#91b4d5italic
entity.name.method.js#91b4d5italic
meta.class-method.js entity.name.function.js, variable.function.constructor#91b4d5—
entity.other.attribute-name#32AE85italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#32AE85italic
entity.other.attribute-name.class#32AE85—
source.sass keyword.control#42675A—
markup.inserted#add7ff—
markup.deleted#506477—
markup.changed#91b4d5—
string.regexp#32AE85—
constant.character.escape#32AE85—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#42675Aitalic
source.js constant.other.object.key.js string.unquoted.label.js#32AE85italic
source.json meta.structure.dictionary.json support.type.property-name.json#e4f0fb—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#add7ff—
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#91b4d5—
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#7390aa—
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#e4f0fb—
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#add7ff—
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#91b4d5—
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#7390aa—
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#e4f0fb—
text.html.markdown, punctuation.definition.list_item.markdown#e4f0fb—
text.html.markdown markup.inline.raw.markdown#add7ff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#91b4d5—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#32AE85—
markup.italic#7390aaitalic
markup.bold, markup.bold string#7390aabold
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#7390aabold
markup.underline#7390aaunderline
markup.strike—italic
markup.quote punctuation.definition.blockquote.markdown#27E8A7—
markup.quote—italic
string.other.link.title.markdown#27E8A7—
string.other.link.description.title.markdown#42675A—
constant.other.reference.link.markdown#27E8A7—
markup.raw.block#add7ff—
markup.raw.block.fenced.markdown#50647750—
punctuation.definition.fenced.markdown#50647750—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#91b4d5—
variable.language.fenced.markdown#91b4d5—
meta.separator#7390aabold
markup.table#add7ff—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#42675Abold
meta.paragraph.markdown#e4f0fb—
punctuation.definition.from-file.diff, meta.diff.header.from-file#506477—
markup.inline.raw.string.markdown#7390aa—
meta.separator.markdown#df4576—
markup.bold.markdown—bold
markup.italic.markdown—italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#add7ff—
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#df4576
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#27E8A7underline
markup.underline.link.markdown, string.other.link.description.title.markdown#27E8A7—
fenced_code.block.language, markup.inline.raw.markdown#add7ff—
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#add7ff—