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#110022
- activityBar.border#330066
- activityBar.foreground#bb44ff
- activityBar.inactiveForeground#8844cc
- activityBarBadge.background#ff3366
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#cc66ff
- breadcrumb.background#080011
- breadcrumb.focusForeground#bb44ff
- breadcrumb.foreground#dd88ff
- button.background#bb44ff
- button.foreground#000000
- button.hoverBackground#dd66ff
- button.secondaryBackground#330066
- button.secondaryForeground#cc66ff
- button.secondaryHoverBackground#6600cc
- descriptionForeground#dd88ff
- dropdown.background#220044
- dropdown.border#8844cc
- dropdown.foreground#cc66ff
- editor.background#050008
- editor.findMatchBackground#ff336666
- editor.findMatchHighlightBackground#ff336633
- editor.foreground#cc66ff
- editor.lineHighlightBackground#22004433
- editor.selectionBackground#44008866
- editor.wordHighlightBackground#8844cc33
- editorCursor.foreground#cc66ff
- editorGroup.border#6600cc
- editorGroupHeader.tabsBackground#080011
- editorGroupHeader.tabsBorder#330066
- editorGutter.addedBackground#88ff44
- editorGutter.background#050008
- editorGutter.deletedBackground#ff3366
- editorGutter.modifiedBackground#ff8800
- editorLineNumber.activeForeground#bb44ff
- editorLineNumber.foreground#8844cc
- errorForeground#ff3366
- foreground#cc66ff
- icon.foreground#bb44ff
- input.background#220044
- input.border#8844cc
- input.foreground#cc66ff
- input.placeholderForeground#aa66dd
- inputOption.activeBackground#440088
- inputOption.activeBorder#bb44ff
- list.activeSelectionBackground#440088
- list.activeSelectionForeground#cc66ff
- list.focusBackground#440088
- list.highlightForeground#bb44ff
- list.hoverBackground#220044
- list.inactiveSelectionBackground#220044
- menu.background#220044
- menu.foreground#cc66ff
- menu.selectionBackground#440088
- menu.selectionForeground#cc66ff
- menu.separatorBackground#8844cc
- menubar.selectionBackground#440088
- menubar.selectionForeground#cc66ff
- minimap.background#050008
- minimap.selectionHighlight#44008866
- minimapSlider.activeBackground#8844cc99
- minimapSlider.background#8844cc33
- minimapSlider.hoverBackground#8844cc66
- notificationCenter.border#6600cc
- notificationCenterHeader.background#6600cc
- notificationCenterHeader.foreground#cc66ff
- notifications.background#220044
- notifications.border#8844cc
- notifications.foreground#cc66ff
- panel.background#080011
- panel.border#6600cc
- panelTitle.activeBorder#cc66ff
- panelTitle.activeForeground#bb44ff
- panelTitle.inactiveForeground#8844cc
- scrollbar.shadow#000000aa
- scrollbarSlider.activeBackground#8844cc99
- scrollbarSlider.background#8844cc33
- scrollbarSlider.hoverBackground#8844cc66
- sideBar.background#080011
- sideBar.border#330066
- sideBar.foreground#dd88ff
- sideBarSectionHeader.background#330066
- sideBarSectionHeader.border#6600cc
- sideBarSectionHeader.foreground#cc66ff
- sideBarTitle.foreground#bb44ff
- statusBar.background#110022
- statusBar.border#330066
- statusBar.foreground#dd88ff
- statusBarItem.activeBackground#440088
- statusBarItem.hoverBackground#6600cc
- tab.activeBackground#330066
- tab.activeBorder#bb44ff
- tab.activeBorderTop#cc66ff
- tab.activeForeground#cc66ff
- tab.border#6600cc
- tab.inactiveBackground#080011
- tab.inactiveForeground#8844cc
- terminal.ansiBlack#000000
- terminal.ansiBlue#4488ff
- terminal.ansiBrightBlack#8844cc
- terminal.ansiBrightBlue#66aaff
- terminal.ansiBrightCyan#66ffee
- terminal.ansiBrightGreen#aeff66
- terminal.ansiBrightMagenta#ee88ff
- terminal.ansiBrightRed#ff6688
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffaa44
- terminal.ansiCyan#44ffcc
- terminal.ansiGreen#88ff44
- terminal.ansiMagenta#cc66ff
- terminal.ansiRed#ff3366
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ff8800
- terminal.background#050008
- terminal.foreground#cc66ff
- titleBar.activeBackground#110022
- titleBar.activeForeground#cc66ff
- titleBar.border#330066
- titleBar.inactiveBackground#080011
- titleBar.inactiveForeground#8844cc
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6644aa | italic |
| string, string.quoted, string.template | #88ff44 | — |
| constant.numeric | #ff8800 | — |
| keyword, storage.type, storage.modifier | #bb44ff | bold |
| entity.name.function, meta.function-call.generic, support.function | #dd88ff | — |
| entity.name.class, entity.name.type, support.type, support.class | #4488ff | — |
| variable, meta.definition.variable | #ccaaff | — |
| variable.other.property, support.variable.property | #aa88ee | — |
| constant, variable.other.constant | #ffaa44 | — |
| keyword.control.import, keyword.control.from, keyword.control.export | #bb44ff | italic |
| keyword.operator | #dd88ff | — |
| punctuation | #dd88ff | — |
| entity.name.tag | #bb44ff | — |
| entity.other.attribute-name | #dd88ff | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #4488ff | — |
| support.type.property-name.css | #dd88ff | — |
| support.type.property-name.json | #dd88ff | — |
| markup.heading | #bb44ff | bold |
| markup.bold | #ff8800 | bold |
| markup.italic | #4488ff | italic |
| markup.inline.raw, markup.fenced_code | #88ff44 | — |
| markup.underline.link | #cc66ff | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...