Midnight Black
Publisher: VitorioThemes in package: 3
Dark VS Code theme with vibrant colors and visual comfort
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#00000000
- activityBar.activeBorder#FF79C680
- activityBar.background#000000
- activityBar.foreground#F8F8F2
- activityBar.inactiveForeground#6272A4
- activityBarBadge.background#FF79C6
- activityBarBadge.foreground#F8F8F2
- badge.background#44475A
- badge.foreground#F8F8F2
- breadcrumb.activeSelectionForeground#F8F8F2
- breadcrumb.background#000000
- breadcrumb.focusForeground#F8F8F2
- breadcrumb.foreground#6272A4
- breadcrumbPicker.background#12131D
- button.background#001AFF
- button.foreground#F8F8F2
- contrastBorder#12131D
- debugToolBar.background#13141F
- diffEditor.insertedTextBackground#50FA7B20
- diffEditor.removedTextBackground#FF555550
- dropdown.background#000000
- dropdown.border#12131D
- dropdown.foreground#F8F8F2
- editor.background#000000
- editor.findMatchBackground#FFB86C80
- editor.findMatchHighlightBackground#F8F8F240
- editor.findRangeHighlightBackground#44475A75
- editor.foldBackground#F8F8F21A
- editor.foreground#F8F8F2
- editor.hoverHighlightBackground#8BE9FD50
- editor.lineHighlightBorder#44475A75
- editor.rangeHighlightBackground#BD93F915
- editor.selectionBackground#44475A
- editor.selectionHighlightBackground#282A36F1
- editor.snippetFinalTabstopHighlightBackground#13141F
- editor.snippetFinalTabstopHighlightBorder#50FA7B
- editor.snippetTabstopHighlightBackground#13141F
- editor.snippetTabstopHighlightBorder#6272A4
- editor.wordHighlightBackground#8BE9FD50
- editor.wordHighlightStrongBackground#50FA7B50
- editorCodeLens.foreground#6272A4
- editorError.foreground#FF5555
- editorGroup.border#BD93F9
- editorGroup.dropBackground#F8F8F2
- editorGroupHeader.tabsBackground#000000
- editorGutter.addedBackground#50FA7B80
- editorGutter.deletedBackground#FF555580
- editorGutter.modifiedBackground#8BE9FD80
- editorHoverWidget.background#000000
- editorHoverWidget.border#6272A4
- editorIndentGuide.activeBackground1#F8F8F245
- editorIndentGuide.background1#F8F8F21A
- editorLineNumber.foreground#6272A4
- editorLink.activeForeground#8BE9FD
- editorMarkerNavigation.background#13141F
- editorOverviewRuler.addedForeground#50FA7B80
- editorOverviewRuler.border#12131D
- editorOverviewRuler.currentContentForeground#50FA7B
- editorOverviewRuler.deletedForeground#FF555580
- editorOverviewRuler.errorForeground#FF555580
- editorOverviewRuler.incomingContentForeground#BD93F9
- editorOverviewRuler.infoForeground#8BE9FD80
- editorOverviewRuler.modifiedForeground#8BE9FD80
- editorOverviewRuler.selectionHighlightForeground#FFB86CF1
- editorOverviewRuler.warningForeground#FFB86C80
- editorOverviewRuler.wordHighlightForeground#8BE9FDF1
- editorOverviewRuler.wordHighlightStrongForeground#21EE0AF1
- editorRuler.foreground#F8F8F21A
- editorSuggestWidget.background#000000
- editorSuggestWidget.foreground#FFFF01
- editorSuggestWidget.selectedBackground#44475A
- editorWarning.foreground#8BE9FD
- editorWhitespace.foreground#F8F8F21A
- editorWidget.background#000000
- errorForeground#FF5555
- extensionButton.prominentBackground#001AFF
- extensionButton.prominentForeground#F8F8F2
- focusBorder#6272A4
- foreground#F8F8F2
- gitDecoration.conflictingResourceForeground#FFB86C
- gitDecoration.deletedResourceForeground#FF5555
- gitDecoration.ignoredResourceForeground#6272A4
- gitDecoration.modifiedResourceForeground#8BE9FD
- gitDecoration.untrackedResourceForeground#50FA7B
- input.background#000000
- input.border#12131D
- input.foreground#F8F8F2
- input.placeholderForeground#6272A4
- inputOption.activeBorder#BD93F9
- inputValidation.errorBorder#FF5555
- inputValidation.infoBorder#FF79C6
- inputValidation.warningBorder#FFB86C
- list.activeSelectionBackground#44475A
- list.activeSelectionForeground#F8F8F2
- list.dropBackground#44475A
- list.errorForeground#FF5555
- list.focusBackground#44475A75
- list.highlightForeground#8BE9FD
- list.hoverBackground#44475A75
- list.inactiveSelectionBackground#44475A75
- list.warningForeground#FFB86C
- listFilterWidget.background#181928
- listFilterWidget.noMatchesOutline#FF5555
- listFilterWidget.outline#282A36
- merge.currentHeaderBackground#50FA7B90
- merge.incomingHeaderBackground#BD93F990
- panel.background#000000
- panel.border#BD93F9
- panelTitle.activeBorder#FF79C6
- panelTitle.activeForeground#F8F8F2
- panelTitle.inactiveForeground#6272A4
- peekView.border#44475A
- peekViewEditor.background#13141F
- peekViewEditor.matchHighlightBackground#F1FA8C80
- peekViewResult.background#13141F
- peekViewResult.fileForeground#F8F8F2
- peekViewResult.lineForeground#F8F8F2
- peekViewResult.matchHighlightBackground#F1FA8C80
- peekViewResult.selectionBackground#44475A
- peekViewResult.selectionForeground#F8F8F2
- peekViewTitle.background#12131D
- peekViewTitleDescription.foreground#6272A4
- peekViewTitleLabel.foreground#F8F8F2
- pickerGroup.border#BD93F9
- pickerGroup.foreground#8BE9FD
- progressBar.background#FF79C6
- selection.background#BD93F9
- settings.checkboxBackground#13141F
- settings.checkboxBorder#12131D
- settings.checkboxForeground#F8F8F2
- settings.dropdownBackground#13141F
- settings.dropdownBorder#12131D
- settings.dropdownForeground#F8F8F2
- settings.headerForeground#F8F8F2
- settings.modifiedItemIndicator#FFB86C
- settings.numberInputBackground#13141F
- settings.numberInputBorder#12131D
- settings.numberInputForeground#F8F8F2
- settings.textInputBackground#13141F
- settings.textInputBorder#12131D
- settings.textInputForeground#F8F8F2
- sideBar.background#000000
- sideBar.foreground#F8F8F2
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#12131D
- sideBarTitle.foreground#F8F8F2
- statusBar.background#000000
- statusBar.debuggingBackground#FF5555
- statusBar.debuggingForeground#12131D
- statusBar.foreground#F8F8F2
- statusBar.noFolderBackground#12131D
- statusBar.noFolderForeground#F8F8F2
- statusBarItem.prominentBackground#FF5555
- statusBarItem.prominentHoverBackground#FFB86C
- statusBarItem.remoteBackground#BD93F9
- statusBarItem.remoteForeground#F8F8F2
- tab.activeBackground#000000
- tab.activeBorderTop#FF79C6
- tab.activeForeground#F8F8F2
- tab.border#000000
- tab.inactiveBackground#000000
- tab.inactiveForeground#6272A4
- terminal.ansiBlack#21222C
- terminal.ansiBlue#BD93F9
- terminal.ansiBrightBlack#6272A4
- terminal.ansiBrightBlue#D6ACFF
- terminal.ansiBrightCyan#8BE9FD
- terminal.ansiBrightGreen#50FA7B
- terminal.ansiBrightMagenta#FF92DF
- terminal.ansiBrightRed#FF5555
- terminal.ansiBrightWhite#F8F8F2
- terminal.ansiBrightYellow#FFFFA5
- terminal.ansiCyan#8BE9FD
- terminal.ansiGreen#50FA7B
- terminal.ansiMagenta#FF79C6
- terminal.ansiRed#FF5555
- terminal.ansiWhite#F8F8F2
- terminal.ansiYellow#FFFF00
- terminal.background#000000
- terminal.foreground#F8F8F2
- titleBar.activeBackground#000000
- titleBar.activeForeground#F8F8F2
- titleBar.inactiveBackground#12131D
- titleBar.inactiveForeground#6272A4
- walkThrough.embeddedEditorBackground#13141F
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python | #848bbd | — |
| string.quoted, string.template, punctuation.definition.string | #ff8b39 | — |
| string.template meta.embedded.line | #b6b1b1 | — |
| variable, entity.name.variable | #ff7edb | — |
| variable.language | #fe4450 | — |
| variable.parameter | — | — |
| storage.type, storage.modifier | #fede5d | — |
| constant | #f97e72 | — |
| string.regexp | #f97e72 | — |
| constant.numeric | #f97e72 | — |
| constant.language | #f97e72 | — |
| constant.character.escape | #36f9f6 | — |
| entity.name | #fe4450 | — |
| entity.name.tag | #72f1b8 | — |
| punctuation.definition.tag | #36f9f6 | — |
| entity.other.attribute-name | #fede5d | — |
| entity.other.attribute-name.html | #fede5d | — |
| entity.name.type, meta.attribute.class.html | #fe4450 | — |
| entity.other.inherited-class | #D50 | — |
| entity.name.function, variable.function | #36f9f6 | — |
| keyword.control.export.js, keyword.control.import.js | #72f1b8 | — |
| constant.numeric.decimal.js | #2EE2FA | — |
| keyword | #fede5d | — |
| keyword.control | #fede5d | — |
| keyword.operator | #fede5d | — |
| keyword.operator.new, keyword.operator.expression, keyword.operator.logical | #fede5d | — |
| keyword.other.unit | #f97e72 | — |
| support | #fe4450 | — |
| support.function | #36f9f6 | — |
| support.variable | #ff7edb | — |
| meta.object-literal.key, support.type.property-name | #ff7edb | — |
| punctuation.separator.key-value | #b6b1b1 | — |
| punctuation.section.embedded | #fede5d | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #72f1b8 | — |
| support.type.property-name.css, support.type.property-name.json | #72f1b8 | — |
| switch-block.expr.js | #72f1b8 | — |
| variable.other.constant.property.js, variable.other.property.js | #2ee2fa | — |
| constant.other.color | #f97e72 | — |
| support.constant.font-name | #f97e72 | — |
| entity.other.attribute-name.id | #36f9f6 | — |
| entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class | #D50 | — |
| support.function.misc.css | #fe4450 | — |
| markup.heading, entity.name.section | #ff7edb | — |
| text.html, keyword.operator.assignment | #ffffffee | — |
| markup.quote | #b6b1b1cc | — |
| beginning.punctuation.definition.list | #ff7edb | — |
| markup.underline.link | #D50 | — |
| string.other.link.description | #f97e72 | — |
| meta.function-call.generic.python | #36f9f6 | — |
| variable.parameter.function-call.python | #72f1b8 | — |
| storage.type.cs | #fe4450 | — |
| entity.name.variable.local.cs | #ff7edb | — |
| entity.name.variable.field.cs, entity.name.variable.property.cs | #ff7edb | — |
| constant.other.placeholder.c | #72f1b8 | — |
| keyword.control.directive.include.c, keyword.control.directive.define.c | #72f1b8 | — |
| storage.modifier.c | #fe4450 | — |
| source.cpp keyword.operator | #fede5d | — |
| constant.other.placeholder.cpp | #72f1b8 | — |
| keyword.control.directive.include.cpp, keyword.control.directive.define.cpp | #72f1b8 | — |
| storage.modifier.specifier.const.cpp | #fe4450 | — |
| source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir | #36f9f6 | — |
| source.elixir entity.name.function | #72f1b8 | — |
| source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir | #36f9f6 | — |
| source.elixir punctuation.definition.string | #72f1b8 | — |
| source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir | #72f1b8 | — |
| source.elixir .punctuation.binary.elixir | #ff7edb | — |
| entity.global.clojure | #36f9f6 | — |
| storage.control.clojure | #36f9f6 | — |
| meta.metadata.simple.clojure, meta.metadata.map.clojure | #fe4450 | — |
| meta.quoted-expression.clojure | — | — |
| meta.symbol.clojure | #ff7edbff | — |
| source.go | #ff7edbff | — |
| source.go meta.function-call.go | #36f9f6 | — |
| source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go | #fede5d | — |
| source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go | #72f1b8 | — |
| source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable | #2EE2FA | — |
| markup.underline.link.markdown, markup.inline.raw.string.markdown | #72f1b8 | — |
| string.other.link.title.markdown | #fede5d | — |
| markup.heading.markdown, entity.name.section.markdown | #ff7edb | — |
| markup.italic.markdown | #2EE2FA | — |
| markup.bold.markdown | #2EE2FA | — |
| punctuation.definition.quote.begin.markdown, markup.quote.markdown | #72f1b8 | — |
| source.dart, source.python, source.scala | #ff7edbff | — |
| string.interpolated.single.dart | #f97e72 | — |
| variable.parameter.dart | #72f1b8 | — |
| constant.numeric.dart | #2EE2FA | — |
| variable.parameter.scala | #2EE2FA | — |
| meta.template.expression.scala | #72f1b8 | — |