Neon Cyberpunk Theme
Publisher: Little WaterfallThemes in package: 7
A cyberpunk theme collection with vibrant neon colors and glow effects for VS Code
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#0a0a14
- activityBar.border#1a1a2e
- activityBar.foreground#00ffff
- activityBar.inactiveForeground#4a4a66
- activityBarBadge.background#ff0080
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ff0080
- breadcrumb.background#0f0f1e
- breadcrumb.focusForeground#00ffff
- breadcrumb.foreground#a0a6cc
- button.background#ff0080
- button.foreground#ffffff
- button.hoverBackground#ff3399
- button.secondaryBackground#2a2a3e
- button.secondaryForeground#e0e6ff
- button.secondaryHoverBackground#3a3a4e
- descriptionForeground#a0a6cc
- dropdown.background#1a1a2e
- dropdown.border#4a4a66
- dropdown.foreground#e0e6ff
- editor.background#0a0a14
- editor.findMatchBackground#ff008066
- editor.findMatchHighlightBackground#ff008033
- editor.foreground#e0e6ff
- editor.lineHighlightBackground#1a1a2e33
- editor.selectionBackground#2a1a4a66
- editor.wordHighlightBackground#4a4a6633
- editorCursor.foreground#00ffff
- editorGroup.border#2a2a3e
- editorGroupHeader.tabsBackground#0f0f1e
- editorGroupHeader.tabsBorder#1a1a2e
- editorGutter.addedBackground#00ff80
- editorGutter.background#0a0a14
- editorGutter.deletedBackground#ff3366
- editorGutter.modifiedBackground#ffaa00
- editorLineNumber.activeForeground#00ffff
- editorLineNumber.foreground#4a4a66
- errorForeground#ff3366
- foreground#e0e6ff
- icon.foreground#00ffff
- input.background#1a1a2e
- input.border#4a4a66
- input.foreground#e0e6ff
- input.placeholderForeground#6a6a80
- inputOption.activeBackground#2a1a4a
- inputOption.activeBorder#00ffff
- list.activeSelectionBackground#2a1a4a
- list.activeSelectionForeground#00ffff
- list.focusBackground#2a1a4a
- list.highlightForeground#ff0080
- list.hoverBackground#1a1a2e
- list.inactiveSelectionBackground#1a1a2e
- menu.background#1a1a2e
- menu.foreground#e0e6ff
- menu.selectionBackground#2a1a4a
- menu.selectionForeground#00ffff
- menu.separatorBackground#4a4a66
- menubar.selectionBackground#2a1a4a
- menubar.selectionForeground#00ffff
- minimap.background#0a0a14
- minimap.selectionHighlight#2a1a4a66
- minimapSlider.activeBackground#4a4a6699
- minimapSlider.background#4a4a6633
- minimapSlider.hoverBackground#4a4a6666
- notificationCenter.border#2a2a3e
- notificationCenterHeader.background#2a2a3e
- notificationCenterHeader.foreground#00ffff
- notifications.background#1a1a2e
- notifications.border#4a4a66
- notifications.foreground#e0e6ff
- panel.background#0f0f1e
- panel.border#2a2a3e
- panelTitle.activeBorder#00ffff
- panelTitle.activeForeground#00ffff
- panelTitle.inactiveForeground#6a6a80
- scrollbar.shadow#000000aa
- scrollbarSlider.activeBackground#4a4a6699
- scrollbarSlider.background#4a4a6633
- scrollbarSlider.hoverBackground#4a4a6666
- sideBar.background#0f0f1e
- sideBar.border#1a1a2e
- sideBar.foreground#c4c9e0
- sideBarSectionHeader.background#1a1a2e
- sideBarSectionHeader.border#2a2a3e
- sideBarSectionHeader.foreground#ff0080
- sideBarTitle.foreground#00ffff
- statusBar.background#0a0a14
- statusBar.border#1a1a2e
- statusBar.foreground#a0a6cc
- statusBarItem.activeBackground#2a1a4a
- statusBarItem.hoverBackground#2a2a3e
- tab.activeBackground#1a1a2e
- tab.activeBorder#00ffff
- tab.activeBorderTop#ff0080
- tab.activeForeground#00ffff
- tab.border#2a2a3e
- tab.inactiveBackground#0f0f1e
- tab.inactiveForeground#6a6a80
- terminal.ansiBlack#1a1a2e
- terminal.ansiBlue#3366ff
- terminal.ansiBrightBlack#4a4a66
- terminal.ansiBrightBlue#6699ff
- terminal.ansiBrightCyan#66ffff
- terminal.ansiBrightGreen#66ffaa
- terminal.ansiBrightMagenta#ff66aa
- terminal.ansiBrightRed#ff6699
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffcc66
- terminal.ansiCyan#00ffff
- terminal.ansiGreen#00ff80
- terminal.ansiMagenta#ff0080
- terminal.ansiRed#ff3366
- terminal.ansiWhite#e0e6ff
- terminal.ansiYellow#ffaa00
- terminal.background#0a0a14
- terminal.foreground#e0e6ff
- titleBar.activeBackground#0a0a14
- titleBar.activeForeground#e0e6ff
- titleBar.border#1a1a2e
- titleBar.inactiveBackground#0f0f1e
- titleBar.inactiveForeground#6a6a80
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6a6a80 | italic |
| string, string.quoted, string.template | #00ff80 | — |
| constant.numeric | #ffaa00 | — |
| keyword, storage.type, storage.modifier | #ff0080 | bold |
| entity.name.function, meta.function-call.generic, support.function | #00ffff | — |
| entity.name.class, entity.name.type, support.type, support.class | #3366ff | — |
| variable, meta.definition.variable | #e0e6ff | — |
| variable.other.property, support.variable.property | #ff6699 | — |
| constant, variable.other.constant | #ffcc66 | — |
| keyword.control.import, keyword.control.from, keyword.control.export | #ff0080 | italic |
| keyword.operator | #ff3366 | — |
| punctuation | #a0a6cc | — |
| entity.name.tag | #ff0080 | — |
| entity.other.attribute-name | #00ffff | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #3366ff | — |
| support.type.property-name.css | #00ffff | — |
| support.type.property-name.json | #00ffff | — |
| markup.heading | #ff0080 | bold |
| markup.bold | #ffaa00 | bold |
| markup.italic | #ff6699 | italic |
| markup.inline.raw, markup.fenced_code | #00ff80 | — |
| markup.underline.link | #00ffff | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...