Mystic Dark Collection
Publisher: Mustafa ÖzdemirThemes in package: 4
A collection of four unique dark themes: Mystic Dark, Neon Noir, Cosmic Purple, and Deep Ocean
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#000000
- activityBar.foreground#00ffff
- activityBar.inactiveForeground#666666
- activityBarBadge.background#ff00ff
- activityBarBadge.foreground#000000
- button.background#ff00ff
- button.foreground#000000
- button.hoverBackground#ff40ff
- debugToolBar.background#000000
- debugToolBar.border#1a1a1a
- diffEditor.insertedTextBackground#1a2a1a
- diffEditor.removedTextBackground#2a1a1a
- dropdown.background#1a1a1a
- dropdown.border#00ffff
- dropdown.foreground#ffffff
- editor.background#000000
- editor.foreground#ffffff
- editor.inactiveSelectionBackground#1a1a1a
- editor.lineHighlightBackground#1a1a1a
- editor.selectionBackground#2a2a2a
- editorCursor.foreground#00ffff
- editorGroupHeader.noTabsBackground#000000
- editorGroupHeader.tabsBackground#000000
- editorGroupHeader.tabsBorder#1a1a1a
- editorHoverWidget.background#000000
- editorHoverWidget.border#1a1a1a
- editorIndentGuide.activeBackground#00ffff
- editorIndentGuide.background#1a1a1a
- editorSuggestWidget.background#000000
- editorSuggestWidget.border#1a1a1a
- editorSuggestWidget.highlightForeground#00ffff
- editorSuggestWidget.selectedBackground#1a1a1a
- editorWhitespace.foreground#333333
- editorWidget.background#000000
- editorWidget.border#1a1a1a
- input.background#1a1a1a
- input.border#00ffff
- input.foreground#ffffff
- input.placeholderForeground#666666
- list.activeSelectionBackground#2a2a2a
- list.activeSelectionForeground#00ffff
- list.hoverBackground#1a1a1a
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#1a1a1a
- list.inactiveSelectionForeground#666666
- menu.background#000000
- menu.foreground#ffffff
- menu.selectionBackground#1a1a1a
- menu.selectionForeground#00ffff
- menubar.selectionBackground#1a1a1a
- menubar.selectionForeground#00ffff
- notification.background#1a1a1a
- notification.border#00ffff
- notification.foreground#ffffff
- panel.background#0a0a0a
- panel.border#1a1a1a
- panelTitle.activeForeground#00ffff
- panelTitle.inactiveForeground#666666
- peekView.border#00ffff
- peekViewEditor.background#000000
- peekViewResult.background#000000
- peekViewTitle.background#000000
- peekViewTitleDescription.foreground#666666
- peekViewTitleLabel.foreground#00ffff
- pickerGroup.background#000000
- pickerGroup.border#1a1a1a
- pickerGroup.foreground#00ffff
- progressBar.background#00ffff
- quickInput.background#000000
- quickInput.foreground#ffffff
- quickInputList.focusBackground#1a1a1a
- quickInputList.focusForeground#00ffff
- scrollbarSlider.activeBackground#ff00ff
- scrollbarSlider.background#2a2a2a
- scrollbarSlider.hoverBackground#00ffff
- sideBar.background#0a0a0a
- sideBar.foreground#e0e0e0
- sideBarSectionHeader.background#1a1a1a
- sideBarSectionHeader.foreground#ff00ff
- sideBarTitle.foreground#00ffff
- statusBar.background#1a1a1a
- statusBar.debuggingBackground#ff00ff
- statusBar.debuggingForeground#000000
- statusBar.foreground#00ffff
- tab.activeBackground#000000
- tab.activeForeground#00ffff
- tab.border#1a1a1a
- tab.inactiveBackground#000000
- tab.inactiveForeground#666666
- terminal.ansiBlack#000000
- terminal.ansiBlue#0080ff
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#0080ff
- terminal.ansiBrightCyan#00ffff
- terminal.ansiBrightGreen#00ff00
- terminal.ansiBrightMagenta#ff00ff
- terminal.ansiBrightRed#ff0000
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffff00
- terminal.ansiCyan#00ffff
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#ff00ff
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffff00
- terminal.background#000000
- terminal.foreground#00ff00
- textBlockQuote.background#1a1a1a
- textBlockQuote.border#00ffff
- textCodeBlock.background#1a1a1a
- textLink.activeForeground#ff00ff
- textLink.foreground#00ffff
- textPreformat.foreground#00ff00
- textSeparator.foreground#1a1a1a
- titleBar.activeBackground#0a0a0a
- titleBar.activeForeground#00ffff
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#666666
- tree.indentGuidesStroke#1a1a1a
- widget.shadow#00000080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #666666 | italic |
| string, string.quoted | #00ff00 | — |
| keyword, storage.type, storage.modifier | #ff00ff | bold |
| entity.name.function, support.function | #00ffff | — |
| variable, variable.other | #ffffff | — |
| constant.numeric | #ffff00 | — |
| entity.name.class, support.class | #0080ff | bold |
| constant, constant.other | #ff8000 | — |
| keyword.operator | #00ffff | — |
| punctuation | #e0e0e0 | — |
| entity.name.tag | #00ffff | — |
| support.type.property-name.css | #0080ff | — |
| support.constant.property-value.css | #ffff00 | — |
| support.type.property-name.json | #ff00ff | — |
| meta.structure.dictionary.json | #00ff00 | — |
| keyword.control, keyword.operator.logical | #ff00ff | bold |
| support.type.primitive, entity.name.type | #0080ff | italic |
| string.regexp | #ff8000 | — |
| string.template | #00ff00 | — |
| keyword.control.import, keyword.control.export | #ff00ff | bold |