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#001122
- activityBar.border#003366
- activityBar.foreground#00d4ff
- activityBar.inactiveForeground#4a90e2
- activityBarBadge.background#ff6b6b
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#00ffff
- breadcrumb.background#000d1a
- breadcrumb.focusForeground#00d4ff
- breadcrumb.foreground#80e5ff
- button.background#00d4ff
- button.foreground#000000
- button.hoverBackground#66e0ff
- button.secondaryBackground#003366
- button.secondaryForeground#00ffff
- button.secondaryHoverBackground#0066cc
- descriptionForeground#80e5ff
- dropdown.background#002244
- dropdown.border#4a90e2
- dropdown.foreground#00ffff
- editor.background#000510
- editor.findMatchBackground#ff6b6b66
- editor.findMatchHighlightBackground#ff6b6b33
- editor.foreground#00ffff
- editor.lineHighlightBackground#00224433
- editor.selectionBackground#00408066
- editor.wordHighlightBackground#4a90e233
- editorCursor.foreground#00ffff
- editorGroup.border#0066cc
- editorGroupHeader.tabsBackground#000d1a
- editorGroupHeader.tabsBorder#003366
- editorGutter.addedBackground#00ff80
- editorGutter.background#000510
- editorGutter.deletedBackground#ff6b6b
- editorGutter.modifiedBackground#ffa500
- editorLineNumber.activeForeground#00d4ff
- editorLineNumber.foreground#4a90e2
- errorForeground#ff6b6b
- foreground#00ffff
- icon.foreground#00d4ff
- input.background#002244
- input.border#4a90e2
- input.foreground#00ffff
- input.placeholderForeground#6bb3ff
- inputOption.activeBackground#004080
- inputOption.activeBorder#00d4ff
- list.activeSelectionBackground#004080
- list.activeSelectionForeground#00ffff
- list.focusBackground#004080
- list.highlightForeground#00d4ff
- list.hoverBackground#002244
- list.inactiveSelectionBackground#002244
- menu.background#002244
- menu.foreground#00ffff
- menu.selectionBackground#004080
- menu.selectionForeground#00ffff
- menu.separatorBackground#4a90e2
- menubar.selectionBackground#004080
- menubar.selectionForeground#00ffff
- minimap.background#000510
- minimap.selectionHighlight#00408066
- minimapSlider.activeBackground#4a90e299
- minimapSlider.background#4a90e233
- minimapSlider.hoverBackground#4a90e266
- notificationCenter.border#0066cc
- notificationCenterHeader.background#0066cc
- notificationCenterHeader.foreground#00ffff
- notifications.background#002244
- notifications.border#4a90e2
- notifications.foreground#00ffff
- panel.background#000d1a
- panel.border#0066cc
- panelTitle.activeBorder#00ffff
- panelTitle.activeForeground#00d4ff
- panelTitle.inactiveForeground#4a90e2
- scrollbar.shadow#000000aa
- scrollbarSlider.activeBackground#4a90e299
- scrollbarSlider.background#4a90e233
- scrollbarSlider.hoverBackground#4a90e266
- sideBar.background#000d1a
- sideBar.border#003366
- sideBar.foreground#80e5ff
- sideBarSectionHeader.background#003366
- sideBarSectionHeader.border#0066cc
- sideBarSectionHeader.foreground#00ffff
- sideBarTitle.foreground#00d4ff
- statusBar.background#001122
- statusBar.border#003366
- statusBar.foreground#80e5ff
- statusBarItem.activeBackground#004080
- statusBarItem.hoverBackground#0066cc
- tab.activeBackground#003366
- tab.activeBorder#00d4ff
- tab.activeBorderTop#00ffff
- tab.activeForeground#00ffff
- tab.border#0066cc
- tab.inactiveBackground#000d1a
- tab.inactiveForeground#4a90e2
- terminal.ansiBlack#000000
- terminal.ansiBlue#00d4ff
- terminal.ansiBrightBlack#4a90e2
- terminal.ansiBrightBlue#66e0ff
- terminal.ansiBrightCyan#80ffff
- terminal.ansiBrightGreen#80ff9a
- terminal.ansiBrightMagenta#d4b3ff
- terminal.ansiBrightRed#ff8e8e
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffb84d
- terminal.ansiCyan#00ffff
- terminal.ansiGreen#00ff80
- terminal.ansiMagenta#b19cd9
- terminal.ansiRed#ff6b6b
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffa500
- terminal.background#000510
- terminal.foreground#00ffff
- titleBar.activeBackground#001122
- titleBar.activeForeground#00ffff
- titleBar.border#003366
- titleBar.inactiveBackground#000d1a
- titleBar.inactiveForeground#4a90e2
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4a90e2 | italic |
| string, string.quoted, string.template | #00ff80 | — |
| constant.numeric | #ffa500 | — |
| keyword, storage.type, storage.modifier | #00d4ff | bold |
| entity.name.function, meta.function-call.generic, support.function | #80e5ff | — |
| entity.name.class, entity.name.type, support.type, support.class | #b19cd9 | — |
| variable, meta.definition.variable | #80ffff | — |
| variable.other.property, support.variable.property | #66e0ff | — |
| constant, variable.other.constant | #ffb84d | — |
| keyword.control.import, keyword.control.from, keyword.control.export | #00d4ff | italic |
| keyword.operator | #80e5ff | — |
| punctuation | #80e5ff | — |
| entity.name.tag | #00d4ff | — |
| entity.other.attribute-name | #80e5ff | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #b19cd9 | — |
| support.type.property-name.css | #80e5ff | — |
| support.type.property-name.json | #80e5ff | — |
| markup.heading | #00d4ff | bold |
| markup.bold | #ffa500 | bold |
| markup.italic | #b19cd9 | 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...