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#1a0f00
- activityBar.border#332200
- activityBar.foreground#ff6600
- activityBar.inactiveForeground#cc6600
- activityBarBadge.background#ff4444
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ffaa00
- breadcrumb.background#0f0800
- breadcrumb.focusForeground#ff6600
- breadcrumb.foreground#ffcc66
- button.background#ff6600
- button.foreground#000000
- button.hoverBackground#ff8844
- button.secondaryBackground#332200
- button.secondaryForeground#ffaa00
- button.secondaryHoverBackground#664400
- descriptionForeground#ffcc66
- dropdown.background#331100
- dropdown.border#cc6600
- dropdown.foreground#ffaa00
- editor.background#0a0500
- editor.findMatchBackground#ff444466
- editor.findMatchHighlightBackground#ff444433
- editor.foreground#ffaa00
- editor.lineHighlightBackground#33110033
- editor.selectionBackground#66330066
- editor.wordHighlightBackground#cc660033
- editorCursor.foreground#ffaa00
- editorGroup.border#664400
- editorGroupHeader.tabsBackground#0f0800
- editorGroupHeader.tabsBorder#332200
- editorGutter.addedBackground#88ff00
- editorGutter.background#0a0500
- editorGutter.deletedBackground#ff4444
- editorGutter.modifiedBackground#ffdd00
- editorLineNumber.activeForeground#ff6600
- editorLineNumber.foreground#cc6600
- errorForeground#ff4444
- foreground#ffaa00
- icon.foreground#ff6600
- input.background#331100
- input.border#cc6600
- input.foreground#ffaa00
- input.placeholderForeground#996600
- inputOption.activeBackground#663300
- inputOption.activeBorder#ff6600
- list.activeSelectionBackground#663300
- list.activeSelectionForeground#ffaa00
- list.focusBackground#663300
- list.highlightForeground#ff6600
- list.hoverBackground#331100
- list.inactiveSelectionBackground#331100
- menu.background#331100
- menu.foreground#ffaa00
- menu.selectionBackground#663300
- menu.selectionForeground#ffaa00
- menu.separatorBackground#cc6600
- menubar.selectionBackground#663300
- menubar.selectionForeground#ffaa00
- minimap.background#0a0500
- minimap.selectionHighlight#66330066
- minimapSlider.activeBackground#cc660099
- minimapSlider.background#cc660033
- minimapSlider.hoverBackground#cc660066
- notificationCenter.border#664400
- notificationCenterHeader.background#664400
- notificationCenterHeader.foreground#ffaa00
- notifications.background#331100
- notifications.border#cc6600
- notifications.foreground#ffaa00
- panel.background#0f0800
- panel.border#664400
- panelTitle.activeBorder#ffaa00
- panelTitle.activeForeground#ff6600
- panelTitle.inactiveForeground#cc6600
- scrollbar.shadow#000000aa
- scrollbarSlider.activeBackground#cc660099
- scrollbarSlider.background#cc660033
- scrollbarSlider.hoverBackground#cc660066
- sideBar.background#0f0800
- sideBar.border#332200
- sideBar.foreground#ffcc66
- sideBarSectionHeader.background#332200
- sideBarSectionHeader.border#664400
- sideBarSectionHeader.foreground#ffaa00
- sideBarTitle.foreground#ff6600
- statusBar.background#1a0f00
- statusBar.border#332200
- statusBar.foreground#ffcc66
- statusBarItem.activeBackground#663300
- statusBarItem.hoverBackground#664400
- tab.activeBackground#332200
- tab.activeBorder#ff6600
- tab.activeBorderTop#ffaa00
- tab.activeForeground#ffaa00
- tab.border#664400
- tab.inactiveBackground#0f0800
- tab.inactiveForeground#cc6600
- terminal.ansiBlack#000000
- terminal.ansiBlue#4488ff
- terminal.ansiBrightBlack#cc6600
- terminal.ansiBrightBlue#66aaff
- terminal.ansiBrightCyan#66ffff
- terminal.ansiBrightGreen#aaff44
- terminal.ansiBrightMagenta#ffaa66
- terminal.ansiBrightRed#ff6666
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffee44
- terminal.ansiCyan#44ffff
- terminal.ansiGreen#88ff00
- terminal.ansiMagenta#ff8844
- terminal.ansiRed#ff4444
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffdd00
- terminal.background#0a0500
- terminal.foreground#ffaa00
- titleBar.activeBackground#1a0f00
- titleBar.activeForeground#ffaa00
- titleBar.border#332200
- titleBar.inactiveBackground#0f0800
- titleBar.inactiveForeground#cc6600
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #996600 | italic |
| string, string.quoted, string.template | #88ff00 | — |
| constant.numeric | #ffdd00 | — |
| keyword, storage.type, storage.modifier | #ff6600 | bold |
| entity.name.function, meta.function-call.generic, support.function | #ffcc66 | — |
| entity.name.class, entity.name.type, support.type, support.class | #ff8844 | — |
| variable, meta.definition.variable | #ffcc99 | — |
| variable.other.property, support.variable.property | #ffaa66 | — |
| constant, variable.other.constant | #ffee44 | — |
| keyword.control.import, keyword.control.from, keyword.control.export | #ff6600 | italic |
| keyword.operator | #ffcc66 | — |
| punctuation | #ffcc66 | — |
| entity.name.tag | #ff6600 | — |
| entity.other.attribute-name | #ffcc66 | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #ff8844 | — |
| support.type.property-name.css | #ffcc66 | — |
| support.type.property-name.json | #ffcc66 | — |
| markup.heading | #ff6600 | bold |
| markup.bold | #ffdd00 | bold |
| markup.italic | #ff8844 | italic |
| markup.inline.raw, markup.fenced_code | #88ff00 | — |
| markup.underline.link | #ffaa00 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...