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#1a1b26
- activityBar.border#33467C
- activityBar.foreground#c0caf5
- activityBar.inactiveForeground#5c6370
- activityBarBadge.background#c792ea
- activityBarBadge.foreground#1a1b26
- badge.background#c792ea
- badge.foreground#1a1b26
- breadcrumb.activeSelectionForeground#c792ea
- breadcrumb.background#1a1b26
- breadcrumb.focusForeground#c0caf5
- breadcrumb.foreground#5c6370
- breadcrumbPicker.background#1a1b26
- button.background#c792ea
- button.foreground#1a1b26
- button.hoverBackground#bb9af7
- button.secondaryBackground#89ddff
- button.secondaryForeground#1a1b26
- button.secondaryHoverBackground#7dcfff
- dropdown.background#24283b
- dropdown.border#33467C
- dropdown.foreground#c0caf5
- dropdown.listBackground#1a1b26
- editor.background#1a1b26
- editor.findMatchBackground#bb9af7
- editor.findMatchHighlightBackground#bb9af780
- editor.findRangeHighlightBackground#33467C40
- editor.foreground#c0caf5
- editor.hoverHighlightBackground#33467C40
- editor.inactiveSelectionBackground#33467C60
- editor.lineHighlightBackground#24283b
- editor.rangeHighlightBackground#33467C40
- editor.selectionBackground#33467C
- editor.selectionHighlightBackground#33467C80
- editor.symbolHighlightBackground#33467C40
- editor.wordHighlightBackground#33467C60
- editor.wordHighlightStrongBackground#33467C80
- editorBracketHighlight.foreground1#c792ea
- editorBracketHighlight.foreground2#89ddff
- editorBracketHighlight.foreground3#c3e88d
- editorBracketHighlight.foreground4#f07178
- editorBracketHighlight.foreground5#bb9af7
- editorBracketHighlight.foreground6#7dcfff
- editorBracketHighlight.unexpectedBracket.foreground#f7768e
- editorBracketMatch.background#33467C80
- editorBracketMatch.border#c792ea
- editorBracketPairGuide.activeBackground1#c792ea80
- editorBracketPairGuide.activeBackground2#89ddff80
- editorBracketPairGuide.activeBackground3#c3e88d80
- editorBracketPairGuide.activeBackground4#f0717880
- editorBracketPairGuide.activeBackground5#bb9af780
- editorBracketPairGuide.activeBackground6#7dcfff80
- editorBracketPairGuide.background1#c792ea40
- editorBracketPairGuide.background2#89ddff40
- editorBracketPairGuide.background3#c3e88d40
- editorBracketPairGuide.background4#f0717840
- editorBracketPairGuide.background5#bb9af740
- editorBracketPairGuide.background6#7dcfff40
- editorCodeLens.foreground#5c6370
- editorCursor.foreground#c792ea
- editorError.foreground#f7768e
- editorGroup.border#33467C
- editorGroup.dropBackground#33467C40
- editorGroupHeader.noTabsBackground#1a1b26
- editorGroupHeader.tabsBackground#16161e
- editorGroupHeader.tabsBorder#33467C
- editorGutter.addedBackground#c3e88d
- editorGutter.background#1a1b26
- editorGutter.deletedBackground#f7768e
- editorGutter.foldingControlForeground#5c6370
- editorGutter.modifiedBackground#89ddff
- editorHint.foreground#c3e88d
- editorIndentGuide.activeBackground#33467C
- editorIndentGuide.background#33467C40
- editorInfo.foreground#89ddff
- editorLineNumber.activeForeground#c792ea
- editorLineNumber.foreground#5c6370
- editorLink.activeForeground#89ddff
- editorOverviewRuler.addedForeground#c3e88d
- editorOverviewRuler.background#1a1b26
- editorOverviewRuler.border#33467C
- editorOverviewRuler.bracketMatchForeground#c792ea
- editorOverviewRuler.commonContentForeground#5c6370
- editorOverviewRuler.currentContentForeground#c3e88d
- editorOverviewRuler.deletedForeground#f7768e
- editorOverviewRuler.errorForeground#f7768e
- editorOverviewRuler.findMatchForeground#bb9af7
- editorOverviewRuler.incomingContentForeground#89ddff
- editorOverviewRuler.infoForeground#89ddff
- editorOverviewRuler.modifiedForeground#89ddff
- editorOverviewRuler.rangeHighlightForeground#33467C
- editorOverviewRuler.selectionHighlightForeground#33467C
- editorOverviewRuler.warningForeground#e0af68
- editorOverviewRuler.wordHighlightForeground#33467C
- editorOverviewRuler.wordHighlightStrongForeground#33467C
- editorRuler.foreground#33467C
- editorWarning.foreground#e0af68
- editorWhitespace.foreground#33467C60
- extensionButton.prominentBackground#c792ea
- extensionButton.prominentForeground#1a1b26
- extensionButton.prominentHoverBackground#bb9af7
- gitDecoration.conflictingResourceForeground#e0af68
- gitDecoration.deletedResourceForeground#f7768e
- gitDecoration.ignoredResourceForeground#5c6370
- gitDecoration.modifiedResourceForeground#89ddff
- gitDecoration.submoduleResourceForeground#c792ea
- gitDecoration.untrackedResourceForeground#c3e88d
- input.background#24283b
- input.border#33467C
- input.foreground#c0caf5
- input.placeholderForeground#5c6370
- inputOption.activeBorder#c792ea
- inputValidation.errorBackground#f7768e
- inputValidation.errorBorder#f7768e
- inputValidation.errorForeground#1a1b26
- inputValidation.infoBackground#89ddff
- inputValidation.infoBorder#89ddff
- inputValidation.infoForeground#1a1b26
- inputValidation.warningBackground#e0af68
- inputValidation.warningBorder#e0af68
- inputValidation.warningForeground#1a1b26
- list.activeSelectionBackground#33467C
- list.activeSelectionForeground#c0caf5
- list.dropBackground#33467C80
- list.errorForeground#f7768e
- list.focusBackground#33467C
- list.focusForeground#c0caf5
- list.highlightForeground#c792ea
- list.hoverBackground#33467C40
- list.hoverForeground#c0caf5
- list.inactiveSelectionBackground#33467C60
- list.inactiveSelectionForeground#c0caf5
- list.warningForeground#e0af68
- menu.background#1a1b26
- menu.border#33467C
- menu.foreground#c0caf5
- menu.selectionBackground#33467C
- menu.selectionForeground#c0caf5
- menu.separatorBackground#33467C
- menubar.selectionBackground#33467C
- menubar.selectionBorder#c792ea
- menubar.selectionForeground#c0caf5
- merge.border#33467C
- merge.commonContentBackground#5c637040
- merge.commonHeaderBackground#5c637060
- merge.currentContentBackground#c3e88d20
- merge.currentHeaderBackground#c3e88d40
- merge.incomingContentBackground#89ddff20
- merge.incomingHeaderBackground#89ddff40
- notificationCenter.border#33467C
- notificationCenterHeader.background#1a1b26
- notificationCenterHeader.foreground#c0caf5
- notificationLink.foreground#89ddff
- notifications.background#1a1b26
- notifications.border#33467C
- notifications.foreground#c0caf5
- notificationToast.border#33467C
- panel.background#1a1b26
- panel.border#33467C
- panelInput.border#33467C
- panelTitle.activeBorder#c792ea
- panelTitle.activeForeground#c0caf5
- panelTitle.inactiveForeground#5c6370
- peekView.border#c792ea
- peekViewEditor.background#1a1b26
- peekViewEditor.matchHighlightBackground#bb9af780
- peekViewEditorGutter.background#1a1b26
- peekViewResult.background#1a1b26
- peekViewResult.fileForeground#c0caf5
- peekViewResult.lineForeground#5c6370
- peekViewResult.matchHighlightBackground#bb9af780
- peekViewResult.selectionBackground#33467C
- peekViewResult.selectionForeground#c0caf5
- peekViewTitle.background#24283b
- peekViewTitleDescription.foreground#5c6370
- peekViewTitleLabel.foreground#c0caf5
- progressBar.background#c792ea
- scrollbar.shadow#00000080
- scrollbarSlider.activeBackground#33467C
- scrollbarSlider.background#33467C60
- scrollbarSlider.hoverBackground#33467C80
- sideBar.background#1a1b26
- sideBar.border#33467C
- sideBar.foreground#c0caf5
- sideBarSectionHeader.background#24283b
- sideBarSectionHeader.border#33467C
- sideBarSectionHeader.foreground#c792ea
- sideBarTitle.foreground#c792ea
- statusBar.background#1a1b26
- statusBar.border#33467C
- statusBar.debuggingBackground#f7768e
- statusBar.debuggingForeground#1a1b26
- statusBar.foreground#c0caf5
- statusBar.noFolderBackground#1a1b26
- statusBar.noFolderForeground#c0caf5
- statusBarItem.activeBackground#33467C
- statusBarItem.hoverBackground#33467C60
- statusBarItem.prominentBackground#c792ea
- statusBarItem.prominentForeground#1a1b26
- statusBarItem.prominentHoverBackground#bb9af7
- symbolIcon.arrayForeground#c792ea
- symbolIcon.booleanForeground#c792ea
- symbolIcon.classForeground#c792ea
- symbolIcon.colorForeground#c792ea
- symbolIcon.constantForeground#c3e88d
- symbolIcon.constructorForeground#c792ea
- symbolIcon.enumeratorForeground#c792ea
- symbolIcon.enumeratorMemberForeground#c792ea
- symbolIcon.eventForeground#c792ea
- symbolIcon.fieldForeground#c792ea
- symbolIcon.fileForeground#c792ea
- symbolIcon.folderForeground#c792ea
- symbolIcon.functionForeground#c792ea
- symbolIcon.interfaceForeground#c792ea
- symbolIcon.keyForeground#c792ea
- symbolIcon.keywordForeground#89ddff
- symbolIcon.methodForeground#c792ea
- symbolIcon.moduleForeground#c792ea
- symbolIcon.namespaceForeground#c792ea
- symbolIcon.nullForeground#c792ea
- symbolIcon.numberForeground#c792ea
- symbolIcon.objectForeground#c792ea
- symbolIcon.operatorForeground#89ddff
- symbolIcon.packageForeground#c792ea
- symbolIcon.propertyForeground#c792ea
- symbolIcon.referenceForeground#c792ea
- symbolIcon.snippetForeground#c792ea
- symbolIcon.stringForeground#f07178
- symbolIcon.structForeground#c792ea
- symbolIcon.textForeground#c792ea
- symbolIcon.typeParameterForeground#c792ea
- symbolIcon.unitForeground#c792ea
- symbolIcon.variableForeground#c792ea
- tab.activeBackground#1a1b26
- tab.activeBorder#c792ea
- tab.activeBorderTop#c792ea
- tab.activeForeground#c0caf5
- tab.border#33467C
- tab.hoverBackground#24283b
- tab.hoverForeground#c0caf5
- tab.inactiveBackground#16161e
- tab.inactiveForeground#5c6370
- tab.unfocusedActiveBackground#16161e
- tab.unfocusedActiveForeground#5c6370
- tab.unfocusedInactiveBackground#16161e
- tab.unfocusedInactiveForeground#5c6370
- terminal.ansiBlack#1a1b26
- terminal.ansiBlue#89ddff
- terminal.ansiBrightBlack#5c6370
- terminal.ansiBrightBlue#89ddff
- terminal.ansiBrightCyan#89ddff
- terminal.ansiBrightGreen#c3e88d
- terminal.ansiBrightMagenta#c792ea
- terminal.ansiBrightRed#f7768e
- terminal.ansiBrightWhite#c0caf5
- terminal.ansiBrightYellow#e0af68
- terminal.ansiCyan#89ddff
- terminal.ansiGreen#c3e88d
- terminal.ansiMagenta#c792ea
- terminal.ansiRed#f7768e
- terminal.ansiWhite#c0caf5
- terminal.ansiYellow#e0af68
- terminal.background#1a1b26
- terminal.foreground#c0caf5
- titleBar.activeBackground#1a1b26
- titleBar.activeForeground#c0caf5
- titleBar.border#33467C
- titleBar.inactiveBackground#16161e
- titleBar.inactiveForeground#5c6370
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #5c6370 | italic |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other | #89ddff | bold |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise | #89ddff | — |
| string, string.quoted, string.template, string.interpolated | #f07178 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #f07178 | — |
| constant.numeric, constant.language.numeric | #c3e88d | — |
| constant, constant.language, constant.character, constant.other | #c3e88d | — |
| variable, variable.parameter, variable.other | #c792ea | — |
| entity.name.function, support.function, meta.function-call | #c792ea | bold |
| entity.name.class, entity.name.type.class, support.class | #c792ea | bold |
| entity.name.type, support.type, storage.type.primitive | #c3e88d | — |
| entity.other.attribute-name, entity.name.tag | #c792ea | — |
| entity.name.tag, punctuation.definition.tag | #89ddff | — |
| support.type.property-name.css | #c792ea | — |
| support.constant.property-value.css | #c3e88d | — |
| support.type.property-name.json | #c792ea | — |
| markup.heading, entity.name.section.markdown | #89ddff | bold |
| markup.bold | #c792ea | bold |
| markup.italic | #c792ea | italic |
| markup.inline.raw, markup.fenced_code | #c3e88d | — |
| markup.underline.link | #89ddff | — |
| entity.name.function.decorator.python | #c792ea | bold |
| variable.language.special.self.python | #89ddff | italic |
| keyword.control.flow.js, keyword.control.flow.ts | #89ddff | bold |
| variable.language.this.js, variable.language.this.ts | #89ddff | italic |
| invalid, invalid.illegal | #f7768e | underline |
| message.error | #f7768e | — |
| message.warning | #e0af68 | — |
| message.info | #89ddff | — |
| variable.other.php, variable.other.property.php | #c792ea | — |
| entity.name.function.php, support.function.php | #c792ea | bold |
| entity.name.type.class.java, storage.type.java | #c792ea | bold |
| storage.type.annotation.java | #c3e88d | — |
| entity.name.type.class.cs, storage.type.cs | #c792ea | bold |
| entity.name.type.attribute.cs | #c3e88d | — |
| entity.name.function.go, support.function.go | #c792ea | bold |
| entity.name.type.go, storage.type.go | #c3e88d | — |
| entity.name.function.rust, support.function.rust | #c792ea | bold |
| entity.name.function.macro.rust | #bb9af7 | bold |
| entity.name.type.rust, storage.type.rust | #c3e88d | — |
| keyword.other.special-method.dockerfile, keyword.operator.dockerfile | #89ddff | bold |
| entity.name.function.dockerfile | #c792ea | bold |
| entity.name.tag.yaml | #c792ea | — |
| string.unquoted.yaml | #f07178 | — |
| entity.name.type.anchor.yaml | #c3e88d | — |
| variable.other.normal.shell, variable.other.positional.shell | #c792ea | — |
| entity.name.function.shell | #c792ea | bold |
| support.function.builtin.shell | #89ddff | — |
| keyword.other.sql | #89ddff | bold |
| support.function.sql | #c792ea | — |
| entity.name.tag.xml, entity.name.tag.localname.xml | #89ddff | — |
| entity.other.attribute-name.xml | #c792ea | — |
| entity.name.type.class.ts, entity.name.type.class.tsx | #c792ea | bold |
| entity.name.type.interface.ts, entity.name.type.interface.tsx | #c3e88d | bold |
| entity.name.type.parameter.ts, entity.name.type.parameter.tsx | #bb9af7 | — |
| entity.name.type.enum.ts, entity.name.type.enum.tsx | #e0af68 | bold |
| storage.modifier.async.js, storage.modifier.async.ts | #bb9af7 | italic |
| meta.function.decorator.python | #c3e88d | bold |
| support.function.magic.python | #bb9af7 | bold |
| meta.function.parameters.python | #c3e88d | — |