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#221c35
  • activityBar.activeBorder#f76ef1
  • activityBar.background#221c35
  • activityBar.foreground#f76ef1
  • activityBar.inactiveForeground#8a7d9b
  • activityBarBadge.background#2b7bbd
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#f76ef1
  • activityBarTop.foreground#cbbade
  • activityBarTop.inactiveForeground#8a7d9b
  • badge.background#9675bd
  • badge.foreground#ffffff
  • bookmarks.lineBackground#2b7bbd44
  • bookmarks.lineBorder#2b7bbd
  • breadcrumb.activeSelectionForeground#f76ef1
  • breadcrumb.background#221c35
  • breadcrumb.focusForeground#f76ef1
  • breadcrumb.foreground#cbbade
  • breadcrumbPicker.background#221c35
  • button.background#342950
  • button.foreground#cbbade
  • checkbox.background#221c35
  • commandCenter.activeBackground#342950
  • commandCenter.background#221c35
  • debugConsole.errorForeground#c43053
  • debugConsole.infoForeground#76b65b
  • debugConsole.sourceForeground#2b7bbd
  • debugConsole.warningForeground#ff874b
  • debugIcon.breakpointCurrentStackframeForeground#f5cb40
  • debugIcon.breakpointForeground#ff4b73
  • debugIcon.continueForeground#96e474
  • debugIcon.restartForeground#96e474
  • debugIcon.stepIntoForeground#9768f8
  • debugIcon.stepOutForeground#9768f8
  • debugIcon.stepOverForeground#44a3f5
  • debugIcon.stopForeground#ff4b73
  • debugTokenExpression.boolean#ff874b
  • debugTokenExpression.error#c43053
  • debugTokenExpression.name#9768f8
  • debugTokenExpression.number#ff874b
  • debugTokenExpression.string#96e474
  • debugTokenExpression.value#f76ef1
  • debugToolBar.background#221c35
  • debugToolBar.border#342950
  • diffEditor.border#342950
  • diffEditor.diagonalFill#342950
  • diffEditor.insertedLineBackground#96e47411
  • diffEditor.insertedTextBackground#96e47411
  • diffEditor.insertedTextBorder#96e47411
  • diffEditor.removedLineBackground#ff4b7311
  • diffEditor.removedTextBackground#ff4b7311
  • diffEditor.removedTextBorder#ff4b7322
  • diffEditorGutter.insertedLineBackground#96e47411
  • diffEditorGutter.removedLineBackground#ff4b7311
  • dropdown.background#221c35
  • editor.background#130f1e
  • editor.findMatchBackground#54e7f844
  • editor.findMatchBorder#54e7f888
  • editor.findMatchHighlightBackground#54e7f844
  • editor.findMatchHighlightBorder#54e7f888
  • editor.foldBackground#56458544
  • editor.foreground#cbbade
  • editor.lineHighlightBackground#342950
  • editor.lineHighlightBorder#322145
  • editor.selectionBackground#4a3168
  • editor.stackFrameHighlightBackground#f76ef144
  • editor.wordHighlightBackground#437e8644
  • editor.wordHighlightBorder#54e7f888
  • editor.wordHighlightStrongBackground#437e8644
  • editor.wordHighlightStrongBorder#54e7f888
  • editorBracketHighlight.foreground1#ff4b73cc
  • editorBracketHighlight.foreground2#ff874bcc
  • editorBracketHighlight.foreground3#f5cb40cc
  • editorBracketHighlight.foreground4#96e474cc
  • editorBracketHighlight.foreground5#54e7f8cc
  • editorBracketHighlight.foreground6#44a3f5cc
  • editorBracketMatch.background#342950
  • editorBracketMatch.border#8a7d9b
  • editorCodeLens.foreground#8a7d9b
  • editorCursor.background#130f1e
  • editorCursor.foreground#9675bd
  • editorError.background#c4305322
  • editorError.foreground#c43053
  • editorGroup.dropBackground#45376a88
  • editorGroupHeader.tabsBackground#130f1e
  • editorGutter.addedBackground#96e47488
  • editorGutter.deletedBackground#ff4b7388
  • editorGutter.modifiedBackground#44a3f588
  • editorIndentGuide.activeBackground1#322145
  • editorIndentGuide.background1#564585
  • editorInlayHint.background#221c35
  • editorInlayHint.foreground#8a7d9b
  • editorInlayHint.parameterBackground#221c35
  • editorInlayHint.parameterForeground#8a7d9b
  • editorInlayHint.typeBackground#221c35
  • editorInlayHint.typeForeground#8a7d9b
  • editorLineNumber.activeForeground#9675bd
  • editorLineNumber.dimmedForeground#322145
  • editorLineNumber.foreground#564585
  • editorOverviewRuler.addedForeground#96e474
  • editorOverviewRuler.deletedForeground#ff4b73
  • editorOverviewRuler.errorForeground#c43053
  • editorOverviewRuler.findMatchForeground#54e7f8cc
  • editorOverviewRuler.modifiedForeground#44a3f5
  • editorOverviewRuler.warningForeground#ff874b
  • editorRuler.foreground#342950
  • editorSuggestWidget.background#221c35
  • editorSuggestWidget.border#1a1528
  • editorSuggestWidget.focusHighlightForeground#f76ef1
  • editorSuggestWidget.foreground#cbbade
  • editorSuggestWidget.highlightForeground#9768f8
  • editorSuggestWidget.selectedBackground#322145
  • editorSuggestWidget.selectedForeground#cbbade
  • editorWarning.background#ff874b22
  • editorWarning.foreground#ff874b
  • editorWidget.background#221c35
  • editorWidget.border#9675bd
  • errorForeground#c43053
  • focusBorder#44a3f5
  • foreground#cbbade
  • gitDecoration.addedResourceForeground#96e474
  • gitDecoration.deletedResourceForeground#ff4b73
  • gitDecoration.modifiedResourceForeground#44a3f5
  • icon.foreground#cbbade
  • input.background#221c35
  • inputValidation.errorBackground#6f2332
  • inputValidation.errorBorder#c43053
  • keybindingLabel.background#221c35
  • keybindingLabel.border#342950
  • keybindingLabel.foreground#cbbade
  • keybindingTable.headerBackground#2b2343
  • keybindingTable.rowsBackground#2b234388
  • list.activeSelectionBackground#342950
  • list.activeSelectionForeground#f76ef1
  • list.dropBackground#34295088
  • list.errorForeground#c43053
  • list.focusAndSelectionOutline#322145
  • list.hoverBackground#2b2343
  • list.hoverForeground#f76ef1
  • list.inactiveSelectionBackground#2b2343
  • list.warningForeground#ff874b
  • markdown.extension.editor.codeSpan.background#221c35
  • markdown.extension.editor.codeSpan.border#342950
  • menu.background#221c35
  • menu.border#342950
  • menu.foreground#cbbade
  • menu.separatorBackground#8a7d9b
  • minimap.background#221c35cc
  • minimap.errorHighlight#c43053
  • minimap.findMatchHighlight#54e7f8cc
  • minimap.selectionHighlight#4a316888
  • minimap.warningHighlight#ff874b
  • minimapGutter.addedBackground#96e474
  • minimapGutter.deletedBackground#ff4b73
  • minimapGutter.modifiedBackground#44a3f5
  • minimapSlider.activeBackground#9768f844
  • minimapSlider.background#9675bd22
  • minimapSlider.hoverBackground#9675bd44
  • outputView.background#130f1e
  • panel.background#221c35
  • panel.border#342950
  • panelSection.dropBackground#45376a88
  • panelTitle.activeBorder#9675bd
  • panelTitle.activeForeground#9675bd
  • peekView.border#342950
  • peekViewEditor.background#221c35
  • peekViewEditor.matchHighlightBackground#54e7f844
  • peekViewEditor.matchHighlightBorder#54e7f888
  • peekViewEditorStickyScroll.background#130f1e
  • peekViewResult.background#221c3588
  • peekViewResult.lineForeground#cbbade
  • peekViewResult.matchHighlightBackground#54e7f844
  • peekViewTitle.background#2b2343
  • peekViewTitleDescription.foreground#8a7d9b
  • peekViewTitleLabel.foreground#f76ef1
  • problemsErrorIcon.foreground#c43053
  • problemsInfoIcon.foreground#76b65b
  • problemsWarningIcon.foreground#ff874b
  • profileBadge.background#9675bd
  • profileBadge.foreground#ffffff
  • progressBar.background#44a3f5
  • quickInput.background#221c35
  • scrollbarSlider.activeBackground#9768f844
  • scrollbarSlider.background#9675bd22
  • scrollbarSlider.hoverBackground#9675bd44
  • selection.background#4a3168
  • settings.modifiedItemIndicator#44a3f588
  • sideBar.background#221c35
  • sideBar.border#342950
  • sideBar.dropBackground#45376a88
  • sideBar.foreground#cbbade
  • sideBarSectionHeader.background#2b2343
  • sideBarSectionHeader.foreground#9675bd
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#221c35
  • statusBar.border#342950
  • statusBar.debuggingBackground#221c35
  • statusBar.debuggingBorder#96e47444
  • statusBar.debuggingForeground#96e474
  • statusBar.foreground#cbbade
  • statusBarItem.remoteBackground#9768f8
  • tab.activeBackground#221c35
  • tab.activeBorderTop#9675bd
  • tab.activeForeground#f76ef1
  • tab.border#342950
  • tab.hoverBackground#342950
  • tab.inactiveBackground#130f1e
  • tab.inactiveForeground#8a7d9b
  • terminal.ansiBlack#564585
  • terminal.ansiBlue#2b7bbd
  • terminal.ansiBrightBlack#342950
  • terminal.ansiBrightBlue#44a3f5
  • terminal.ansiBrightCyan#54e7f8
  • terminal.ansiBrightGreen#96e474
  • terminal.ansiBrightMagenta#f76ef1
  • terminal.ansiBrightRed#ff4b73
  • terminal.ansiBrightWhite#e5dcef
  • terminal.ansiBrightYellow#f5cb40
  • terminal.ansiCyan#41bac8
  • terminal.ansiGreen#76b65b
  • terminal.ansiMagenta#9768f8
  • terminal.ansiRed#c43053
  • terminal.ansiWhite#8a7d9b
  • terminal.ansiYellow#ff874b
  • terminal.background#130f1e
  • terminal.dropBackground#45376a88
  • terminal.foreground#cbbade
  • terminalCursor.background#130f1e
  • terminalCursor.foreground#9675bd
  • textLink.activeForeground#54e7f8
  • textLink.foreground#44a3f5
  • titleBar.activeBackground#342950
  • titleBar.inactiveBackground#130f1e
  • toolbar.activeBackground#322145
  • toolbar.hoverBackground#2b2343
  • toolbar.hoverOutline#342950
  • tree.inactiveIndentGuidesStroke#342950
  • tree.indentGuidesStroke#322145

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#675891italic
variable, string constant.other.placeholder#cbbade
constant.other.color#ffffff
invalid, invalid.illegal#c43053
keyword, storage.type, storage.modifier#44a3f5italic
keyword.operator#f76ef1
constant.other.color, punctuation, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8a7d9b
punctuation.definition.string#76b65b
punctuation.definition.template-expression#ff4b73
keyword.control#54e7f8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c43053
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9768f8
variable.other.object#e5dcef
meta.block variable.other#cbbade
support.other.variable, string.other.link#cbbade
constant.numeric, constant.language, support.constant, variable.parameter, constant.character, constant.escape, keyword.other.unit, keyword.other#ff874b
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#96e474
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#41bac8
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#f5cb40
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff4b73
variable.language#ff4b73italic
entity.name.method.js#cbbadeitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#44a3f5
entity.other.attribute-name#9768f8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f5cb40italic
entity.other.attribute-name.class#f5cb40
source.sass keyword.control#54e7f8
markup.inserted#96e474
markup.deleted#ff4b73
markup.changed#44a3f5
string.regexp#54e7f8
constant.character.escape#54e7f8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#54e7f8italic
source.js constant.other.object.key.js string.unquoted.label.js#ff4b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#b38fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6f47bd
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#76c3ff
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#2b7bbd
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#ff9bff
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#c151bc
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#9bffce
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#49c885
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#54e7f8
text.html.markdown, punctuation.definition.list_item.markdown#cbbade
text.html.markdown markup.inline.raw.markdown#9768f8
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8a7d9b
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#96e474
markup.italic#96e474italic
markup.bold, markup.bold string#f76ef1bold
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#f76ef1italic bold
markup.underline#7c52adunderline
markup.quote punctuation.definition.blockquote.markdown#1a1528
markup.quote#1a1528italic
string.other.link.title.markdown#44a3f5
string.other.link.description.title.markdown#c5a330
constant.other.reference.link.markdown#f5cb40
markup.raw.block#9768f8
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#cbbade
variable.language.fenced.markdown#cbbade
meta.separator#6c8db3bold
markup.table#7c52ad