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#0f0f1a
- activityBar.foreground#dda0dd
- activityBar.inactiveForeground#ba68c8
- activityBarBadge.background#e91e63
- activityBarBadge.foreground#ffffff
- button.background#6a5acd
- button.foreground#0f0f1a
- button.hoverBackground#9370db
- debugToolBar.background#0f0f1a
- debugToolBar.border#2e2e4a
- diffEditor.insertedTextBackground#2d3a2d
- diffEditor.removedTextBackground#3a2d2d
- dropdown.background#0f0f1a
- dropdown.border#6a5acd
- dropdown.foreground#e6e6fa
- editor.background#0f0f1a
- editor.foreground#e6e6fa
- editor.inactiveSelectionBackground#0f0f1a
- editor.lineHighlightBackground#0f0f1a
- editor.selectionBackground#483d8b
- editorCursor.foreground#dda0dd
- editorGroupHeader.noTabsBackground#0f0f1a
- editorGroupHeader.tabsBackground#0f0f1a
- editorGroupHeader.tabsBorder#2e2e4a
- editorHoverWidget.background#0f0f1a
- editorHoverWidget.border#2e2e4a
- editorIndentGuide.activeBackground#ba68c8
- editorIndentGuide.background#0f0f1a
- editorSuggestWidget.background#0f0f1a
- editorSuggestWidget.border#2e2e4a
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#483d8b
- editorWhitespace.foreground#2e2e4a
- editorWidget.background#0f0f1a
- editorWidget.border#2e2e4a
- input.background#0f0f1a
- input.border#6a5acd
- input.foreground#e6e6fa
- input.placeholderForeground#483d8b
- list.activeSelectionBackground#483d8b
- list.activeSelectionForeground#ffffff
- list.hoverBackground#2e2e4a
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#0f0f1a
- list.inactiveSelectionForeground#ba68c8
- menu.background#0f0f1a
- menu.foreground#e6e6fa
- menu.selectionBackground#483d8b
- menu.selectionForeground#ffffff
- menubar.selectionBackground#483d8b
- menubar.selectionForeground#ffffff
- notification.background#0f0f1a
- notification.border#dda0dd
- notification.foreground#e6e6fa
- panel.background#0f0f1a
- panel.border#2e2e4a
- panelTitle.activeForeground#dda0dd
- panelTitle.inactiveForeground#ba68c8
- peekView.border#6a5acd
- peekViewEditor.background#0f0f1a
- peekViewResult.background#0f0f1a
- peekViewTitle.background#0f0f1a
- peekViewTitleDescription.foreground#483d8b
- peekViewTitleLabel.foreground#6a5acd
- pickerGroup.background#0f0f1a
- pickerGroup.border#2e2e4a
- pickerGroup.foreground#6a5acd
- progressBar.background#e91e63
- quickInput.background#0f0f1a
- quickInput.foreground#e6e6fa
- quickInputList.focusBackground#483d8b
- quickInputList.focusForeground#ffffff
- scrollbarSlider.activeBackground#9370db
- scrollbarSlider.background#483d8b
- scrollbarSlider.hoverBackground#6a5acd
- sideBar.background#0f0f1a
- sideBar.foreground#e6e6fa
- sideBarSectionHeader.background#0f0f1a
- sideBarSectionHeader.foreground#e91e63
- sideBarTitle.foreground#dda0dd
- statusBar.background#0f0f1a
- statusBar.debuggingBackground#e91e63
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#e6e6fa
- tab.activeBackground#0f0f1a
- tab.activeForeground#dda0dd
- tab.border#2e2e4a
- tab.hoverBackground#0f0f1a
- tab.hoverForeground#dda0dd
- tab.inactiveBackground#0f0f1a
- tab.inactiveForeground#ba68c8
- tab.unfocusedActiveBackground#0f0f1a
- tab.unfocusedActiveForeground#ba68c8
- tab.unfocusedHoverBackground#0f0f1a
- tab.unfocusedHoverForeground#ba68c8
- tab.unfocusedInactiveBackground#0f0f1a
- tab.unfocusedInactiveForeground#ba68c8
- terminal.ansiBlack#0f0f1a
- terminal.ansiBlue#6a5acd
- terminal.ansiBrightBlack#483d8b
- terminal.ansiBrightBlue#8a7bcd
- terminal.ansiBrightCyan#a57edb
- terminal.ansiBrightGreen#32cd32
- terminal.ansiBrightMagenta#9932cc
- terminal.ansiBrightRed#ff6b6b
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#a57edb
- terminal.ansiCyan#9370db
- terminal.ansiGreen#228b22
- terminal.ansiMagenta#8b008b
- terminal.ansiRed#dc143c
- terminal.ansiWhite#e6e6fa
- terminal.ansiYellow#9370db
- terminal.background#0f0f1a
- terminal.foreground#e6e6fa
- textBlockQuote.background#0f0f1a
- textBlockQuote.border#6a5acd
- textCodeBlock.background#0f0f1a
- textLink.activeForeground#9370db
- textLink.foreground#6a5acd
- textPreformat.foreground#9370db
- textSeparator.foreground#2e2e4a
- titleBar.activeBackground#0f0f1a
- titleBar.activeForeground#e6e6fa
- titleBar.inactiveBackground#0f0f1a
- titleBar.inactiveForeground#483d8b
- tree.indentGuidesStroke#0f0f1a
- widget.shadow#00000040
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8b7355 | italic |
| string, string.quoted | #f4e4bc | — |
| keyword, storage.type, storage.modifier | #8b0000 | bold |
| entity.name.function, support.function | #d4af37 | — |
| variable, variable.other | #dda0dd | — |
| constant.numeric | #ffd700 | — |
| entity.name.class, support.class | #4169e1 | bold |
| constant, constant.other | #ff8c00 | — |
| keyword.operator | #d4af37 | — |
| punctuation | #f4e4bc | — |
| entity.name.tag | #d4af37 | — |
| support.type.property-name.css | #4169e1 | — |
| support.constant.property-value.css | #ffd700 | — |
| support.type.property-name.json | #8b0000 | — |
| meta.structure.dictionary.json | #f4e4bc | — |
| keyword.control, keyword.operator.logical | #8b0000 | bold |
| support.type.primitive, entity.name.type | #4169e1 | italic |
| string.regexp | #ff8c00 | — |
| string.template | #f4e4bc | — |
| keyword.control.import, keyword.control.export | #8b0000 | bold |
| meta.decorator | #d4af37 | italic |
| entity.name.interface | #4169e1 | bold italic |
| entity.name.enum | #8b008b | bold |
| entity.name.namespace | #228b22 | italic |