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#000010
- activityBar.border#102030
- activityBar.foreground#00ff40
- activityBar.inactiveForeground#404060
- activityBarBadge.background#ff0040
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ff0040
- breadcrumb.background#050515
- breadcrumb.focusForeground#00ff40
- breadcrumb.foreground#b0b0cc
- button.background#ff0040
- button.foreground#ffffff
- button.hoverBackground#ff2060
- button.secondaryBackground#203040
- button.secondaryForeground#f0f0ff
- button.secondaryHoverBackground#304050
- descriptionForeground#b0b0cc
- dropdown.background#102030
- dropdown.border#404060
- dropdown.foreground#f0f0ff
- editor.background#000010
- editor.findMatchBackground#ff004066
- editor.findMatchHighlightBackground#ff004033
- editor.foreground#f0f0ff
- editor.lineHighlightBackground#10203033
- editor.selectionBackground#00402066
- editor.wordHighlightBackground#40406033
- editorCursor.foreground#00ff40
- editorGroup.border#203040
- editorGroupHeader.tabsBackground#050515
- editorGroupHeader.tabsBorder#102030
- editorGutter.addedBackground#00ff40
- editorGutter.background#000010
- editorGutter.deletedBackground#ff0040
- editorGutter.modifiedBackground#ff8000
- editorLineNumber.activeForeground#00ff40
- editorLineNumber.foreground#404060
- errorForeground#ff0040
- foreground#f0f0ff
- icon.foreground#00ff40
- input.background#102030
- input.border#404060
- input.foreground#f0f0ff
- input.placeholderForeground#606080
- inputOption.activeBackground#004020
- inputOption.activeBorder#00ff40
- list.activeSelectionBackground#004020
- list.activeSelectionForeground#00ff40
- list.focusBackground#004020
- list.highlightForeground#ff0040
- list.hoverBackground#102030
- list.inactiveSelectionBackground#102030
- menu.background#102030
- menu.foreground#f0f0ff
- menu.selectionBackground#004020
- menu.selectionForeground#00ff40
- menu.separatorBackground#404060
- menubar.selectionBackground#004020
- menubar.selectionForeground#00ff40
- minimap.background#000010
- minimap.selectionHighlight#00402066
- minimapSlider.activeBackground#40406099
- minimapSlider.background#40406033
- minimapSlider.hoverBackground#40406066
- notificationCenter.border#203040
- notificationCenterHeader.background#203040
- notificationCenterHeader.foreground#00ff40
- notifications.background#102030
- notifications.border#404060
- notifications.foreground#f0f0ff
- panel.background#050515
- panel.border#203040
- panelTitle.activeBorder#00ff40
- panelTitle.activeForeground#00ff40
- panelTitle.inactiveForeground#606080
- scrollbar.shadow#000000aa
- scrollbarSlider.activeBackground#40406099
- scrollbarSlider.background#40406033
- scrollbarSlider.hoverBackground#40406066
- sideBar.background#050515
- sideBar.border#102030
- sideBar.foreground#d0d0e0
- sideBarSectionHeader.background#102030
- sideBarSectionHeader.border#203040
- sideBarSectionHeader.foreground#ff0040
- sideBarTitle.foreground#00ff40
- statusBar.background#000010
- statusBar.border#102030
- statusBar.foreground#b0b0cc
- statusBarItem.activeBackground#004020
- statusBarItem.hoverBackground#203040
- tab.activeBackground#102030
- tab.activeBorder#00ff40
- tab.activeBorderTop#ff0040
- tab.activeForeground#00ff40
- tab.border#203040
- tab.inactiveBackground#050515
- tab.inactiveForeground#606080
- terminal.ansiBlack#102030
- terminal.ansiBlue#0080ff
- terminal.ansiBrightBlack#404060
- terminal.ansiBrightBlue#40a0ff
- terminal.ansiBrightCyan#40ffff
- terminal.ansiBrightGreen#40ff60
- terminal.ansiBrightMagenta#ff40a0
- terminal.ansiBrightRed#ff4060
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffa040
- terminal.ansiCyan#00ffff
- terminal.ansiGreen#00ff40
- terminal.ansiMagenta#ff0080
- terminal.ansiRed#ff0040
- terminal.ansiWhite#f0f0ff
- terminal.ansiYellow#ff8000
- terminal.background#000010
- terminal.foreground#f0f0ff
- titleBar.activeBackground#000010
- titleBar.activeForeground#f0f0ff
- titleBar.border#102030
- titleBar.inactiveBackground#050515
- titleBar.inactiveForeground#606080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #606080 | italic |
| string, string.quoted, string.template | #00ff40 | — |
| constant.numeric | #ff8000 | — |
| keyword, storage.type, storage.modifier | #ff0040 | bold |
| entity.name.function, meta.function-call.generic, support.function | #00ffff | — |
| entity.name.class, entity.name.type, support.type, support.class | #0080ff | — |
| variable, meta.definition.variable | #f0f0ff | — |
| variable.other.property, support.variable.property | #ff4080 | — |
| constant, variable.other.constant | #ffa040 | — |
| keyword.control.import, keyword.control.from, keyword.control.export | #ff0040 | italic |
| keyword.operator | #ff2060 | — |
| punctuation | #b0b0cc | — |
| entity.name.tag | #ff0040 | — |
| entity.other.attribute-name | #00ffff | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #0080ff | — |
| support.type.property-name.css | #00ffff | — |
| support.type.property-name.json | #00ffff | — |
| markup.heading | #ff0040 | bold |
| markup.bold | #ff8000 | bold |
| markup.italic | #ff4080 | italic |
| markup.inline.raw, markup.fenced_code | #00ff40 | — |
| markup.underline.link | #00ffff | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...