The Flying Dutchman
Publisher: Davy JonesThemes in package: 3
An artisan nautical dark theme. Abyssal ocean blues, aged brass, and a bioluminescent glow — in three harmonious variants. Also ships for six terminals and editors.
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.activeBorder#5cc4cc
- activityBar.background#0c1117
- activityBar.border#0c1117
- activityBar.foreground#bfcbd9
- activityBar.inactiveForeground#6a7b8a
- activityBarBadge.background#5cc4cc
- activityBarBadge.foreground#0c1117
- badge.background#5cc4cc
- badge.foreground#0c1117
- breadcrumb.activeSelectionForeground#5cc4cc
- breadcrumb.background#131920
- breadcrumb.focusForeground#e4ebf1
- breadcrumb.foreground#6a7b8a
- breadcrumbPicker.background#192029
- button.background#5cc4cc
- button.foreground#0c1117
- button.hoverBackground#8bc0d0
- button.secondaryBackground#192029
- button.secondaryForeground#bfcbd9
- button.secondaryHoverBackground#202832
- charts.blue#6eb5d8
- charts.foreground#bfcbd9
- charts.green#5fc491
- charts.orange#e3ac54
- charts.purple#c68baa
- charts.red#e56661
- charts.yellow#e0c471
- commandCenter.activeBackground#202832
- commandCenter.activeForeground#e4ebf1
- commandCenter.background#0c1117
- commandCenter.border#212831
- commandCenter.foreground#8a98a8
- commandCenter.inactiveForeground#6a7b8a
- debugExceptionWidget.background#e5666133
- debugExceptionWidget.border#e56661
- debugIcon.breakpointForeground#e56661
- debugToolBar.background#192029
- debugToolBar.border#212831
- descriptionForeground#8a98a8
- diffEditor.insertedLineBackground#5fc49118
- diffEditor.insertedTextBackground#5fc49122
- diffEditor.removedLineBackground#e5666118
- diffEditor.removedTextBackground#e5666122
- disabledForeground#2a323c
- dropdown.background#0c1117
- dropdown.border#212831
- dropdown.foreground#bfcbd9
- dropdown.listBackground#192029
- editor.background#131920
- editor.findMatchBackground#e0c47166
- editor.findMatchHighlightBackground#e0c47133
- editor.findRangeHighlightBackground#2c445966
- editor.foreground#bfcbd9
- editor.hoverHighlightBackground#5cc4cc22
- editor.inactiveSelectionBackground#252d37
- editor.lineHighlightBackground#171e26
- editor.rangeHighlightBackground#2c445944
- editor.selectionBackground#2c4459
- editor.selectionHighlightBackground#5cc4cc22
- editor.wordHighlightBackground#5cc4cc22
- editor.wordHighlightStrongBackground#5cc4cc33
- editorBracketHighlight.foreground1#e0c471
- editorBracketHighlight.foreground2#5cc4cc
- editorBracketHighlight.foreground3#e09585
- editorBracketHighlight.foreground4#75acd1
- editorBracketHighlight.foreground5#8bc0d0
- editorBracketHighlight.foreground6#d3ac64
- editorBracketHighlight.unexpectedBracket.foreground#e56661
- editorBracketMatch.background#5cc4cc22
- editorBracketMatch.border#5cc4cc
- editorCodeLens.foreground#6a7b8a
- editorCursor.background#131920
- editorCursor.foreground#5cc4cc
- editorError.foreground#e56661
- editorGroup.border#212831
- editorGroupHeader.noTabsBackground#131920
- editorGroupHeader.tabsBackground#0c1117
- editorGroupHeader.tabsBorder#0c1117
- editorGutter.addedBackground#5fc491
- editorGutter.deletedBackground#e56661
- editorGutter.modifiedBackground#6eb5d8
- editorHint.foreground#5fc491
- editorHoverWidget.background#192029
- editorHoverWidget.border#212831
- editorIndentGuide.activeBackground1#344251
- editorIndentGuide.background1#212831
- editorInfo.foreground#6eb5d8
- editorLineNumber.activeForeground#8a98a8
- editorLineNumber.foreground#2a323c
- editorLink.activeForeground#6eb5d8
- editorOverviewRuler.addedForeground#5fc491
- editorOverviewRuler.border#0c1117
- editorOverviewRuler.deletedForeground#e56661
- editorOverviewRuler.errorForeground#e56661
- editorOverviewRuler.findMatchForeground#e0c471
- editorOverviewRuler.infoForeground#6eb5d8
- editorOverviewRuler.modifiedForeground#6eb5d8
- editorOverviewRuler.warningForeground#e3ac54
- editorRuler.foreground#212831
- editorStickyScroll.background#0e131a
- editorStickyScrollHover.background#202832
- editorSuggestWidget.background#192029
- editorSuggestWidget.border#212831
- editorSuggestWidget.foreground#bfcbd9
- editorSuggestWidget.highlightForeground#5cc4cc
- editorSuggestWidget.selectedBackground#2c4459
- editorWarning.foreground#e3ac54
- editorWhitespace.foreground#2a323c
- editorWidget.background#192029
- editorWidget.border#212831
- editorWidget.foreground#bfcbd9
- errorForeground#e56661
- focusBorder#5cc4cc
- foreground#bfcbd9
- gitDecoration.addedResourceForeground#5fc491
- gitDecoration.conflictingResourceForeground#e3ac54
- gitDecoration.deletedResourceForeground#e56661
- gitDecoration.ignoredResourceForeground#2a323c
- gitDecoration.modifiedResourceForeground#6eb5d8
- gitDecoration.submoduleResourceForeground#8a98a8
- gitDecoration.untrackedResourceForeground#5fc491
- icon.foreground#8a98a8
- inlineChat.background#192029
- inlineChat.border#212831
- inlineChatInput.background#0c1117
- inlineChatInput.focusBorder#5cc4cc
- input.background#0c1117
- input.border#212831
- input.foreground#bfcbd9
- input.placeholderForeground#6a7b8a
- inputOption.activeBackground#5cc4cc
- inputOption.activeBorder#5cc4cc
- inputOption.activeForeground#0c1117
- inputValidation.errorBackground#e5666133
- inputValidation.errorBorder#e56661
- inputValidation.errorForeground#e4ebf1
- inputValidation.infoBackground#192029
- inputValidation.infoBorder#6eb5d8
- inputValidation.infoForeground#e4ebf1
- inputValidation.warningBackground#e3ac54
- inputValidation.warningBorder#e3ac54
- inputValidation.warningForeground#0c1117
- keybindingLabel.background#192029
- keybindingLabel.border#212831
- keybindingLabel.bottomBorder#212831
- keybindingLabel.foreground#bfcbd9
- list.activeSelectionBackground#2c4459
- list.activeSelectionForeground#e4ebf1
- list.dropBackground#252d37
- list.errorForeground#e56661
- list.focusBackground#2c4459
- list.focusForeground#e4ebf1
- list.highlightForeground#5cc4cc
- list.hoverBackground#202832
- list.hoverForeground#e4ebf1
- list.inactiveSelectionBackground#252d37
- list.inactiveSelectionForeground#bfcbd9
- list.warningForeground#e3ac54
- menu.background#192029
- menu.border#212831
- menu.foreground#8a98a8
- menu.selectionBackground#2c4459
- menu.selectionForeground#e4ebf1
- menu.separatorBackground#212831
- menubar.selectionBackground#202832
- menubar.selectionForeground#e4ebf1
- merge.border#212831
- merge.currentContentBackground#6eb5d833
- merge.currentHeaderBackground#6eb5d866
- merge.incomingContentBackground#5fc49133
- merge.incomingHeaderBackground#5fc49166
- minimapGutter.addedBackground#5fc491
- minimapGutter.deletedBackground#e56661
- minimapGutter.modifiedBackground#6eb5d8
- notificationCenter.border#212831
- notificationCenterHeader.background#192029
- notificationCenterHeader.foreground#e4ebf1
- notificationLink.foreground#6eb5d8
- notifications.background#192029
- notifications.border#212831
- notifications.foreground#bfcbd9
- notificationsErrorIcon.foreground#e56661
- notificationsInfoIcon.foreground#6eb5d8
- notificationsWarningIcon.foreground#e3ac54
- panel.background#131920
- panel.border#212831
- panelTitle.activeBorder#5cc4cc
- panelTitle.activeForeground#e4ebf1
- panelTitle.inactiveForeground#6a7b8a
- peekView.border#5cc4cc
- peekViewEditor.background#0e131a
- peekViewEditor.matchHighlightBackground#e0c47144
- peekViewResult.background#0e131a
- peekViewResult.fileForeground#e4ebf1
- peekViewResult.lineForeground#8a98a8
- peekViewResult.matchHighlightBackground#e0c47144
- peekViewResult.selectionBackground#2c4459
- peekViewResult.selectionForeground#e4ebf1
- peekViewTitle.background#192029
- peekViewTitleDescription.foreground#6a7b8a
- peekViewTitleLabel.foreground#e4ebf1
- progressBar.background#5cc4cc
- sash.hoverBorder#5cc4cc
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#8a98a866
- scrollbarSlider.background#8a98a822
- scrollbarSlider.hoverBackground#8a98a844
- selection.background#2c4459
- settings.headerForeground#e4ebf1
- settings.modifiedItemIndicator#5cc4cc
- sideBar.background#0e131a
- sideBar.border#0c1117
- sideBar.foreground#8a98a8
- sideBarSectionHeader.background#0e131a
- sideBarSectionHeader.border#212831
- sideBarSectionHeader.foreground#bfcbd9
- sideBarTitle.foreground#bfcbd9
- statusBar.background#0c1117
- statusBar.border#0c1117
- statusBar.debuggingBackground#e3ac54
- statusBar.debuggingBorder#e3ac54
- statusBar.debuggingForeground#0c1117
- statusBar.foreground#8a98a8
- statusBar.noFolderBackground#0c1117
- statusBarItem.activeBackground#2c4459
- statusBarItem.errorBackground#e56661
- statusBarItem.errorForeground#0c1117
- statusBarItem.hoverBackground#202832
- statusBarItem.prominentBackground#5cc4cc
- statusBarItem.prominentForeground#0c1117
- statusBarItem.remoteBackground#5cc4cc
- statusBarItem.remoteForeground#0c1117
- tab.activeBackground#131920
- tab.activeBorderTop#5cc4cc
- tab.activeForeground#e4ebf1
- tab.border#0c1117
- tab.hoverBackground#171e26
- tab.inactiveBackground#0c1117
- tab.inactiveForeground#6a7b8a
- tab.lastPinnedBorder#212831
- tab.unfocusedActiveForeground#8a98a8
- terminal.ansiBlack#0c1117
- terminal.ansiBlue#6eb5d8
- terminal.ansiBrightBlack#8a98a8
- terminal.ansiBrightBlue#99c9e1
- terminal.ansiBrightCyan#86cfd5
- terminal.ansiBrightGreen#84d2b4
- terminal.ansiBrightMagenta#d7adc3
- terminal.ansiBrightRed#ec908d
- terminal.ansiBrightWhite#e4ebf1
- terminal.ansiBrightYellow#e5d49e
- terminal.ansiCyan#5cc4cc
- terminal.ansiGreen#65bd9c
- terminal.ansiMagenta#c68baa
- terminal.ansiRed#e56661
- terminal.ansiWhite#bfcbd9
- terminal.ansiYellow#e0c471
- terminal.background#131920
- terminal.foreground#bfcbd9
- terminal.selectionBackground#2c4459
- terminalCursor.background#131920
- terminalCursor.foreground#5cc4cc
- textBlockQuote.background#0e131a
- textCodeBlock.background#0e131a
- textLink.activeForeground#5cc4cc
- textLink.foreground#6eb5d8
- textPreformat.foreground#8bc0d0
- titleBar.activeBackground#0c1117
- titleBar.activeForeground#8a98a8
- titleBar.border#0c1117
- titleBar.inactiveBackground#0c1117
- titleBar.inactiveForeground#6a7b8a
- toolbar.activeBackground#2c4459
- toolbar.hoverBackground#202832
- tree.indentGuidesStroke#212831
- widget.shadow#00000066
- window.activeBorder#0c1117
- window.inactiveBorder#0c1117
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6a7b8a | italic |
| string, punctuation.definition.string, string.quoted, string.template | #65bd9c | — |
| constant.character.escape, string.regexp, punctuation.definition.template-expression | #e0c471 | — |
| constant.numeric, constant.language, constant.language.boolean, keyword.other.unit | #e0c471 | — |
| constant, support.constant, variable.other.constant | #e0c471 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier | #75acd1 | — |
| keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.section, punctuation.definition.block | #8a98a8 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #5cc4cc | — |
| entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.namespace, entity.name.type.class | #d3ac64 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable | #bfcbd9 | — |
| variable.parameter, meta.parameter | #bfcbd9 | — |
| variable.language, variable.language.this, variable.language.super | #e09585 | italic |
| support.type.property-name, meta.object-literal.key, variable.other.property, variable.other.object.property | #8bc0d0 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml | #e09585 | — |
| entity.other.attribute-name | #e0c471 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx | #d3ac64 | — |
| entity.name.tag.css, meta.selector | #75acd1 | — |
| entity.other.attribute-name.class.css | #d3ac64 | — |
| entity.other.attribute-name.id.css | #5cc4cc | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #e0c471 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #8bc0d0 | — |
| support.constant.property-value.css, meta.property-value.css | #bfcbd9 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #8bc0d0 | — |
| markup.heading, markup.heading entity.name, entity.name.section.markdown | #5cc4cc | bold |
| markup.bold | #e0c471 | bold |
| markup.italic | #75acd1 | italic |
| markup.quote | #6a7b8a | italic |
| markup.inline.raw, markup.raw, markup.fenced_code | #8bc0d0 | — |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #6eb5d8 | — |
| markup.list.punctuation, punctuation.definition.list.begin.markdown | #e09585 | — |
| markup.inserted | #5fc491 | — |
| markup.deleted | #e56661 | — |
| markup.changed | #e3ac54 | — |
| invalid, invalid.illegal | #e56661 | — |
| invalid.deprecated | #e3ac54 | — |
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.activeBorder#86dee4
- activityBar.background#04070b
- activityBar.border#04070b
- activityBar.foreground#f9fafb
- activityBar.inactiveForeground#91a2b1
- activityBarBadge.background#86dee4
- activityBarBadge.foreground#04070b
- badge.background#86dee4
- badge.foreground#04070b
- breadcrumb.activeSelectionForeground#86dee4
- breadcrumb.background#070c12
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#91a2b1
- breadcrumbPicker.background#121821
- button.background#86dee4
- button.foreground#04070b
- button.hoverBackground#a1d7e8
- button.secondaryBackground#121821
- button.secondaryForeground#f9fafb
- button.secondaryHoverBackground#1b2532
- charts.blue#8acaea
- charts.foreground#f9fafb
- charts.green#72daa6
- charts.orange#f5ba5c
- charts.purple#e2a2c4
- charts.red#f57a75
- charts.yellow#f6db88
- commandCenter.activeBackground#1b2532
- commandCenter.activeForeground#ffffff
- commandCenter.background#04070b
- commandCenter.border#2a3646
- commandCenter.foreground#abb8c4
- commandCenter.inactiveForeground#91a2b1
- debugExceptionWidget.background#f57a7533
- debugExceptionWidget.border#f57a75
- debugIcon.breakpointForeground#f57a75
- debugToolBar.background#121821
- debugToolBar.border#2a3646
- descriptionForeground#abb8c4
- diffEditor.insertedLineBackground#72daa618
- diffEditor.insertedTextBackground#72daa622
- diffEditor.removedLineBackground#f57a7518
- diffEditor.removedTextBackground#f57a7522
- disabledForeground#3c4a5d
- dropdown.background#04070b
- dropdown.border#2a3646
- dropdown.foreground#f9fafb
- dropdown.listBackground#121821
- editor.background#070c12
- editor.findMatchBackground#f6db8866
- editor.findMatchHighlightBackground#f6db8833
- editor.findRangeHighlightBackground#22527766
- editor.foreground#f9fafb
- editor.hoverHighlightBackground#86dee422
- editor.inactiveSelectionBackground#253341
- editor.lineHighlightBackground#141b24
- editor.rangeHighlightBackground#22527744
- editor.selectionBackground#225277
- editor.selectionHighlightBackground#86dee422
- editor.wordHighlightBackground#86dee422
- editor.wordHighlightStrongBackground#86dee433
- editorBracketHighlight.foreground1#f6db88
- editorBracketHighlight.foreground2#86dee4
- editorBracketHighlight.foreground3#eda291
- editorBracketHighlight.foreground4#95c8e9
- editorBracketHighlight.foreground5#a1d7e8
- editorBracketHighlight.foreground6#eec477
- editorBracketHighlight.unexpectedBracket.foreground#f57a75
- editorBracketMatch.background#86dee422
- editorBracketMatch.border#86dee4
- editorCodeLens.foreground#91a2b1
- editorCursor.background#070c12
- editorCursor.foreground#86dee4
- editorError.foreground#f57a75
- editorGroup.border#2a3646
- editorGroupHeader.noTabsBackground#070c12
- editorGroupHeader.tabsBackground#04070b
- editorGroupHeader.tabsBorder#04070b
- editorGutter.addedBackground#72daa6
- editorGutter.deletedBackground#f57a75
- editorGutter.modifiedBackground#8acaea
- editorHint.foreground#72daa6
- editorHoverWidget.background#121821
- editorHoverWidget.border#2a3646
- editorIndentGuide.activeBackground1#407196
- editorIndentGuide.background1#2a3646
- editorInfo.foreground#8acaea
- editorLineNumber.activeForeground#abb8c4
- editorLineNumber.foreground#3c4a5d
- editorLink.activeForeground#8acaea
- editorOverviewRuler.addedForeground#72daa6
- editorOverviewRuler.border#04070b
- editorOverviewRuler.deletedForeground#f57a75
- editorOverviewRuler.errorForeground#f57a75
- editorOverviewRuler.findMatchForeground#f6db88
- editorOverviewRuler.infoForeground#8acaea
- editorOverviewRuler.modifiedForeground#8acaea
- editorOverviewRuler.warningForeground#f5ba5c
- editorRuler.foreground#2a3646
- editorStickyScroll.background#06090f
- editorStickyScrollHover.background#1b2532
- editorSuggestWidget.background#121821
- editorSuggestWidget.border#2a3646
- editorSuggestWidget.foreground#f9fafb
- editorSuggestWidget.highlightForeground#86dee4
- editorSuggestWidget.selectedBackground#225277
- editorWarning.foreground#f5ba5c
- editorWhitespace.foreground#3c4a5d
- editorWidget.background#121821
- editorWidget.border#2a3646
- editorWidget.foreground#f9fafb
- errorForeground#f57a75
- focusBorder#86dee4
- foreground#f9fafb
- gitDecoration.addedResourceForeground#72daa6
- gitDecoration.conflictingResourceForeground#f5ba5c
- gitDecoration.deletedResourceForeground#f57a75
- gitDecoration.ignoredResourceForeground#3c4a5d
- gitDecoration.modifiedResourceForeground#8acaea
- gitDecoration.submoduleResourceForeground#abb8c4
- gitDecoration.untrackedResourceForeground#72daa6
- icon.foreground#abb8c4
- inlineChat.background#121821
- inlineChat.border#2a3646
- inlineChatInput.background#04070b
- inlineChatInput.focusBorder#86dee4
- input.background#04070b
- input.border#2a3646
- input.foreground#f9fafb
- input.placeholderForeground#91a2b1
- inputOption.activeBackground#86dee4
- inputOption.activeBorder#86dee4
- inputOption.activeForeground#04070b
- inputValidation.errorBackground#f57a7533
- inputValidation.errorBorder#f57a75
- inputValidation.errorForeground#ffffff
- inputValidation.infoBackground#121821
- inputValidation.infoBorder#8acaea
- inputValidation.infoForeground#ffffff
- inputValidation.warningBackground#f5ba5c
- inputValidation.warningBorder#f5ba5c
- inputValidation.warningForeground#04070b
- keybindingLabel.background#121821
- keybindingLabel.border#2a3646
- keybindingLabel.bottomBorder#2a3646
- keybindingLabel.foreground#f9fafb
- list.activeSelectionBackground#225277
- list.activeSelectionForeground#ffffff
- list.dropBackground#253341
- list.errorForeground#f57a75
- list.focusBackground#225277
- list.focusForeground#ffffff
- list.highlightForeground#86dee4
- list.hoverBackground#1b2532
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#253341
- list.inactiveSelectionForeground#f9fafb
- list.warningForeground#f5ba5c
- menu.background#121821
- menu.border#2a3646
- menu.foreground#abb8c4
- menu.selectionBackground#225277
- menu.selectionForeground#ffffff
- menu.separatorBackground#2a3646
- menubar.selectionBackground#1b2532
- menubar.selectionForeground#ffffff
- merge.border#2a3646
- merge.currentContentBackground#8acaea33
- merge.currentHeaderBackground#8acaea66
- merge.incomingContentBackground#72daa633
- merge.incomingHeaderBackground#72daa666
- minimapGutter.addedBackground#72daa6
- minimapGutter.deletedBackground#f57a75
- minimapGutter.modifiedBackground#8acaea
- notificationCenter.border#2a3646
- notificationCenterHeader.background#121821
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#8acaea
- notifications.background#121821
- notifications.border#2a3646
- notifications.foreground#f9fafb
- notificationsErrorIcon.foreground#f57a75
- notificationsInfoIcon.foreground#8acaea
- notificationsWarningIcon.foreground#f5ba5c
- panel.background#070c12
- panel.border#2a3646
- panelTitle.activeBorder#86dee4
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#91a2b1
- peekView.border#86dee4
- peekViewEditor.background#06090f
- peekViewEditor.matchHighlightBackground#f6db8844
- peekViewResult.background#06090f
- peekViewResult.fileForeground#ffffff
- peekViewResult.lineForeground#abb8c4
- peekViewResult.matchHighlightBackground#f6db8844
- peekViewResult.selectionBackground#225277
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#121821
- peekViewTitleDescription.foreground#91a2b1
- peekViewTitleLabel.foreground#ffffff
- progressBar.background#86dee4
- sash.hoverBorder#86dee4
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#abb8c466
- scrollbarSlider.background#abb8c422
- scrollbarSlider.hoverBackground#abb8c444
- selection.background#225277
- settings.headerForeground#ffffff
- settings.modifiedItemIndicator#86dee4
- sideBar.background#06090f
- sideBar.border#04070b
- sideBar.foreground#abb8c4
- sideBarSectionHeader.background#06090f
- sideBarSectionHeader.border#2a3646
- sideBarSectionHeader.foreground#f9fafb
- sideBarTitle.foreground#f9fafb
- statusBar.background#04070b
- statusBar.border#04070b
- statusBar.debuggingBackground#f5ba5c
- statusBar.debuggingBorder#f5ba5c
- statusBar.debuggingForeground#04070b
- statusBar.foreground#abb8c4
- statusBar.noFolderBackground#04070b
- statusBarItem.activeBackground#225277
- statusBarItem.errorBackground#f57a75
- statusBarItem.errorForeground#04070b
- statusBarItem.hoverBackground#1b2532
- statusBarItem.prominentBackground#86dee4
- statusBarItem.prominentForeground#04070b
- statusBarItem.remoteBackground#86dee4
- statusBarItem.remoteForeground#04070b
- tab.activeBackground#070c12
- tab.activeBorderTop#86dee4
- tab.activeForeground#ffffff
- tab.border#04070b
- tab.hoverBackground#141b24
- tab.inactiveBackground#04070b
- tab.inactiveForeground#91a2b1
- tab.lastPinnedBorder#2a3646
- tab.unfocusedActiveForeground#abb8c4
- terminal.ansiBlack#04070b
- terminal.ansiBlue#8acaea
- terminal.ansiBrightBlack#abb8c4
- terminal.ansiBrightBlue#99c9e1
- terminal.ansiBrightCyan#86cfd5
- terminal.ansiBrightGreen#84d2b4
- terminal.ansiBrightMagenta#d7adc3
- terminal.ansiBrightRed#ec908d
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#e5d49e
- terminal.ansiCyan#86dee4
- terminal.ansiGreen#7fd7b5
- terminal.ansiMagenta#e2a2c4
- terminal.ansiRed#f57a75
- terminal.ansiWhite#f9fafb
- terminal.ansiYellow#f6db88
- terminal.background#070c12
- terminal.foreground#f9fafb
- terminal.selectionBackground#225277
- terminalCursor.background#070c12
- terminalCursor.foreground#86dee4
- textBlockQuote.background#06090f
- textCodeBlock.background#06090f
- textLink.activeForeground#86dee4
- textLink.foreground#8acaea
- textPreformat.foreground#a1d7e8
- titleBar.activeBackground#04070b
- titleBar.activeForeground#abb8c4
- titleBar.border#04070b
- titleBar.inactiveBackground#04070b
- titleBar.inactiveForeground#91a2b1
- toolbar.activeBackground#225277
- toolbar.hoverBackground#1b2532
- tree.indentGuidesStroke#2a3646
- widget.shadow#00000066
- window.activeBorder#04070b
- window.inactiveBorder#04070b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #91a2b1 | italic |
| string, punctuation.definition.string, string.quoted, string.template | #7fd7b5 | — |
| constant.character.escape, string.regexp, punctuation.definition.template-expression | #f6db88 | — |
| constant.numeric, constant.language, constant.language.boolean, keyword.other.unit | #f6db88 | — |
| constant, support.constant, variable.other.constant | #f6db88 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier | #95c8e9 | — |
| keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.section, punctuation.definition.block | #abb8c4 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #86dee4 | — |
| entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.namespace, entity.name.type.class | #eec477 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable | #f9fafb | — |
| variable.parameter, meta.parameter | #f9fafb | — |
| variable.language, variable.language.this, variable.language.super | #eda291 | italic |
| support.type.property-name, meta.object-literal.key, variable.other.property, variable.other.object.property | #a1d7e8 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml | #eda291 | — |
| entity.other.attribute-name | #f6db88 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx | #eec477 | — |
| entity.name.tag.css, meta.selector | #95c8e9 | — |
| entity.other.attribute-name.class.css | #eec477 | — |
| entity.other.attribute-name.id.css | #86dee4 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #f6db88 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #a1d7e8 | — |
| support.constant.property-value.css, meta.property-value.css | #f9fafb | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #a1d7e8 | — |
| markup.heading, markup.heading entity.name, entity.name.section.markdown | #86dee4 | bold |
| markup.bold | #f6db88 | bold |
| markup.italic | #95c8e9 | italic |
| markup.quote | #91a2b1 | italic |
| markup.inline.raw, markup.raw, markup.fenced_code | #a1d7e8 | — |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #8acaea | — |
| markup.list.punctuation, punctuation.definition.list.begin.markdown | #eda291 | — |
| markup.inserted | #72daa6 | — |
| markup.deleted | #f57a75 | — |
| markup.changed | #f5ba5c | — |
| invalid, invalid.illegal | #f57a75 | — |
| invalid.deprecated | #f5ba5c | — |
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.activeBorder#7ab9bd
- activityBar.background#131820
- activityBar.border#131820
- activityBar.foreground#bec8d5
- activityBar.inactiveForeground#738391
- activityBarBadge.background#7ab9bd
- activityBarBadge.foreground#131820
- badge.background#7ab9bd
- badge.foreground#131820
- breadcrumb.activeSelectionForeground#7ab9bd
- breadcrumb.background#1a2028
- breadcrumb.focusForeground#dbe4eb
- breadcrumb.foreground#738391
- breadcrumbPicker.background#212831
- button.background#7ab9bd
- button.foreground#131820
- button.hoverBackground#9cbfc9
- button.secondaryBackground#212831
- button.secondaryForeground#bec8d5
- button.secondaryHoverBackground#2c353f
- charts.blue#89b6cd
- charts.foreground#bec8d5
- charts.green#78ba99
- charts.orange#d1ae75
- charts.purple#c398af
- charts.red#d7827f
- charts.yellow#d3c088
- commandCenter.activeBackground#2c353f
- commandCenter.activeForeground#dbe4eb
- commandCenter.background#131820
- commandCenter.border#2d343e
- commandCenter.foreground#8f9ba8
- commandCenter.inactiveForeground#738391
- debugExceptionWidget.background#d7827f33
- debugExceptionWidget.border#d7827f
- debugIcon.breakpointForeground#d7827f
- debugToolBar.background#212831
- debugToolBar.border#2d343e
- descriptionForeground#8f9ba8
- diffEditor.insertedLineBackground#78ba9918
- diffEditor.insertedTextBackground#78ba9922
- diffEditor.removedLineBackground#d7827f18
- diffEditor.removedTextBackground#d7827f22
- disabledForeground#363e49
- dropdown.background#131820
- dropdown.border#2d343e
- dropdown.foreground#bec8d5
- dropdown.listBackground#212831
- editor.background#1a2028
- editor.findMatchBackground#d3c08866
- editor.findMatchHighlightBackground#d3c08833
- editor.findRangeHighlightBackground#374b5d66
- editor.foreground#bec8d5
- editor.hoverHighlightBackground#7ab9bd22
- editor.inactiveSelectionBackground#2f3841
- editor.lineHighlightBackground#242a33
- editor.rangeHighlightBackground#374b5d44
- editor.selectionBackground#374b5d
- editor.selectionHighlightBackground#7ab9bd22
- editor.wordHighlightBackground#7ab9bd22
- editor.wordHighlightStrongBackground#7ab9bd33
- editorBracketHighlight.foreground1#d3c088
- editorBracketHighlight.foreground2#7ab9bd
- editorBracketHighlight.foreground3#d3a297
- editorBracketHighlight.foreground4#8daec4
- editorBracketHighlight.foreground5#9cbfc9
- editorBracketHighlight.foreground6#c8ae7e
- editorBracketHighlight.unexpectedBracket.foreground#d7827f
- editorBracketMatch.background#7ab9bd22
- editorBracketMatch.border#7ab9bd
- editorCodeLens.foreground#738391
- editorCursor.background#1a2028
- editorCursor.foreground#7ab9bd
- editorError.foreground#d7827f
- editorGroup.border#2d343e
- editorGroupHeader.noTabsBackground#1a2028
- editorGroupHeader.tabsBackground#131820
- editorGroupHeader.tabsBorder#131820
- editorGutter.addedBackground#78ba99
- editorGutter.deletedBackground#d7827f
- editorGutter.modifiedBackground#89b6cd
- editorHint.foreground#78ba99
- editorHoverWidget.background#212831
- editorHoverWidget.border#2d343e
- editorIndentGuide.activeBackground1#3f4d5a
- editorIndentGuide.background1#2d343e
- editorInfo.foreground#89b6cd
- editorLineNumber.activeForeground#8f9ba8
- editorLineNumber.foreground#363e49
- editorLink.activeForeground#89b6cd
- editorOverviewRuler.addedForeground#78ba99
- editorOverviewRuler.border#131820
- editorOverviewRuler.deletedForeground#d7827f
- editorOverviewRuler.errorForeground#d7827f
- editorOverviewRuler.findMatchForeground#d3c088
- editorOverviewRuler.infoForeground#89b6cd
- editorOverviewRuler.modifiedForeground#89b6cd
- editorOverviewRuler.warningForeground#d1ae75
- editorRuler.foreground#2d343e
- editorStickyScroll.background#161b23
- editorStickyScrollHover.background#2c353f
- editorSuggestWidget.background#212831
- editorSuggestWidget.border#2d343e
- editorSuggestWidget.foreground#bec8d5
- editorSuggestWidget.highlightForeground#7ab9bd
- editorSuggestWidget.selectedBackground#374b5d
- editorWarning.foreground#d1ae75
- editorWhitespace.foreground#363e49
- editorWidget.background#212831
- editorWidget.border#2d343e
- editorWidget.foreground#bec8d5
- errorForeground#d7827f
- focusBorder#7ab9bd
- foreground#bec8d5
- gitDecoration.addedResourceForeground#78ba99
- gitDecoration.conflictingResourceForeground#d1ae75
- gitDecoration.deletedResourceForeground#d7827f
- gitDecoration.ignoredResourceForeground#363e49
- gitDecoration.modifiedResourceForeground#89b6cd
- gitDecoration.submoduleResourceForeground#8f9ba8
- gitDecoration.untrackedResourceForeground#78ba99
- icon.foreground#8f9ba8
- inlineChat.background#212831
- inlineChat.border#2d343e
- inlineChatInput.background#131820
- inlineChatInput.focusBorder#7ab9bd
- input.background#131820
- input.border#2d343e
- input.foreground#bec8d5
- input.placeholderForeground#738391
- inputOption.activeBackground#7ab9bd
- inputOption.activeBorder#7ab9bd
- inputOption.activeForeground#131820
- inputValidation.errorBackground#d7827f33
- inputValidation.errorBorder#d7827f
- inputValidation.errorForeground#dbe4eb
- inputValidation.infoBackground#212831
- inputValidation.infoBorder#89b6cd
- inputValidation.infoForeground#dbe4eb
- inputValidation.warningBackground#d1ae75
- inputValidation.warningBorder#d1ae75
- inputValidation.warningForeground#131820
- keybindingLabel.background#212831
- keybindingLabel.border#2d343e
- keybindingLabel.bottomBorder#2d343e
- keybindingLabel.foreground#bec8d5
- list.activeSelectionBackground#374b5d
- list.activeSelectionForeground#dbe4eb
- list.dropBackground#2f3841
- list.errorForeground#d7827f
- list.focusBackground#374b5d
- list.focusForeground#dbe4eb
- list.highlightForeground#7ab9bd
- list.hoverBackground#2c353f
- list.hoverForeground#dbe4eb
- list.inactiveSelectionBackground#2f3841
- list.inactiveSelectionForeground#bec8d5
- list.warningForeground#d1ae75
- menu.background#212831
- menu.border#2d343e
- menu.foreground#8f9ba8
- menu.selectionBackground#374b5d
- menu.selectionForeground#dbe4eb
- menu.separatorBackground#2d343e
- menubar.selectionBackground#2c353f
- menubar.selectionForeground#dbe4eb
- merge.border#2d343e
- merge.currentContentBackground#89b6cd33
- merge.currentHeaderBackground#89b6cd66
- merge.incomingContentBackground#78ba9933
- merge.incomingHeaderBackground#78ba9966
- minimapGutter.addedBackground#78ba99
- minimapGutter.deletedBackground#d7827f
- minimapGutter.modifiedBackground#89b6cd
- notificationCenter.border#2d343e
- notificationCenterHeader.background#212831
- notificationCenterHeader.foreground#dbe4eb
- notificationLink.foreground#89b6cd
- notifications.background#212831
- notifications.border#2d343e
- notifications.foreground#bec8d5
- notificationsErrorIcon.foreground#d7827f
- notificationsInfoIcon.foreground#89b6cd
- notificationsWarningIcon.foreground#d1ae75
- panel.background#1a2028
- panel.border#2d343e
- panelTitle.activeBorder#7ab9bd
- panelTitle.activeForeground#dbe4eb
- panelTitle.inactiveForeground#738391
- peekView.border#7ab9bd
- peekViewEditor.background#161b23
- peekViewEditor.matchHighlightBackground#d3c08844
- peekViewResult.background#161b23
- peekViewResult.fileForeground#dbe4eb
- peekViewResult.lineForeground#8f9ba8
- peekViewResult.matchHighlightBackground#d3c08844
- peekViewResult.selectionBackground#374b5d
- peekViewResult.selectionForeground#dbe4eb
- peekViewTitle.background#212831
- peekViewTitleDescription.foreground#738391
- peekViewTitleLabel.foreground#dbe4eb
- progressBar.background#7ab9bd
- sash.hoverBorder#7ab9bd
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#8f9ba866
- scrollbarSlider.background#8f9ba822
- scrollbarSlider.hoverBackground#8f9ba844
- selection.background#374b5d
- settings.headerForeground#dbe4eb
- settings.modifiedItemIndicator#7ab9bd
- sideBar.background#161b23
- sideBar.border#131820
- sideBar.foreground#8f9ba8
- sideBarSectionHeader.background#161b23
- sideBarSectionHeader.border#2d343e
- sideBarSectionHeader.foreground#bec8d5
- sideBarTitle.foreground#bec8d5
- statusBar.background#131820
- statusBar.border#131820
- statusBar.debuggingBackground#d1ae75
- statusBar.debuggingBorder#d1ae75
- statusBar.debuggingForeground#131820
- statusBar.foreground#8f9ba8
- statusBar.noFolderBackground#131820
- statusBarItem.activeBackground#374b5d
- statusBarItem.errorBackground#d7827f
- statusBarItem.errorForeground#131820
- statusBarItem.hoverBackground#2c353f
- statusBarItem.prominentBackground#7ab9bd
- statusBarItem.prominentForeground#131820
- statusBarItem.remoteBackground#7ab9bd
- statusBarItem.remoteForeground#131820
- tab.activeBackground#1a2028
- tab.activeBorderTop#7ab9bd
- tab.activeForeground#dbe4eb
- tab.border#131820
- tab.hoverBackground#242a33
- tab.inactiveBackground#131820
- tab.inactiveForeground#738391
- tab.lastPinnedBorder#2d343e
- tab.unfocusedActiveForeground#8f9ba8
- terminal.ansiBlack#131820
- terminal.ansiBlue#89b6cd
- terminal.ansiBrightBlack#8f9ba8
- terminal.ansiBrightBlue#99c9e1
- terminal.ansiBrightCyan#86cfd5
- terminal.ansiBrightGreen#84d2b4
- terminal.ansiBrightMagenta#d7adc3
- terminal.ansiBrightRed#ec908d
- terminal.ansiBrightWhite#dbe4eb
- terminal.ansiBrightYellow#e5d49e
- terminal.ansiCyan#7ab9bd
- terminal.ansiGreen#7cb6a0
- terminal.ansiMagenta#c398af
- terminal.ansiRed#d7827f
- terminal.ansiWhite#bec8d5
- terminal.ansiYellow#d3c088
- terminal.background#1a2028
- terminal.foreground#bec8d5
- terminal.selectionBackground#374b5d
- terminalCursor.background#1a2028
- terminalCursor.foreground#7ab9bd
- textBlockQuote.background#161b23
- textCodeBlock.background#161b23
- textLink.activeForeground#7ab9bd
- textLink.foreground#89b6cd
- textPreformat.foreground#9cbfc9
- titleBar.activeBackground#131820
- titleBar.activeForeground#8f9ba8
- titleBar.border#131820
- titleBar.inactiveBackground#131820
- titleBar.inactiveForeground#738391
- toolbar.activeBackground#374b5d
- toolbar.hoverBackground#2c353f
- tree.indentGuidesStroke#2d343e
- widget.shadow#00000066
- window.activeBorder#131820
- window.inactiveBorder#131820
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #738391 | italic |
| string, punctuation.definition.string, string.quoted, string.template | #7cb6a0 | — |
| constant.character.escape, string.regexp, punctuation.definition.template-expression | #d3c088 | — |
| constant.numeric, constant.language, constant.language.boolean, keyword.other.unit | #d3c088 | — |
| constant, support.constant, variable.other.constant | #d3c088 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier | #8daec4 | — |
| keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.section, punctuation.definition.block | #8f9ba8 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #7ab9bd | — |
| entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.namespace, entity.name.type.class | #c8ae7e | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable | #bec8d5 | — |
| variable.parameter, meta.parameter | #bec8d5 | — |
| variable.language, variable.language.this, variable.language.super | #d3a297 | italic |
| support.type.property-name, meta.object-literal.key, variable.other.property, variable.other.object.property | #9cbfc9 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml | #d3a297 | — |
| entity.other.attribute-name | #d3c088 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx | #c8ae7e | — |
| entity.name.tag.css, meta.selector | #8daec4 | — |
| entity.other.attribute-name.class.css | #c8ae7e | — |
| entity.other.attribute-name.id.css | #7ab9bd | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #d3c088 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #9cbfc9 | — |
| support.constant.property-value.css, meta.property-value.css | #bec8d5 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #9cbfc9 | — |
| markup.heading, markup.heading entity.name, entity.name.section.markdown | #7ab9bd | bold |
| markup.bold | #d3c088 | bold |
| markup.italic | #8daec4 | italic |
| markup.quote | #738391 | italic |
| markup.inline.raw, markup.raw, markup.fenced_code | #9cbfc9 | — |
| markup.underline.link, string.other.link, constant.other.reference.link.markdown | #89b6cd | — |
| markup.list.punctuation, punctuation.definition.list.begin.markdown | #d3a297 | — |
| markup.inserted | #78ba99 | — |
| markup.deleted | #d7827f | — |
| markup.changed | #d1ae75 | — |
| invalid, invalid.illegal | #d7827f | — |
| invalid.deprecated | #d1ae75 | — |