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#011627
  • activityBar.activeBorder#219fd5
  • activityBar.background#011627
  • activityBar.border#219fd544
  • activityBar.foreground#e7e7e7
  • activityBar.inactiveForeground#e7e7e799
  • activityBarBadge.background#ff9fcf
  • activityBarBadge.foreground#15202b
  • badge.background#219fd5
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d6deeb
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#7799bb
  • breadcrumbPicker.background#0b2942
  • button.background#03648a
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • contrastActiveBorder#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#011627
  • debugToolBar.background#022846
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#00000000
  • editor.background#011627
  • editor.findMatchHighlightBackground#103362
  • editor.foreground#99d0f7
  • editor.hoverHighlightBackground#0c4994
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.rangeHighlightBackground#103362
  • editor.selectionBackground#103362
  • editor.selectionHighlightBackground#103362
  • editor.wordHighlightBackground#103362
  • editor.wordHighlightStrongBackground#103362
  • editorBracketMatch.background#219fd54d
  • editorBracketPairGuide.activeBackground1#219fd5
  • editorBracketPairGuide.activeBackground2#5ABEB0
  • editorBracketPairGuide.activeBackground3#C792EA
  • editorBracketPairGuide.activeBackground4#f7ecb5
  • editorBracketPairGuide.activeBackground5#80cbc4
  • editorBracketPairGuide.activeBackground6#ff9fcf
  • editorBracketPairGuide.background1#219fd533
  • editorBracketPairGuide.background2#5ABEB033
  • editorBracketPairGuide.background3#C792EA33
  • editorBracketPairGuide.background4#f7ecb533
  • editorBracketPairGuide.background5#80cbc433
  • editorBracketPairGuide.background6#ff9fcf33
  • editorCursor.foreground#219fd5
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#011627
  • editorGutter.background#011627
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#C792EA
  • editorIndentGuide.background#0e2c45
  • editorInlayHint.background#0b294266
  • editorInlayHint.foreground#7c8c98
  • editorInlayHint.parameterBackground#10336266
  • editorInlayHint.parameterForeground#9aa7b3
  • editorInlayHint.typeBackground#10336244
  • editorInlayHint.typeForeground#8b97a3
  • editorLineNumber.foreground#219fd5
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#0e2c45
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorUnnecessaryCode.opacity#000000a8
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#0b2942
  • editorWidget.border#262A39
  • errorForeground#EF5350
  • foreground#99d0f7
  • gitDecoration.addedResourceForeground#5ABEB0
  • gitDecoration.deletedResourceForeground#ef5350
  • gitDecoration.ignoredResourceForeground#5f7e97
  • gitDecoration.modifiedResourceForeground#219fd5
  • gitDecoration.stageDeletedResourceForeground#ef5350
  • gitDecoration.stageModifiedResourceForeground#219fd5
  • gitDecoration.stageUntrackedResourceForeground#5ABEB0
  • gitDecoration.submoduleResourceForeground#C792EA
  • gitDecoration.untrackedResourceForeground#5ABEB0
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#219fd5
  • list.dropBackground#011627
  • list.focusBackground#03648a
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#011627
  • list.hoverForeground#219fd5
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • minimap.errorHighlight#ef5350aa
  • minimap.findMatchHighlight#f7ecb5aa
  • minimap.selectionHighlight#219fd588
  • minimap.warningHighlight#ffca28aa
  • notificationLink.foreground#80CBC4
  • notifications.background#011627
  • notifications.foreground#ffffffcc
  • notificationToast.border#219fd544
  • panel.background#011627
  • panel.border#219fd5
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#f7ecb5
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • quickInput.list.focusBackground#219fd5
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#011627
  • sideBar.border#219fd544
  • sideBar.foreground#7799bb
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.foreground#7799bb
  • sideBarTitle.foreground#7799bb
  • tab.activeBackground#0b2942
  • tab.activeBorder#219fd5
  • tab.activeBorderTop#219fd5
  • tab.activeForeground#d2dee7
  • tab.hoverBackground#103362
  • tab.hoverForeground#d6deeb
  • tab.inactiveBackground#082137
  • tab.inactiveForeground#5f7e97
  • tab.unfocusedActiveForeground#a7dbf7
  • tab.unfocusedInactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • terminal.ansiBlue#219fd5
  • terminal.ansiBrightBlack#5f7e97
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#80cbc4
  • terminal.ansiBrightGreen#8dec95
  • terminal.ansiBrightMagenta#f29fd8
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f7ecb5
  • terminal.ansiCyan#5ABEB0
  • terminal.ansiGreen#5f8f49
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#ef5350
  • terminal.ansiWhite#d6deeb
  • terminal.ansiYellow#ffca28
  • terminal.background#011627
  • terminal.foreground#d6deeb
  • textLink.activeForeground#98c8ed
  • textLink.foreground#219fd5
  • titleBar.activeBackground#011627
  • titleBar.activeForeground#e7e7e7
  • titleBar.border#303030
  • titleBar.inactiveBackground#01162799
  • titleBar.inactiveForeground#e7e7e799
  • walkThrough.embeddedEditorBackground#001111
  • welcomePage.buttonBackground#011627
  • welcomePage.buttonHoverBackground#011627
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#99d0f7
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF
markup.quote.markdown#82AAFF
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EA
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5
punctuation.definition.metadata.markdown#f3b8c2
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa
comment#c85c5c
punctuation.definition.string#5f8f49
string#78a95f
string.quoted#78a95f
constant.numeric#8dec95
constant.language.boolean#8dec95
constant#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#FFB86C
constant.character, constant.other#F78C6C
variable#a4ceee
entity.name.namespace, variable.other.readwrite.alias, variable.other.readwrite.alias.python#6dbdfa
variable.other.object.property#7fdbca
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca
string.template meta.template.expression#c63ed3
string.template punctuation.definition.string#fff
storage#6dbdfa
keyword, storage.type, storage.modifier, variable.language.this#00bff9
keyword.operator#00bff9
storage, meta.var.expr#c792ea
entity.name.class#f7ecb5
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#f7ecb5
support.variable.property#7fdbca
entity.name.function#DCDCAA
variable.parameter#d7dbe0
entity.name.tag#6dbdfa
entity.name.type#d29ffc
entity.other.attribute-name#f7ecb5
punctuation.decorator#f7ecb5
punctuation.definition.block, punctuation.definition.tag#ffffff
support.function#DCDCAA
support.constant#FFB86C
support.type, support.class#7fdbca
support.other.variable#6dbdfa
invalid#6dbdfa bold underline
invalid.deprecated#6dbdfa bold underline
support.type.property-name.json#91dacd
support.constant.json#addb67
meta.structure.dictionary.value.json string.quoted.double#e0aff5
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f29fd8
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#ece7cd
markup.list#6dbdfa
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65
meta.paragraph.markdown#ffffff
markup.quote#78bd65
meta.link#78BD65
source.dockerfile#99d0f7
Patagonia Theme by Isaiah Harville - VS Code Theme