Vantablack Material Dark
Publisher: ruanSignoriThemes in package: 1
VSCode theme - Vantablack background with Material Dark syntax colors
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#1a1a1a
- activityBar.background#0d0d0d
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#555555
- activityBarBadge.background#80cbc4
- activityBarBadge.foreground#000000
- badge.background#80cbc4
- badge.foreground#000000
- banner.background#1a1a1a
- banner.foreground#ececec
- banner.iconForeground#ffffff
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.background#0d0d0d
- breadcrumb.focusForeground#ececec
- breadcrumb.foreground#888888
- breadcrumbPicker.background#111111
- button.background#80cbc4
- button.foreground#000000
- button.hoverBackground#4db6ac
- charts.blue#8d8d8d
- charts.foreground#ffffff
- charts.green#b6b6b6
- charts.lines#ececec
- charts.orange#a4a4a4
- charts.purple#9b9b9b
- charts.red#a4a4a4
- charts.yellow#cecece
- checkbox.background#80cbc4
- checkbox.foreground#000000
- commandCenter.activeBackground#111111
- commandCenter.activeForeground#ffffff
- commandCenter.background#0d0d0d
- commandCenter.foreground#ececec
- debugConsole.errorForeground#a4a4a4
- debugConsole.infoForeground#ececec
- debugConsole.sourceForeground#ececec
- debugConsole.warningForeground#cecece
- debugConsoleInputIcon.foreground#ffffff
- debugExceptionWidget.background#111111
- debugIcon.breakpointCurrentStackframeForeground#FFCC00
- debugIcon.breakpointDisabledForeground#848484
- debugIcon.breakpointForeground#E51400
- debugIcon.breakpointStackframeForeground#89D185
- debugIcon.breakpointUnverifiedForeground#848484
- debugIcon.continueForeground#89D185
- debugIcon.disconnectForeground#F48771
- debugIcon.pauseForeground#75BEFF
- debugIcon.restartForeground#89D185
- debugIcon.startForeground#89D185
- debugIcon.stepBackForeground#75BEFF
- debugIcon.stepIntoForeground#75BEFF
- debugIcon.stepOutForeground#75BEFF
- debugIcon.stepOverForeground#75BEFF
- debugIcon.stopForeground#F48771
- debugTokenExpression.boolean#569cd6
- debugTokenExpression.error#a4a4a4
- debugTokenExpression.name#9CDCFE
- debugTokenExpression.number#569cd6
- debugTokenExpression.string#CE9178
- debugTokenExpression.value#ffffff
- debugToolBar.background#111111
- debugView.stateLabelBackground#8d8d8d
- debugView.stateLabelForeground#0d0d0d
- debugView.valueChangedHighlight#ffffff25
- descriptionForeground#aaaaaa
- diffEditor.diagonalFill#1a1a1a
- diffEditor.insertedTextBackground#b6b6b615
- diffEditor.removedTextBackground#a4a4a415
- disabledForeground#444444
- dropdown.background#111111
- dropdown.foreground#ffffff
- dropdown.listBackground#111111
- editor.background#0d0d0d
- editor.findMatchBackground#ffffff25
- editor.findMatchHighlightBackground#ffffff15
- editor.findRangeHighlightBackground#ffffff08
- editor.foreground#ffffff
- editor.hoverHighlightBackground#ffffff08
- editor.inactiveSelectionBackground#1a1a1a80
- editor.lineHighlightBackground#111111
- editor.rangeHighlightBackground#ffffff08
- editor.selectionBackground#222222
- editor.selectionHighlightBackground#ffffff10
- editor.snippetFinalTabstopHighlightBackground#1a1a1a
- editor.snippetTabstopHighlightBackground#222222
- editor.wordHighlightBackground#ffffff12
- editor.wordHighlightStrongBackground#ffffff18
- editorBracketHighlight.foreground1#8d8d8d
- editorBracketHighlight.foreground2#9b9b9b
- editorBracketHighlight.foreground3#a4a4a4
- editorBracketHighlight.foreground4#b0b0b0
- editorBracketHighlight.foreground5#b6b6b6
- editorBracketHighlight.foreground6#cecece
- editorBracketHighlight.unexpectedBracket.foreground#ffffff
- editorBracketMatch.background#222222
- editorCodeLens.foreground#555555
- editorCursor.foreground#ffffff
- editorError.foreground#a4a4a4
- editorGroup.dropBackground#1a1a1a80
- editorGroup.dropIntoPromptBackground#111111
- editorGroup.dropIntoPromptForeground#ffffff
- editorGroup.emptyBackground#0d0d0d
- editorGroupHeader.noTabsBackground#0d0d0d
- editorGroupHeader.tabsBackground#0d0d0d
- editorGutter.addedBackground#b6b6b6
- editorGutter.background#0d0d0d
- editorGutter.commentRangeForeground#555555
- editorGutter.deletedBackground#a4a4a4
- editorGutter.foldingControlForeground#ececec
- editorGutter.modifiedBackground#9b9b9b
- editorHint.foreground#b0b0b0
- editorHoverWidget.background#111111
- editorHoverWidget.foreground#ececec
- editorInfo.foreground#8d8d8d
- editorInlayHint.background#111111
- editorInlayHint.foreground#888888
- editorInlayHint.parameterBackground#111111
- editorInlayHint.parameterForeground#888888
- editorInlayHint.typeBackground#111111
- editorInlayHint.typeForeground#888888
- editorLightBulb.foreground#cecece
- editorLightBulbAutoFix.foreground#b6b6b6
- editorLineNumber.activeForeground#ffffff
- editorLineNumber.foreground#444444
- editorLink.activeForeground#b0b0b0
- editorMarkerNavigation.background#111111
- editorMarkerNavigationError.background#333333
- editorMarkerNavigationError.headerBackground#a4a4a420
- editorMarkerNavigationInfo.background#222222
- editorMarkerNavigationInfo.headerBackground#8d8d8d20
- editorMarkerNavigationWarning.background#444444
- editorMarkerNavigationWarning.headerBackground#cecece20
- editorOverviewRuler.addedForeground#b6b6b6
- editorOverviewRuler.bracketMatchForeground#ffffff
- editorOverviewRuler.commonContentForeground#ffffff
- editorOverviewRuler.currentContentForeground#8d8d8d
- editorOverviewRuler.deletedForeground#a4a4a4
- editorOverviewRuler.errorForeground#a4a4a4
- editorOverviewRuler.findMatchForeground#ffffff30
- editorOverviewRuler.incomingContentForeground#b6b6b6
- editorOverviewRuler.infoForeground#8d8d8d
- editorOverviewRuler.modifiedForeground#9b9b9b
- editorOverviewRuler.rangeHighlightForeground#ffffff15
- editorOverviewRuler.selectionHighlightForeground#ffffff15
- editorOverviewRuler.warningForeground#cecece
- editorOverviewRuler.wordHighlightForeground#ffffff20
- editorOverviewRuler.wordHighlightStrongForeground#ffffff30
- editorPane.background#0d0d0d
- editorRuler.foreground#1a1a1a
- editorSuggestWidget.background#111111
- editorSuggestWidget.focusHighlightForeground#ffffff
- editorSuggestWidget.foreground#ececec
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#222222
- editorSuggestWidget.selectedForeground#ffffff
- editorWarning.foreground#cecece
- editorWhitespace.foreground#222222
- editorWidget.background#111111
- editorWidget.foreground#ffffff
- errorForeground#a4a4a4
- extensionBadge.remoteBackground#80cbc4
- extensionBadge.remoteForeground#000000
- extensionButton.prominentBackground#80cbc4
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#4db6ac
- extensionIcon.preReleaseForeground#a4a4a4
- extensionIcon.starForeground#cecece
- extensionIcon.verifiedForeground#b6b6b6
- focusBorder#ffffff00
- foreground#ffffff
- icon.foreground#ececec
- input.background#111111
- input.foreground#ffffff
- input.placeholderForeground#555555
- inputOption.activeBackground#222222
- inputOption.activeBorder#8d8d8d
- inputOption.activeForeground#ffffff
- inputValidation.errorBackground#1a1a1a
- inputValidation.errorBorder#a4a4a4
- inputValidation.errorForeground#ffffff
- inputValidation.infoBackground#1a1a1a
- inputValidation.infoBorder#8d8d8d
- inputValidation.infoForeground#ffffff
- inputValidation.warningBackground#1a1a1a
- inputValidation.warningBorder#cecece
- inputValidation.warningForeground#ffffff
- keybindingLabel.background#222222
- keybindingLabel.foreground#ffffff
- keybindingTable.headerBackground#1a1a1a
- keybindingTable.rowsBackground#0d0d0d
- list.activeSelectionBackground#222222
- list.activeSelectionForeground#80cbc4
- list.deemphasizedForeground#999999
- list.dropBackground#1a1a1a
- list.errorForeground#a4a4a4
- list.filterMatchBackground#222222
- list.focusBackground#1a1a1a
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#161616
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#161616
- list.inactiveSelectionBackground#1a1a1a
- list.inactiveSelectionForeground#ececec
- list.invalidItemForeground#a4a4a4
- list.warningForeground#cecece
- listFilterWidget.background#111111
- listFilterWidget.noMatchesOutline#a4a4a4
- menu.background#111111
- menu.foreground#ececec
- menu.selectionBackground#222222
- menu.selectionForeground#ffffff
- menu.separatorBackground#222222
- menubar.selectionBackground#1a1a1a
- menubar.selectionForeground#ffffff
- merge.currentContentBackground#8d8d8d25
- merge.currentHeaderBackground#8d8d8d40
- merge.incomingContentBackground#b6b6b625
- merge.incomingHeaderBackground#b6b6b640
- minimap.background#0d0d0d
- minimap.errorHighlight#a4a4a4
- minimap.findMatchHighlight#ffffff30
- minimap.selectionHighlight#ffffff15
- minimap.selectionOccurrenceHighlight#ffffff10
- minimap.warningHighlight#cecece
- minimapGutter.addedBackground#b6b6b6
- minimapGutter.deletedBackground#a4a4a4
- minimapGutter.modifiedBackground#9b9b9b
- notebook.cellBorderColor#1a1a1a
- notebook.cellEditorBackground#0d0d0d
- notebook.cellHoverBackground#111111
- notebook.cellToolbarSeparator#222222
- notebook.editorBackground#0d0d0d
- notebook.focusedCellBackground#111111
- notebook.focusedCellBorder#444444
- notebook.focusedEditorBorder#444444
- notebook.inactiveFocusedCellBorder#222222
- notebook.selectedCellBackground#161616
- notebookStatusErrorIcon.foreground#a4a4a4
- notebookStatusRunningIcon.foreground#b0b0b0
- notebookStatusSuccessIcon.foreground#b6b6b6
- notificationCenterHeader.background#111111
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#b0b0b0
- notifications.background#1a1a1a
- notifications.foreground#ececec
- notificationsErrorIcon.foreground#a4a4a4
- notificationsInfoIcon.foreground#8d8d8d
- notificationsWarningIcon.foreground#cecece
- panel.background#0d0d0d
- panel.dropBorder#333333
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#555555
- peekViewEditor.background#111111
- peekViewEditor.matchHighlightBackground#ffffff25
- peekViewEditorGutter.background#111111
- peekViewResult.background#0d0d0d
- peekViewResult.fileForeground#ffffff
- peekViewResult.lineForeground#555555
- peekViewResult.matchHighlightBackground#ffffff25
- peekViewResult.selectionBackground#222222
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1a1a1a
- peekViewTitleDescription.foreground#666666
- peekViewTitleLabel.foreground#ffffff
- pickerGroup.foreground#666666
- ports.iconRunningProcessForeground#b6b6b6
- problemsErrorIcon.foreground#a4a4a4
- problemsInfoIcon.foreground#8d8d8d
- problemsWarningIcon.foreground#cecece
- progressBar.background#8d8d8d
- quickInput.background#111111
- quickInput.foreground#ffffff
- quickInputList.focusBackground#222222
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#55555580
- scrollbarSlider.background#33333380
- scrollbarSlider.hoverBackground#44444480
- searchEditor.findMatchBackground#ffffff25
- selection.background#8d8d8d
- settings.checkboxBackground#111111
- settings.checkboxForeground#ffffff
- settings.dropdownBackground#111111
- settings.dropdownForeground#ffffff
- settings.focusedRowBackground#1a1a1a
- settings.headerBorder#222222
- settings.headerForeground#ffffff
- settings.modifiedItemIndicator#8d8d8d
- settings.numberInputBackground#111111
- settings.numberInputForeground#ffffff
- settings.rowHoverBackground#161616
- settings.sashBorder#222222
- settings.textInputBackground#111111
- settings.textInputForeground#ffffff
- sideBar.background#0d0d0d
- sideBar.dropBackground#1a1a1a80
- sideBar.foreground#ececec
- sideBarSectionHeader.background#111111
- sideBarSectionHeader.foreground#ececec
- sideBarTitle.foreground#ffffff
- statusBar.background#111111
- statusBar.debuggingBackground#80cbc4
- statusBar.debuggingForeground#000000
- statusBar.foreground#ececec
- statusBar.noFolderBackground#161616
- statusBar.noFolderForeground#ececec
- statusBarItem.activeBackground#222222
- statusBarItem.errorBackground#4db6ac
- statusBarItem.errorForeground#000000
- statusBarItem.hoverBackground#1a1a1a
- statusBarItem.prominentBackground#333333
- statusBarItem.prominentForeground#ffffff
- statusBarItem.prominentHoverBackground#444444
- statusBarItem.remoteBackground#b6b6b6
- statusBarItem.remoteForeground#0d0d0d
- statusBarItem.warningBackground#4db6ac
- statusBarItem.warningForeground#000000
- symbolIcon.arrayForeground#89ddff
- symbolIcon.booleanForeground#f78c6c
- symbolIcon.classForeground#ffcb6b
- symbolIcon.colorForeground#ffcb6b
- symbolIcon.constantForeground#f78c6c
- symbolIcon.constructorForeground#82aaff
- symbolIcon.enumeratorForeground#ffcb6b
- symbolIcon.enumeratorMemberForeground#ffcb6b
- symbolIcon.eventForeground#c792ea
- symbolIcon.fieldForeground#89ddff
- symbolIcon.fileForeground#eeffff
- symbolIcon.folderForeground#ffcb6b
- symbolIcon.functionForeground#82aaff
- symbolIcon.interfaceForeground#ffcb6b
- symbolIcon.keyForeground#89ddff
- symbolIcon.keywordForeground#c792ea
- symbolIcon.methodForeground#82aaff
- symbolIcon.moduleForeground#ffcb6b
- symbolIcon.namespaceForeground#ffcb6b
- symbolIcon.nullForeground#f78c6c
- symbolIcon.numberForeground#f78c6c
- symbolIcon.objectForeground#89ddff
- symbolIcon.operatorForeground#89ddff
- symbolIcon.packageForeground#ffcb6b
- symbolIcon.propertyForeground#89ddff
- symbolIcon.referenceForeground#82aaff
- symbolIcon.snippetForeground#c792ea
- symbolIcon.stringForeground#c3e88d
- symbolIcon.structForeground#ffcb6b
- symbolIcon.textForeground#eeffff
- symbolIcon.typeParameterForeground#ffcb6b
- symbolIcon.unitForeground#ffcb6b
- symbolIcon.variableForeground#89ddff
- tab.activeBackground#0d0d0d
- tab.activeForeground#80cbc4
- tab.activeModifiedBorder#8d8d8d
- tab.hoverBackground#161616
- tab.inactiveBackground#0d0d0d
- tab.inactiveForeground#555555
- tab.inactiveModifiedBorder#555555
- tab.unfocusedActiveBackground#0d0d0d
- tab.unfocusedActiveForeground#888888
- tab.unfocusedActiveModifiedBorder#666666
- tab.unfocusedHoverBackground#161616
- tab.unfocusedInactiveForeground#444444
- tab.unfocusedInactiveModifiedBorder#444444
- terminal.background#0d0d0d
- terminal.foreground#ffffff
- terminalCursor.foreground#ffffff
- terminalOverviewRuler.cursorForeground#ffffff
- terminalOverviewRuler.findMatchForeground#ffffff30
- testing.iconErrored#ffffff
- testing.iconFailed#a4a4a4
- testing.iconPassed#b6b6b6
- testing.iconQueued#cecece
- testing.iconSkipped#9b9b9b
- testing.iconUnset#555555
- testing.message.error.lineBackground#a4a4a415
- testing.message.info.decorationForeground#ffffff
- testing.message.info.lineBackground#8d8d8d15
- testing.peekHeaderBackground#111111
- testing.runAction#ececec
- textBlockQuote.background#111111
- textBlockQuote.border#333333
- textCodeBlock.background#111111
- textLink.activeForeground#ffffff
- textLink.foreground#b0b0b0
- textPreformat.foreground#b0b0b0
- textSeparator.foreground#333333
- titleBar.activeBackground#0d0d0d
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#0d0d0d
- titleBar.inactiveForeground#555555
- toolbar.activeBackground#222222
- toolbar.hoverBackground#1a1a1a
- tree.indentGuidesStroke#222222
- walkThrough.embeddedEditorBackground#111111
- welcomePage.background#0d0d0d
- welcomePage.progress.background#1a1a1a
- welcomePage.progress.foreground#8d8d8d
- welcomePage.tileBackground#111111
- welcomePage.tileHoverBackground#1a1a1a
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #888888 | — |
| string.key.json, entity.name.type.json | #9CDCFE | — |
| entity.name.tag, meta.tag | #569cd6 | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xhtml, entity.other.attribute-name.pug, entity.other.attribute-name.handlebars, entity.other.attribute-name.vue | #9cdcfe | — |
| entity.name.class.css, entity.name.class.scss, entity.name.tag.css, entity.name.tag.scss, entity.name.class.less, entity.selector.css, entity.selector.scss, entity.selector.less, support.type.selector.css, support.type.selector.scss, support.type.selector.less, selector.css, selector.scss, selector.less | #d7ba7d | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #CE9178 | — |
| entity.name.tag.yaml, keyword.key.yaml | #569cd6 | — |
| string.yaml, string.unquoted.yaml, constant.numeric.yaml, constant.bool.yaml | #CE9178 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #c792ea | — |
| keyword, storage.type, storage.modifier, storage.modifier.import, storage.modifier.package, keyword.other.import, keyword.other.package, keyword.other.use, keyword.control.import | #569cd6 | — |
| entity.name.namespace, entity.name.module | #4EC9B0 | — |
| entity.name.function, support.function, support.constant.handlebars | #DCDCAA | — |
| meta.return-type, support.class, support.type, entity.name.type, entity.other.inherited-class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #4EC9B0 | — |
| keyword.control | #C586C0 | — |
| keyword.control.new, keyword.other.new, keyword.new, storage.type.js | #569cd6 | — |
| variable, meta.definition.variable.name, support.variable, entity.name.variable, variable.parameter, variable.other | #9CDCFE | — |
| variable.parameter.unused, variable.other.unused | #6A9955 | italic |
| punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp | #CE9178 | — |
| constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp | #d16969 | — |
| keyword.operator.or.regexp, keyword.control.anchor.regexp | #DCDCAA | — |
| keyword.operator.quantifier.regexp | #d7ba7d | — |
| constant.character | #569cd6 | — |
| constant.character.escape | #d7ba7d | — |
| comment, punctuation.definition.comment | #6A9955 | italic |
| string, string.template | #CE9178 | — |
| constant.numeric, constant.language | #569cd6 | — |
| keyword.operator | #D4D4D4 | — |
| markup.heading | #569cd6 | bold |
| markup.italic, markup.italic.markdown | #DCDCAA | italic |