Midnight Dark
Publisher: ExtRiseThemes in package: 8
A beautiful dark theme with purple, cyan, and neon accents for VS Code
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.background#ffffff
- activityBar.border#e5e7eb
- activityBar.foreground#374151
- activityBar.inactiveForeground#9ca3af
- activityBarBadge.background#7c3aed
- activityBarBadge.foreground#ffffff
- badge.background#7c3aed
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#7c3aed
- breadcrumb.background#ffffff
- breadcrumb.focusForeground#374151
- breadcrumb.foreground#9ca3af
- breadcrumbPicker.background#ffffff
- button.background#7c3aed
- button.foreground#ffffff
- button.hoverBackground#6d28d9
- button.secondaryBackground#0ea5e9
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#0284c7
- dropdown.background#ffffff
- dropdown.border#d1d5db
- dropdown.foreground#374151
- dropdown.listBackground#ffffff
- editor.background#fafafa
- editor.findMatchBackground#8b5cf6
- editor.findMatchHighlightBackground#8b5cf680
- editor.findRangeHighlightBackground#e0e7ff40
- editor.foreground#2e3440
- editor.hoverHighlightBackground#e0e7ff40
- editor.inactiveSelectionBackground#e0e7ff60
- editor.lineHighlightBackground#f5f5f5
- editor.rangeHighlightBackground#e0e7ff40
- editor.selectionBackground#e0e7ff
- editor.selectionHighlightBackground#e0e7ff80
- editor.symbolHighlightBackground#e0e7ff40
- editor.wordHighlightBackground#e0e7ff60
- editor.wordHighlightStrongBackground#e0e7ff80
- editorBracketHighlight.foreground1#7c3aed
- editorBracketHighlight.foreground2#0ea5e9
- editorBracketHighlight.foreground3#059669
- editorBracketHighlight.foreground4#be185d
- editorBracketHighlight.foreground5#8b5cf6
- editorBracketHighlight.foreground6#0891b2
- editorBracketHighlight.unexpectedBracket.foreground#dc2626
- editorBracketMatch.background#e0e7ff80
- editorBracketMatch.border#7c3aed
- editorBracketPairGuide.activeBackground1#7c3aed40
- editorBracketPairGuide.activeBackground2#0ea5e940
- editorBracketPairGuide.activeBackground3#05966940
- editorBracketPairGuide.activeBackground4#be185d40
- editorBracketPairGuide.activeBackground5#8b5cf640
- editorBracketPairGuide.activeBackground6#0891b240
- editorBracketPairGuide.background1#7c3aed20
- editorBracketPairGuide.background2#0ea5e920
- editorBracketPairGuide.background3#05966920
- editorBracketPairGuide.background4#be185d20
- editorBracketPairGuide.background5#8b5cf620
- editorBracketPairGuide.background6#0891b220
- editorCodeLens.foreground#6b7280
- editorCursor.foreground#7c3aed
- editorError.foreground#dc2626
- editorGroup.border#e5e7eb
- editorGroup.dropBackground#e0e7ff40
- editorGroupHeader.noTabsBackground#ffffff
- editorGroupHeader.tabsBackground#f9fafb
- editorGroupHeader.tabsBorder#e5e7eb
- editorGutter.addedBackground#059669
- editorGutter.background#fafafa
- editorGutter.deletedBackground#dc2626
- editorGutter.foldingControlForeground#9ca3af
- editorGutter.modifiedBackground#0ea5e9
- editorHint.foreground#059669
- editorIndentGuide.activeBackground#d1d5db
- editorIndentGuide.background#e5e7eb
- editorInfo.foreground#0ea5e9
- editorLineNumber.activeForeground#7c3aed
- editorLineNumber.foreground#9ca3af
- editorLink.activeForeground#0ea5e9
- editorOverviewRuler.addedForeground#059669
- editorOverviewRuler.background#fafafa
- editorOverviewRuler.border#e5e7eb
- editorOverviewRuler.bracketMatchForeground#7c3aed
- editorOverviewRuler.commonContentForeground#9ca3af
- editorOverviewRuler.currentContentForeground#059669
- editorOverviewRuler.deletedForeground#dc2626
- editorOverviewRuler.errorForeground#dc2626
- editorOverviewRuler.findMatchForeground#8b5cf6
- editorOverviewRuler.incomingContentForeground#0ea5e9
- editorOverviewRuler.infoForeground#0ea5e9
- editorOverviewRuler.modifiedForeground#0ea5e9
- editorOverviewRuler.rangeHighlightForeground#e0e7ff
- editorOverviewRuler.selectionHighlightForeground#e0e7ff
- editorOverviewRuler.warningForeground#d97706
- editorOverviewRuler.wordHighlightForeground#e0e7ff
- editorOverviewRuler.wordHighlightStrongForeground#e0e7ff
- editorRuler.foreground#e5e7eb
- editorWarning.foreground#d97706
- editorWhitespace.foreground#e5e7eb60
- extensionButton.prominentBackground#7c3aed
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#6d28d9
- gitDecoration.conflictingResourceForeground#d97706
- gitDecoration.deletedResourceForeground#dc2626
- gitDecoration.ignoredResourceForeground#9ca3af
- gitDecoration.modifiedResourceForeground#0ea5e9
- gitDecoration.submoduleResourceForeground#7c3aed
- gitDecoration.untrackedResourceForeground#059669
- input.background#ffffff
- input.border#d1d5db
- input.foreground#374151
- input.placeholderForeground#9ca3af
- inputOption.activeBorder#7c3aed
- inputValidation.errorBackground#fef2f2
- inputValidation.errorBorder#dc2626
- inputValidation.errorForeground#dc2626
- inputValidation.infoBackground#f0f9ff
- inputValidation.infoBorder#0ea5e9
- inputValidation.infoForeground#0ea5e9
- inputValidation.warningBackground#fffbeb
- inputValidation.warningBorder#d97706
- inputValidation.warningForeground#d97706
- list.activeSelectionBackground#e0e7ff
- list.activeSelectionForeground#374151
- list.dropBackground#e0e7ff80
- list.errorForeground#dc2626
- list.focusBackground#e0e7ff
- list.focusForeground#374151
- list.highlightForeground#7c3aed
- list.hoverBackground#f3f4f6
- list.hoverForeground#374151
- list.inactiveSelectionBackground#e0e7ff60
- list.inactiveSelectionForeground#374151
- list.warningForeground#d97706
- menu.background#ffffff
- menu.border#e5e7eb
- menu.foreground#374151
- menu.selectionBackground#e0e7ff
- menu.selectionForeground#374151
- menu.separatorBackground#e5e7eb
- menubar.selectionBackground#e0e7ff
- menubar.selectionBorder#7c3aed
- menubar.selectionForeground#374151
- merge.border#e5e7eb
- merge.commonContentBackground#f3f4f640
- merge.commonHeaderBackground#f3f4f660
- merge.currentContentBackground#dcfce720
- merge.currentHeaderBackground#dcfce740
- merge.incomingContentBackground#dbeafe20
- merge.incomingHeaderBackground#dbeafe40
- notificationCenter.border#e5e7eb
- notificationCenterHeader.background#ffffff
- notificationCenterHeader.foreground#374151
- notificationLink.foreground#0ea5e9
- notifications.background#ffffff
- notifications.border#e5e7eb
- notifications.foreground#374151
- notificationToast.border#e5e7eb
- panel.background#ffffff
- panel.border#e5e7eb
- panelInput.border#d1d5db
- panelTitle.activeBorder#7c3aed
- panelTitle.activeForeground#374151
- panelTitle.inactiveForeground#9ca3af
- peekView.border#7c3aed
- peekViewEditor.background#ffffff
- peekViewEditor.matchHighlightBackground#8b5cf680
- peekViewEditorGutter.background#ffffff
- peekViewResult.background#ffffff
- peekViewResult.fileForeground#374151
- peekViewResult.lineForeground#9ca3af
- peekViewResult.matchHighlightBackground#8b5cf680
- peekViewResult.selectionBackground#e0e7ff
- peekViewResult.selectionForeground#374151
- peekViewTitle.background#f3f4f6
- peekViewTitleDescription.foreground#9ca3af
- peekViewTitleLabel.foreground#374151
- progressBar.background#7c3aed
- scrollbar.shadow#00000020
- scrollbarSlider.activeBackground#d1d5db
- scrollbarSlider.background#d1d5db60
- scrollbarSlider.hoverBackground#d1d5db80
- sideBar.background#f9fafb
- sideBar.border#e5e7eb
- sideBar.foreground#374151
- sideBarSectionHeader.background#f3f4f6
- sideBarSectionHeader.border#e5e7eb
- sideBarSectionHeader.foreground#7c3aed
- sideBarTitle.foreground#7c3aed
- statusBar.background#ffffff
- statusBar.border#e5e7eb
- statusBar.debuggingBackground#dc2626
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#374151
- statusBar.noFolderBackground#ffffff
- statusBar.noFolderForeground#374151
- statusBarItem.activeBackground#e0e7ff
- statusBarItem.hoverBackground#f3f4f6
- statusBarItem.prominentBackground#7c3aed
- statusBarItem.prominentForeground#ffffff
- statusBarItem.prominentHoverBackground#6d28d9
- symbolIcon.arrayForeground#7c3aed
- symbolIcon.booleanForeground#7c3aed
- symbolIcon.classForeground#7c3aed
- symbolIcon.colorForeground#7c3aed
- symbolIcon.constantForeground#059669
- symbolIcon.constructorForeground#7c3aed
- symbolIcon.enumeratorForeground#7c3aed
- symbolIcon.enumeratorMemberForeground#7c3aed
- symbolIcon.eventForeground#7c3aed
- symbolIcon.fieldForeground#7c3aed
- symbolIcon.fileForeground#7c3aed
- symbolIcon.folderForeground#7c3aed
- symbolIcon.functionForeground#7c3aed
- symbolIcon.interfaceForeground#7c3aed
- symbolIcon.keyForeground#7c3aed
- symbolIcon.keywordForeground#0ea5e9
- symbolIcon.methodForeground#7c3aed
- symbolIcon.moduleForeground#7c3aed
- symbolIcon.namespaceForeground#7c3aed
- symbolIcon.nullForeground#7c3aed
- symbolIcon.numberForeground#7c3aed
- symbolIcon.objectForeground#7c3aed
- symbolIcon.operatorForeground#0ea5e9
- symbolIcon.packageForeground#7c3aed
- symbolIcon.propertyForeground#7c3aed
- symbolIcon.referenceForeground#7c3aed
- symbolIcon.snippetForeground#7c3aed
- symbolIcon.stringForeground#be185d
- symbolIcon.structForeground#7c3aed
- symbolIcon.textForeground#7c3aed
- symbolIcon.typeParameterForeground#7c3aed
- symbolIcon.unitForeground#7c3aed
- symbolIcon.variableForeground#7c3aed
- tab.activeBackground#ffffff
- tab.activeBorder#7c3aed
- tab.activeBorderTop#7c3aed
- tab.activeForeground#374151
- tab.border#e5e7eb
- tab.hoverBackground#f3f4f6
- tab.hoverForeground#374151
- tab.inactiveBackground#f9fafb
- tab.inactiveForeground#9ca3af
- tab.unfocusedActiveBackground#f9fafb
- tab.unfocusedActiveForeground#9ca3af
- tab.unfocusedInactiveBackground#f9fafb
- tab.unfocusedInactiveForeground#9ca3af
- terminal.ansiBlack#1f2937
- terminal.ansiBlue#0ea5e9
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#3b82f6
- terminal.ansiBrightCyan#06b6d4
- terminal.ansiBrightGreen#10b981
- terminal.ansiBrightMagenta#8b5cf6
- terminal.ansiBrightRed#ef4444
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f59e0b
- terminal.ansiCyan#0891b2
- terminal.ansiGreen#059669
- terminal.ansiMagenta#7c3aed
- terminal.ansiRed#dc2626
- terminal.ansiWhite#f9fafb
- terminal.ansiYellow#d97706
- terminal.background#ffffff
- terminal.foreground#374151
- titleBar.activeBackground#ffffff
- titleBar.activeForeground#374151
- titleBar.border#e5e7eb
- titleBar.inactiveBackground#f9fafb
- titleBar.inactiveForeground#9ca3af
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6b7280 | italic |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other | #0ea5e9 | bold |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise | #0ea5e9 | — |
| string, string.quoted, string.template, string.interpolated | #be185d | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #be185d | — |
| constant.numeric, constant.language.numeric | #059669 | — |
| constant, constant.language, constant.character, constant.other | #059669 | — |
| variable, variable.parameter, variable.other | #7c3aed | — |
| entity.name.function, support.function, meta.function-call | #7c3aed | bold |
| entity.name.class, entity.name.type.class, support.class | #7c3aed | bold |
| entity.name.type, support.type, storage.type.primitive | #059669 | — |
| entity.other.attribute-name, entity.name.tag | #7c3aed | — |
| entity.name.tag, punctuation.definition.tag | #0ea5e9 | — |
| support.type.property-name.css | #7c3aed | — |
| support.constant.property-value.css | #059669 | — |
| support.type.property-name.json | #7c3aed | — |
| markup.heading, entity.name.section.markdown | #0ea5e9 | bold |
| markup.bold | #7c3aed | bold |
| markup.italic | #7c3aed | italic |
| markup.inline.raw, markup.fenced_code | #059669 | — |
| markup.underline.link | #0ea5e9 | — |
| entity.name.function.decorator.python | #7c3aed | bold |
| variable.language.special.self.python | #0ea5e9 | italic |
| keyword.control.flow.js, keyword.control.flow.ts | #0ea5e9 | bold |
| variable.language.this.js, variable.language.this.ts | #0ea5e9 | italic |
| invalid, invalid.illegal | #dc2626 | underline |
| message.error | #dc2626 | — |
| message.warning | #d97706 | — |
| message.info | #0ea5e9 | — |
| variable.other.php, variable.other.property.php | #7c3aed | — |
| entity.name.function.php, support.function.php | #7c3aed | bold |
| entity.name.type.class.java, storage.type.java | #7c3aed | bold |
| storage.type.annotation.java | #059669 | — |
| entity.name.type.class.cs, storage.type.cs | #7c3aed | bold |
| entity.name.type.attribute.cs | #059669 | — |
| entity.name.function.go, support.function.go | #7c3aed | bold |
| entity.name.type.go, storage.type.go | #059669 | — |
| entity.name.function.rust, support.function.rust | #7c3aed | bold |
| entity.name.function.macro.rust | #8b5cf6 | bold |
| entity.name.type.rust, storage.type.rust | #059669 | — |
| keyword.other.special-method.dockerfile, keyword.operator.dockerfile | #0ea5e9 | bold |
| entity.name.function.dockerfile | #7c3aed | bold |
| entity.name.tag.yaml | #7c3aed | — |
| string.unquoted.yaml | #be185d | — |
| entity.name.type.anchor.yaml | #059669 | — |
| variable.other.normal.shell, variable.other.positional.shell | #7c3aed | — |
| entity.name.function.shell | #7c3aed | bold |
| support.function.builtin.shell | #0ea5e9 | — |
| keyword.other.sql | #0ea5e9 | bold |
| support.function.sql | #7c3aed | — |
| entity.name.tag.xml, entity.name.tag.localname.xml | #0ea5e9 | — |
| entity.other.attribute-name.xml | #7c3aed | — |
| entity.name.type.class.ts, entity.name.type.class.tsx | #7c3aed | bold |
| entity.name.type.interface.ts, entity.name.type.interface.tsx | #059669 | bold |
| entity.name.type.parameter.ts, entity.name.type.parameter.tsx | #8b5cf6 | — |
| entity.name.type.enum.ts, entity.name.type.enum.tsx | #d97706 | bold |
| storage.modifier.async.js, storage.modifier.async.ts | #8b5cf6 | italic |
| meta.function.decorator.python | #059669 | bold |
| support.function.magic.python | #8b5cf6 | bold |
| meta.function.parameters.python | #059669 | — |