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#0a1a2a
- activityBar.foreground#40e0d0
- activityBar.inactiveForeground#2d5a6b
- activityBarBadge.background#ff6b6b
- activityBarBadge.foreground#ffffff
- button.background#40e0d0
- button.foreground#0a1a2a
- button.hoverBackground#48d1cc
- debugToolBar.background#0a1a2a
- debugToolBar.border#1a2f3f
- diffEditor.insertedTextBackground#1a3f2a
- diffEditor.removedTextBackground#3f2a1a
- dropdown.background#1a2f3f
- dropdown.border#40e0d0
- dropdown.foreground#e0f7fa
- editor.background#0a1a2a
- editor.foreground#e0f7fa
- editor.inactiveSelectionBackground#1a2f3f
- editor.lineHighlightBackground#1a2f3f
- editor.selectionBackground#2d5a6b
- editorCursor.foreground#40e0d0
- editorGroupHeader.noTabsBackground#0a1a2a
- editorGroupHeader.tabsBackground#0a1a2a
- editorGroupHeader.tabsBorder#1a2f3f
- editorHoverWidget.background#0a1a2a
- editorHoverWidget.border#1a2f3f
- editorIndentGuide.activeBackground#2d5a6b
- editorIndentGuide.background#1a2f3f
- editorSuggestWidget.background#0a1a2a
- editorSuggestWidget.border#1a2f3f
- editorSuggestWidget.highlightForeground#40e0d0
- editorSuggestWidget.selectedBackground#1a2f3f
- editorWhitespace.foreground#1a2f3f
- editorWidget.background#0a1a2a
- editorWidget.border#1a2f3f
- input.background#1a2f3f
- input.border#40e0d0
- input.foreground#e0f7fa
- input.placeholderForeground#2d5a6b
- list.activeSelectionBackground#2d5a6b
- list.activeSelectionForeground#40e0d0
- list.hoverBackground#1a2f3f
- list.hoverForeground#b8e6e6
- list.inactiveSelectionBackground#1a2f3f
- list.inactiveSelectionForeground#2d5a6b
- menu.background#0a1a2a
- menu.foreground#e0f7fa
- menu.selectionBackground#1a2f3f
- menu.selectionForeground#40e0d0
- menubar.selectionBackground#1a2f3f
- menubar.selectionForeground#40e0d0
- notification.background#1a2f3f
- notification.border#40e0d0
- notification.foreground#e0f7fa
- panel.background#0d2333
- panel.border#1a2f3f
- panelTitle.activeForeground#40e0d0
- panelTitle.inactiveForeground#2d5a6b
- peekView.border#40e0d0
- peekViewEditor.background#0a1a2a
- peekViewResult.background#0a1a2a
- peekViewTitle.background#0a1a2a
- peekViewTitleDescription.foreground#2d5a6b
- peekViewTitleLabel.foreground#40e0d0
- pickerGroup.background#0a1a2a
- pickerGroup.border#1a2f3f
- pickerGroup.foreground#40e0d0
- progressBar.background#40e0d0
- quickInput.background#0a1a2a
- quickInput.foreground#e0f7fa
- quickInputList.focusBackground#1a2f3f
- quickInputList.focusForeground#40e0d0
- scrollbarSlider.activeBackground#48d1cc
- scrollbarSlider.background#2d5a6b
- scrollbarSlider.hoverBackground#40e0d0
- sideBar.background#0d2333
- sideBar.foreground#b8e6e6
- sideBarSectionHeader.background#1a2f3f
- sideBarSectionHeader.foreground#48d1cc
- sideBarTitle.foreground#40e0d0
- statusBar.background#1a2f3f
- statusBar.debuggingBackground#ff6b6b
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#b8e6e6
- tab.activeBackground#0a1a2a
- tab.activeForeground#40e0d0
- tab.border#1a2f3f
- tab.inactiveBackground#0a1a2a
- tab.inactiveForeground#2d5a6b
- terminal.ansiBlack#0a1a2a
- terminal.ansiBlue#4169e1
- terminal.ansiBrightBlack#1a2f3f
- terminal.ansiBrightBlue#6495ed
- terminal.ansiBrightCyan#48d1cc
- terminal.ansiBrightGreen#66d9ef
- terminal.ansiBrightMagenta#ff8a80
- terminal.ansiBrightRed#ff6b6b
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffcc02
- terminal.ansiCyan#40e0d0
- terminal.ansiGreen#48d1cc
- terminal.ansiMagenta#ff6b6b
- terminal.ansiRed#ff4757
- terminal.ansiWhite#e0f7fa
- terminal.ansiYellow#ffa726
- terminal.background#0a1a2a
- terminal.foreground#e0f7fa
- textBlockQuote.background#1a2f3f
- textBlockQuote.border#40e0d0
- textCodeBlock.background#1a2f3f
- textLink.activeForeground#48d1cc
- textLink.foreground#40e0d0
- textPreformat.foreground#48d1cc
- textSeparator.foreground#1a2f3f
- titleBar.activeBackground#0d2333
- titleBar.activeForeground#b8e6e6
- titleBar.inactiveBackground#0a1a2a
- titleBar.inactiveForeground#2d5a6b
- tree.indentGuidesStroke#1a2f3f
- widget.shadow#00000040
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #2d5a6b | italic |
| string, string.quoted | #b8e6e6 | — |
| keyword, storage.type, storage.modifier | #ff6b6b | bold |
| entity.name.function, support.function | #40e0d0 | — |
| variable, variable.other | #e0f7fa | — |
| constant.numeric | #ffa726 | — |
| entity.name.class, support.class | #4169e1 | bold |
| constant, constant.other | #ffcc02 | — |
| keyword.operator | #40e0d0 | — |
| punctuation | #b8e6e6 | — |
| entity.name.tag | #40e0d0 | — |
| support.type.property-name.css | #4169e1 | — |
| support.constant.property-value.css | #ffa726 | — |
| support.type.property-name.json | #ff6b6b | — |
| meta.structure.dictionary.json | #b8e6e6 | — |
| keyword.control, keyword.operator.logical | #ff6b6b | bold |
| support.type.primitive, entity.name.type | #4169e1 | italic |
| string.regexp | #ffcc02 | — |
| string.template | #b8e6e6 | — |
| keyword.control.import, keyword.control.export | #ff6b6b | bold |
| meta.decorator | #40e0d0 | italic |
| entity.name.interface | #4169e1 | bold italic |
| entity.name.enum | #ff8a80 | bold |
| entity.name.namespace | #48d1cc | italic |
| keyword.control.async, keyword.control.await | #ff6b6b | bold |
| support.type.promise, support.function.then | #40e0d0 | italic |
| constant.language.null, constant.language.undefined | #ffcc02 | bold |
| constant.language.boolean | #ffa726 | bold |