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.activeBackground#1a0d1a
• activityBar.activeBorder#ff0080
• activityBar.background#000000
• activityBar.border#ff0080
• activityBar.foreground#ff0080
• activityBar.inactiveForeground#663366
• activityBarBadge.background#ff0080
• activityBarBadge.foreground#ffffff
• breadcrumb.activeSelectionForeground#ff0080
• breadcrumb.background#1a0d1a
• breadcrumb.focusForeground#ff80ff
• breadcrumb.foreground#996699
• button.background#ff0080
• button.border#ff0080
• button.foreground#ffffff
• button.hoverBackground#ff40a0
• debugToolBar.background#1a0d1a
• debugToolBar.border#ff0080
• descriptionForeground#996699
• dropdown.background#1a0d1a
• dropdown.border#ff0080
• dropdown.foreground#ff80ff
• dropdown.listBackground#2d1a2d
• editor.background#1a0d1a
• editor.findMatchBackground#ff00ff80
• editor.findMatchHighlightBackground#ff00ff40
• editor.foreground#ff80ff
• editor.lineHighlightBackground#2d1a2d
• editor.selectionBackground#ff00ff60
• editor.selectionHighlightBackground#ff00ff30
• editorCursor.foreground#ff0080
• editorGroupHeader.border#ff0080
• editorGroupHeader.tabsBackground#0d0d1a
• editorGroupHeader.tabsBorder#ff0080
• editorGutter.background#0d0d1a
• editorIndentGuide.activeBackground#ff0080
• editorIndentGuide.background#663366
• editorLineNumber.activeForeground#ff0080
• editorLineNumber.foreground#996699
• editorOverviewRuler.addedForeground#80ff80
• editorOverviewRuler.border#ff0080
• editorOverviewRuler.deletedForeground#ff4040
• editorOverviewRuler.errorForeground#ff4040
• editorOverviewRuler.findMatchForeground#ff0080
• editorOverviewRuler.infoForeground#8080ff
• editorOverviewRuler.modifiedForeground#ff0080
• editorOverviewRuler.rangeHighlightForeground#ff00ff60
• editorOverviewRuler.selectionHighlightForeground#ff00ff60
• editorOverviewRuler.warningForeground#ffff80
• editorOverviewRuler.wordHighlightForeground#ff00ff40
• editorOverviewRuler.wordHighlightStrongForeground#ff00ff60
• editorWhitespace.foreground#663366
• editorWidget.background#1a0d1a
• editorWidget.border#ff0080
• editorWidget.foreground#ff80ff
• errorForeground#ff4040
• extensionButton.prominentBackground#ff0080
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#ff40a0
• focusBorder#ff0080
• foreground#ff80ff
• icon.foreground#ff0080
• input.background#1a0d1a
• input.border#ff0080
• input.foreground#ff80ff
• input.placeholderForeground#996699
• inputOption.activeBackground#ff00ff60
• inputValidation.errorBackground#ff0040
• inputValidation.errorBorder#ff0040
• list.activeSelectionBackground#ff00ff60
• list.activeSelectionForeground#ffffff
• list.focusBackground#ff00ff60
• list.focusForeground#ffffff
• list.hoverBackground#2d1a2d
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#663366
• list.inactiveSelectionForeground#ff80ff
• menu.background#1a0d1a
• menu.border#ff0080
• menu.foreground#ff80ff
• menu.selectionBackground#ff00ff60
• menu.selectionForeground#ffffff
• menu.separatorBackground#ff0080
• menubar.selectionBackground#ff00ff60
• menubar.selectionForeground#ffffff
• merge.border#ff0080
• merge.commonContentBackground#99669920
• merge.commonHeaderBackground#99669940
• merge.currentContentBackground#ff008020
• merge.currentHeaderBackground#ff008040
• merge.incomingContentBackground#8080ff20
• merge.incomingHeaderBackground#8080ff40
• notificationCenter.border#ff0080
• notificationCenterHeader.background#2d1a2d
• notifications.background#1a0d1a
• notifications.border#ff0080
• notifications.foreground#ff80ff
• notificationToast.border#ff0080
• panel.background#0d0d1a
• panel.border#ff0080
• panelInput.border#ff0080
• panelTitle.activeBorder#ff0080
• panelTitle.activeForeground#ff0080
• panelTitle.inactiveForeground#996699
• peekView.border#ff0080
• peekViewEditor.background#1a0d1a
• peekViewEditor.matchHighlightBackground#ff00ff60
• peekViewResult.background#0d0d1a
• peekViewResult.fileForeground#ff80ff
• peekViewResult.lineForeground#996699
• peekViewResult.matchHighlightBackground#ff00ff60
• peekViewResult.selectionBackground#ff00ff60
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#2d1a2d
• peekViewTitleDescription.foreground#996699
• peekViewTitleLabel.foreground#ff0080
• pickerGroup.border#ff0080
• pickerGroup.foreground#ff0080
• progressBar.background#ff0080
• scrollbar.shadow#000000
• scrollbarSlider.activeBackground#ff0080
• scrollbarSlider.background#ff008040
• scrollbarSlider.hoverBackground#ff008060
• selection.background#ff00ff60
• sideBar.background#0d0d1a
• sideBar.border#ff0080
• sideBar.foreground#ff80ff
• sideBarSectionHeader.background#1a0d1a
• sideBarSectionHeader.border#ff0080
• sideBarSectionHeader.foreground#ff80ff
• sideBarTitle.foreground#ff0080
• statusBar.background#000000
• statusBar.border#ff0080
• statusBar.debuggingBackground#ff0080
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#ff80ff
• statusBar.noFolderBackground#000000
• statusBarItem.activeBackground#2d1a2d
• statusBarItem.hoverBackground#1a0d1a
• tab.activeBackground#1a0d1a
• tab.activeBorder#ff0080
• tab.activeBorderTop#ff0080
• tab.activeForeground#ff0080
• tab.border#ff0080
• tab.hoverBackground#2d1a2d
• tab.hoverForeground#ff80ff
• tab.inactiveBackground#0d0d1a
• tab.inactiveForeground#996699
• terminal.ansiBlack#000000
• terminal.ansiBlue#8080ff
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#8080ff
• terminal.ansiBrightCyan#80ffff
• terminal.ansiBrightGreen#ff80ff
• terminal.ansiBrightMagenta#ff40ff
• terminal.ansiBrightRed#ff4080
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffff80
• terminal.ansiCyan#80ffff
• terminal.ansiGreen#ff80ff
• terminal.ansiMagenta#ff00ff
• terminal.ansiRed#ff0080
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#ffff80
• terminal.background#1a0d1a
• terminal.border#ff0080
• terminal.foreground#ff80ff
• titleBar.activeBackground#000000
• titleBar.activeForeground#ff80ff
• titleBar.border#ff0080
• titleBar.inactiveBackground#000000
• titleBar.inactiveForeground#663366
• tree.indentGuidesStroke#ff0080
• widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).