Chroma Library

Color themes

• 

  Midnight Purple

• 

  Neon Cyber

• 

  Neon Synthwave

• 

  Plasma Pink

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#050508
• activityBar.border#1a1a2e
• activityBar.foreground#8080ff
• activityBar.inactiveForeground#404080
• activityBarBadge.background#ff00ff
• activityBarBadge.foreground#000000
• button.background#ff00ff
• button.foreground#000000
• button.hoverBackground#ff40ff
• descriptionForeground#c0c0ff
• dropdown.background#1a1a2e
• dropdown.border#333366
• dropdown.foreground#e0e0ff
• editor.background#0a0a0f
• editor.findMatchBackground#ff00ff60
• editor.findMatchHighlightBackground#ff00ff30
• editor.foreground#e0e0ff
• editor.lineHighlightBackground#1a1a2e
• editor.selectionBackground#ff00ff40
• editor.selectionHighlightBackground#ff00ff20
• editorCursor.foreground#00ffff
• editorGroupHeader.tabsBackground#0f0f1a
• editorGroupHeader.tabsBorder#333366
• editorIndentGuide.activeBackground#666699
• editorIndentGuide.background#333366
• editorLineNumber.activeForeground#00ffff
• editorLineNumber.foreground#666699
• editorWhitespace.foreground#333366
• errorForeground#ff4040
• focusBorder#ff00ff
• foreground#e0e0ff
• icon.foreground#8080ff
• input.background#1a1a2e
• input.border#333366
• input.foreground#e0e0ff
• input.placeholderForeground#666699
• list.activeSelectionBackground#ff00ff40
• list.activeSelectionForeground#ffffff
• list.hoverBackground#1a1a2e
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#333366
• list.inactiveSelectionForeground#e0e0ff
• menu.background#1a1a2e
• menu.foreground#e0e0ff
• menu.selectionBackground#ff00ff40
• menu.selectionForeground#ffffff
• menu.separatorBackground#333366
• menubar.selectionBackground#ff00ff40
• menubar.selectionForeground#ffffff
• notificationCenter.border#333366
• notificationCenterHeader.background#1a1a2e
• notifications.background#1a1a2e
• notifications.border#333366
• notifications.foreground#e0e0ff
• notificationToast.border#333366
• panel.background#0f0f1a
• panel.border#333366
• panelTitle.activeBorder#ff00ff
• panelTitle.activeForeground#ff00ff
• panelTitle.inactiveForeground#8080ff
• selection.background#ff00ff40
• sideBar.background#0f0f1a
• sideBar.border#333366
• sideBar.foreground#c0c0ff
• sideBarSectionHeader.background#1a1a2e
• sideBarSectionHeader.foreground#00ffff
• sideBarTitle.foreground#ff00ff
• statusBar.background#1a0a1a
• statusBar.border#333366
• statusBar.debuggingBackground#ff0080
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#ff80ff
• statusBar.noFolderBackground#0a0a0f
• tab.activeBackground#1a1a2e
• tab.activeBorder#ff00ff
• tab.activeForeground#ff00ff
• tab.border#333366
• tab.inactiveBackground#0f0f1a
• tab.inactiveForeground#8080ff
• terminal.ansiBlack#000000
• terminal.ansiBlue#0080ff
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#4080ff
• terminal.ansiBrightCyan#40ffff
• terminal.ansiBrightGreen#40ff80
• terminal.ansiBrightMagenta#ff40ff
• terminal.ansiBrightRed#ff4080
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffff40
• terminal.ansiCyan#00ffff
• terminal.ansiGreen#00ff80
• terminal.ansiMagenta#ff00ff
• terminal.ansiRed#ff0080
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#ffff00
• terminal.background#0a0a0f
• terminal.foreground#e0e0ff
• titleBar.activeBackground#0a0a0f
• titleBar.activeForeground#e0e0ff
• titleBar.border#1a1a2e
• titleBar.inactiveBackground#050508
• titleBar.inactiveForeground#8080ff
• tree.indentGuidesStroke#333366

tokenColors

TextMate scopes and font styles (syntax highlighting rules).