Mystic Dark Collection

Color themes

• 

  Mystic Dark - Cosmic Purple

• 

  Mystic Dark - Deep Ocean

• 

  Mystic Dark - Forest Green

• 

  Mystic Dark - Neon Noir

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#0a0f1a
• activityBar.foreground#4fc3f7
• activityBar.inactiveForeground#2e3a4a
• activityBarBadge.background#8e24aa
• activityBarBadge.foreground#ffffff
• button.background#4fc3f7
• button.foreground#0a0f1a
• button.hoverBackground#81d4fa
• debugToolBar.background#0a0f1a
• debugToolBar.border#1a2332
• diffEditor.insertedTextBackground#1b3a1b
• diffEditor.removedTextBackground#3a1b1b
• dropdown.background#1a2332
• dropdown.border#2e3a4a
• dropdown.foreground#e8f5e8
• editor.background#0a0f1a
• editor.foreground#e8f5e8
• editor.inactiveSelectionBackground#1a2332
• editor.lineHighlightBackground#1a2332
• editor.selectionBackground#2e3a4a
• editorCursor.foreground#81d4fa
• editorGroupHeader.noTabsBackground#0a0f1a
• editorGroupHeader.tabsBackground#0a0f1a
• editorGroupHeader.tabsBorder#1a2332
• editorHoverWidget.background#0a0f1a
• editorHoverWidget.border#1a2332
• editorIndentGuide.activeBackground#2e3a4a
• editorIndentGuide.background#1a2332
• editorSuggestWidget.background#0a0f1a
• editorSuggestWidget.border#1a2332
• editorSuggestWidget.highlightForeground#4fc3f7
• editorSuggestWidget.selectedBackground#1a2332
• editorWhitespace.foreground#2e3a4a
• editorWidget.background#0a0f1a
• editorWidget.border#1a2332
• input.background#1a2332
• input.border#2e3a4a
• input.foreground#e8f5e8
• input.placeholderForeground#4a5d7a
• list.activeSelectionBackground#2e3a4a
• list.activeSelectionForeground#81d4fa
• list.hoverBackground#1a2332
• list.hoverForeground#b3e5fc
• list.inactiveSelectionBackground#1a2332
• list.inactiveSelectionForeground#2e3a4a
• menu.background#0a0f1a
• menu.foreground#e8f5e8
• menu.selectionBackground#1a2332
• menu.selectionForeground#4fc3f7
• menubar.selectionBackground#1a2332
• menubar.selectionForeground#4fc3f7
• notification.background#1a2332
• notification.border#2e3a4a
• notification.foreground#e8f5e8
• panel.background#0d141f
• panel.border#1a2332
• panelTitle.activeForeground#81d4fa
• panelTitle.inactiveForeground#2e3a4a
• peekView.border#4fc3f7
• peekViewEditor.background#0a0f1a
• peekViewResult.background#0a0f1a
• peekViewTitle.background#0a0f1a
• peekViewTitleDescription.foreground#2e3a4a
• peekViewTitleLabel.foreground#4fc3f7
• pickerGroup.background#0a0f1a
• pickerGroup.border#1a2332
• pickerGroup.foreground#4fc3f7
• progressBar.background#4fc3f7
• quickInput.background#0a0f1a
• quickInput.foreground#e8f5e8
• quickInputList.focusBackground#1a2332
• quickInputList.focusForeground#4fc3f7
• scrollbarSlider.activeBackground#4fc3f7
• scrollbarSlider.background#2e3a4a
• scrollbarSlider.hoverBackground#4a5d7a
• sideBar.background#0d141f
• sideBar.foreground#b3e5fc
• sideBarSectionHeader.background#1a2332
• sideBarSectionHeader.foreground#81d4fa
• sideBarTitle.foreground#4fc3f7
• statusBar.background#1a2332
• statusBar.debuggingBackground#8e24aa
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#b3e5fc
• tab.activeBackground#1a2332
• tab.activeForeground#81d4fa
• tab.border#1a2332
• tab.inactiveBackground#0d141f
• tab.inactiveForeground#2e3a4a
• terminal.ansiBlack#0a0f1a
• terminal.ansiBlue#4fc3f7
• terminal.ansiBrightBlack#2e3a4a
• terminal.ansiBrightBlue#81d4fa
• terminal.ansiBrightCyan#b3e5fc
• terminal.ansiBrightGreen#a5d6a7
• terminal.ansiBrightMagenta#ba68c8
• terminal.ansiBrightRed#ef5350
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffd54f
• terminal.ansiCyan#81d4fa
• terminal.ansiGreen#8bc34a
• terminal.ansiMagenta#8e24aa
• terminal.ansiRed#f44336
• terminal.ansiWhite#e8f5e8
• terminal.ansiYellow#ffc107
• terminal.background#0a0f1a
• terminal.foreground#e8f5e8
• textBlockQuote.background#1a2332
• textBlockQuote.border#2e3a4a
• textCodeBlock.background#1a2332
• textLink.activeForeground#81d4fa
• textLink.foreground#4fc3f7
• textPreformat.foreground#81d4fa
• textSeparator.foreground#2e3a4a
• titleBar.activeBackground#0d141f
• titleBar.activeForeground#b3e5fc
• titleBar.inactiveBackground#0a0f1a
• titleBar.inactiveForeground#2e3a4a
• tree.indentGuidesStroke#1a2332
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).