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, Storageitalic
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.strikeitalic
markup.quote punctuation.definition.blockquote.markdown#27E8A7
markup.quoteitalic
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.markdownbold
markup.italic.markdownitalic
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