Skip to main content
Home Theme VS Code Neonite Theme A vibrant and modern dark theme for VS Code with neon-inspired syntax highlighting and custom icons.
Neonite Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #9D6CFF activityBar.activeFocusBorder #FF9F43 activityBar.background #0A0E14 activityBar.border #1A1E2430 activityBar.foreground #F0F4FC activityBar.inactiveForeground #4A4F5B tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #4A4F5B italic comment.block.documentation, comment.block.documentation entity.name.type #4A4F5BCC italic keyword, keyword.control #FF6E6E bold keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof #FF6E6E —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background
#9D6CFF
activityBarBadge.foreground #0A0E14
breadcrumb.activeSelectionForeground #9D6CFF
breadcrumb.focusForeground #F0F4FC
breadcrumb.foreground #4A4F5B
breadcrumbPicker.background #1A1E24
button.background #9D6CFF
button.foreground #0A0E14
button.hoverBackground #B28CFF
button.secondaryBackground #2D3546
button.secondaryForeground #F0F4FC
button.secondaryHoverBackground #3A3F4E
debugExceptionWidget.background #1A1E24
debugExceptionWidget.border #FF6E6E
debugToolBar.background #1A1E24
debugToolBar.border #2D354640
diffEditor.border #2D354640
diffEditor.insertedTextBackground #76FF8F40
diffEditor.removedTextBackground #FF6E6E40
diffEditorGutter.insertedLineBackground #76FF8F60
diffEditorGutter.removedLineBackground #FF6E6E60
diffEditorOverview.insertedForeground #76FF8F80
diffEditorOverview.removedForeground #FF6E6E80
dropdown.background #1A1E24
dropdown.border #2D354680
dropdown.foreground #F0F4FC
editor.background #0A0E14
editor.findMatchBackground #FF9F4360
editor.findMatchHighlightBackground #FF9F4330
editor.foreground #F0F4FC
editor.hoverHighlightBackground #2D354630
editor.lineHighlightBackground #1A1E2480
editor.lineHighlightBorder #2D354620
editor.rangeHighlightBackground #2D354630
editor.selectionBackground #2D3546AA
editor.selectionHighlightBackground #3A3F4E60
editor.wordHighlightBackground #2D354640
editor.wordHighlightStrongBackground #3A3F4E40
editorBracketHighlight.foreground1 #76FF8F
editorBracketHighlight.foreground2 #FF9F43
editorBracketHighlight.foreground3 #9D6CFF
editorBracketHighlight.foreground4 #FF92DF
editorBracketHighlight.foreground5 #6CF3FF
editorBracketHighlight.foreground6 #FFE68A
editorBracketHighlight.unexpectedBracket.foreground #FF6E6E
editorBracketMatch.background #2D354620
editorBracketMatch.border #9D6CFF
editorCodeLens.foreground #4A4F5BAA
editorCursor.background #0A0E14
editorCursor.foreground #FF9F43
editorGroup.border #1A1E2460
editorGroupHeader.tabsBackground #0A0E14
editorGroupHeader.tabsBorder #1A1E2440
editorGutter.addedBackground #76FF8F80
editorGutter.deletedBackground #FF6E6E80
editorGutter.modifiedBackground #9D6CFF80
editorHoverWidget.background #1A1E24
editorHoverWidget.border #2D354680
editorLineNumber.activeForeground #9D6CFF
editorLineNumber.foreground #4A4F5B
editorMarkerNavigation.background #1A1E24
editorMarkerNavigationError.background #FF6E6E30
editorMarkerNavigationInfo.background #6CF3FF30
editorMarkerNavigationWarning.background #FFE68A30
editorOverviewRuler.commonContentForeground #4A4F5B
editorOverviewRuler.currentContentForeground #76FF8F
editorOverviewRuler.findMatchForeground #FF9F4380
editorOverviewRuler.incomingContentForeground #9D6CFF
editorSuggestWidget.background #1A1E24
editorSuggestWidget.border #2D354680
editorSuggestWidget.foreground #F0F4FC
editorSuggestWidget.highlightForeground #9D6CFF
editorSuggestWidget.selectedBackground #2D354680
editorWidget.background #1A1E24
editorWidget.border #2D354680
editorWidget.foreground #F0F4FC
extensionBadge.remoteBackground #9D6CFF
extensionBadge.remoteForeground #0A0E14
focusBorder #9D6CFF80
foreground #F0F4FC
gitDecoration.conflictingResourceForeground #FFE68A
gitDecoration.deletedResourceForeground #FF6E6E
gitDecoration.ignoredResourceForeground #4A4F5B80
gitDecoration.modifiedResourceForeground #9D6CFF
gitDecoration.submoduleResourceForeground #6CF3FF
gitDecoration.untrackedResourceForeground #76FF8F
input.background #1A1E24
input.border #2D354680
input.foreground #F0F4FC
input.placeholderForeground #4A4F5B
inputOption.activeBackground #2D354640
inputOption.activeBorder #9D6CFF
inputOption.activeForeground #F0F4FC
inputValidation.errorBackground #FF6E6E20
inputValidation.errorBorder #FF6E6E
inputValidation.infoBackground #6CF3FF20
inputValidation.infoBorder #6CF3FF
inputValidation.warningBackground #FFE68A20
inputValidation.warningBorder #FFE68A
list.activeSelectionBackground #2D3546
list.activeSelectionForeground #FF9F43
list.errorForeground #FF6E6E
list.focusBackground #2D354660
list.focusForeground #F0F4FC
list.highlightForeground #9D6CFF
list.hoverBackground #1A1E2430
list.inactiveSelectionBackground #1A1E24
list.inactiveSelectionForeground #F0F4FCEE
list.warningForeground #FFE68A
merge.commonContentBackground #4A4F5B20
merge.commonHeaderBackground #4A4F5B40
merge.currentContentBackground #76FF8F20
merge.currentHeaderBackground #76FF8F40
merge.incomingContentBackground #9D6CFF20
merge.incomingHeaderBackground #9D6CFF40
minimap.errorHighlight #FF6E6E
minimap.findMatchHighlight #FF9F4380
minimap.selectionHighlight #9D6CFF80
minimap.warningHighlight #FFE68A
minimapSlider.activeBackground #3A3F4E60
minimapSlider.background #1A1E2440
minimapSlider.hoverBackground #2D354660
notificationCenter.border #2D354680
notificationCenterHeader.background #1A1E24
notificationCenterHeader.foreground #F0F4FC
notifications.background #1A1E24
notifications.border #2D354680
notifications.foreground #F0F4FC
notificationToast.border #2D354680
panel.background #0A0E14
panel.border #1A1E2460
panelTitle.activeBorder #9D6CFF
panelTitle.activeForeground #F0F4FC
panelTitle.inactiveForeground #4A4F5B
peekView.border #9D6CFF80
peekViewEditor.background #0A0E14
peekViewEditor.matchHighlightBackground #FF9F4340
peekViewResult.background #1A1E24
peekViewResult.fileForeground #F0F4FC
peekViewResult.lineForeground #4A4F5B
peekViewResult.matchHighlightBackground #FF9F4340
peekViewResult.selectionBackground #2D354680
peekViewResult.selectionForeground #F0F4FC
peekViewTitle.background #1A1E24
peekViewTitleDescription.foreground #4A4F5B
peekViewTitleLabel.foreground #9D6CFF
problemsErrorIcon.foreground #FF6E6E
problemsInfoIcon.foreground #6CF3FF
problemsWarningIcon.foreground #FFE68A
progressBar.background #9D6CFF
scrollbar.shadow #0A0E1499
scrollbarSlider.activeBackground #9D6CFF40
scrollbarSlider.background #2D354640
scrollbarSlider.hoverBackground #3A3F4E60
settings.checkboxBackground #1A1E24
settings.checkboxBorder #2D354680
settings.checkboxForeground #F0F4FC
settings.dropdownBackground #1A1E24
settings.dropdownBorder #2D354680
settings.dropdownForeground #F0F4FC
settings.headerForeground #9D6CFF
settings.modifiedItemIndicator #9D6CFF
settings.numberInputBackground #1A1E24
settings.numberInputBorder #2D354680
settings.numberInputForeground #F0F4FC
settings.textInputBackground #1A1E24
settings.textInputBorder #2D354680
settings.textInputForeground #F0F4FC
sideBar.background #0A0E14
sideBar.border #1A1E2440
sideBar.foreground #F0F4FC
sideBarSectionHeader.background #1A1E24
sideBarSectionHeader.border #2D354620
sideBarSectionHeader.foreground #9D6CFF
sideBarTitle.foreground #FF9F43
statusBar.background #1A1E24
statusBar.border #2D354640
statusBar.debuggingBackground #FF9F43
statusBar.debuggingForeground #0A0E14
statusBar.foreground #F0F4FC
statusBar.noFolderBackground #2D3546
statusBarItem.hoverBackground #2D354660
statusBarItem.prominentBackground #FF6E6E
statusBarItem.prominentForeground #0A0E14
statusBarItem.prominentHoverBackground #FF919180
statusBarItem.remoteBackground #9D6CFF
statusBarItem.remoteForeground #0A0E14
symbolIcon.arrayForeground #FF9F43
symbolIcon.booleanForeground #FF6E6E
symbolIcon.classForeground #6CF3FF
symbolIcon.colorForeground #FF92DF
symbolIcon.constantForeground #9D6CFF
symbolIcon.enumeratorForeground #6CF3FF
symbolIcon.enumeratorMemberForeground #76FF8F
symbolIcon.eventForeground #FF6E6E
symbolIcon.fieldForeground #F0F4FC
symbolIcon.fileForeground #4A4F5B
symbolIcon.folderForeground #4A4F5B
symbolIcon.functionForeground #76FF8F
symbolIcon.interfaceForeground #6CF3FF
symbolIcon.keyForeground #FF9F43
symbolIcon.keywordForeground #FF6E6E
symbolIcon.methodForeground #76FF8F
symbolIcon.moduleForeground #FFE68A
symbolIcon.namespaceForeground #6CF3FF
symbolIcon.nullForeground #FF6E6E
symbolIcon.numberForeground #B28CFF
symbolIcon.objectForeground #F0F4FC
symbolIcon.operatorForeground #9D6CFF
symbolIcon.packageForeground #FFE68A
symbolIcon.propertyForeground #F0F4FC
symbolIcon.referenceForeground #F0F4FC
symbolIcon.snippetForeground #6CF3FF
symbolIcon.stringForeground #FFE68A
symbolIcon.structForeground #6CF3FF
symbolIcon.textForeground #F0F4FC
symbolIcon.typeParameterForeground #76FF8F
symbolIcon.unitForeground #B28CFF
symbolIcon.variableForeground #F0F4FC
tab.activeBackground #1A1E24
tab.activeBorder #9D6CFF
tab.activeBorderTop #FF9F4380
tab.activeForeground #F0F4FC
tab.border #0A0E14
tab.hoverBackground #2D354630
tab.hoverForeground #F0F4FC
tab.inactiveBackground #0A0E14
tab.inactiveForeground #4A4F5B
tab.unfocusedActiveForeground #F0F4FCAA
tab.unfocusedInactiveForeground #4A4F5B80
terminal.ansiBlack #1A1E24
terminal.ansiBlue #9D6CFF
terminal.ansiBrightBlack #4A4F5B
terminal.ansiBrightBlue #B28CFF
terminal.ansiBrightCyan #A4FFFF
terminal.ansiBrightGreen #9AFFA9
terminal.ansiBrightMagenta #FFACE5
terminal.ansiBrightRed #FF9191
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFF4A3
terminal.ansiCyan #6CF3FF
terminal.ansiGreen #76FF8F
terminal.ansiMagenta #FF92DF
terminal.ansiRed #FF6E6E
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #FFE68A
terminal.background #0A0E14
terminal.foreground #F0F4FC
terminal.selectionBackground #2D3546AA
terminalCursor.foreground #FF9F43
titleBar.activeBackground #0A0E14
titleBar.activeForeground #F0F4FC
titleBar.border #1A1E2440
titleBar.inactiveBackground #0A0E14
titleBar.inactiveForeground #4A4F5B
tree.indentGuidesStroke #2D354660
walkThrough.embeddedEditorBackground #0A0E1490
welcomePage.tileBackground #1A1E24
widget.shadow #0A0E1499 storage.type, storage.modifier
string, markup.inline.raw #FFE68A —
constant.character.escape #FF9F43 —
constant.numeric, constant.language, constant.character, constant.other #B28CFF —
entity.name.function, support.function #76FF8F bold
meta.function-call, variable.function #76FF8F —
meta.method-call, meta.method #9AFFA9 —
meta.function.parameters, variable.parameter #FF9F43 italic
variable, support.variable #F0F4FC —
variable.other.property, variable.object.property, support.variable.property #FF92DF —
variable.other.constant, variable.language.this, variable.language.super #FF6E6E bold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution #6CF3FF bold
entity.name.type.interface, entity.name.type.protocol #6CF3FF bold italic
entity.name.type.enum #6CF3FF bold
entity.other.inherited-class, entity.name.type.parameter #A4FFFF italic
support.class, support.type #6CF3FF —
keyword.operator #9D6CFF bold
keyword.operator.logical, keyword.operator.comparison #B28CFF bold
keyword.operator.assignment, keyword.operator.arithmetic #6CF3FF —
keyword.operator.ternary, punctuation.definition.template-expression #FF9F43 —
entity.name.tag, entity.name.tag.html, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx #FF92DF —
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx #76FF8F —
meta.tag.attributes, meta.tag.attributes.js, meta.tag.attributes.jsx, meta.tag.attributes.tsx #FF9F43 —
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end #FFE68A —
punctuation.definition.parameters, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.function, punctuation.section.method, punctuation.section.class, punctuation.section.block #F0F4FCAA —
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator #F0F4FCAA —
punctuation.accessor #9D6CFF —
variable.other.readwrite.alias #F0F4FC —
meta.import, meta.export #FF6E6E —
keyword.control.flow, keyword.control.conditional, keyword.control.loop #FF6E6E bold
keyword.control.flow.async, storage.modifier.async #B28CFF italic bold
meta.object-literal.key, meta.object.member #F0F4FCCC —
support.type.primitive, support.type.builtin #6CF3FF italic
support.type.promise #6CF3FF bold italic
entity.name.type.module #FFE68A —
entity.other.attribute-name.class.css #76FF8F —
entity.other.attribute-name.id.css #FF6E6E —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #FF9F43 italic
support.type.property-name.css, support.type.vendor-prefix.css #6CF3FF —
support.constant.property-value.css #FFE68A —
keyword.control.at-rule.import.css, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css #FF6E6E bold
punctuation.definition.entity.css #9D6CFF —
markup.heading, entity.name.section #FF6E6E bold
markup.italic #B28CFF italic
markup.underline #76FF8F underline
markup.quote #6CF3FF italic
markup.fenced_code, markup.inline.raw.string #FFE68A —
markup.list.bullet, markup.list.number #FF92DF —
support.type.property-name.json #6CF3FF —
punctuation.support.type.property-name.begin.json, p punctuation.support.type.property-name.end.json #6CF3FF —
entity.name.tag.yaml #6CF3FF —
string.unquoted.plain.out.yaml #F0F4FC —
support.class.component.jsx, support.class.component.tsx #FF92DF bold
variable.other.readwrite.jsx, variable.other.readwrite.tsx, variable.other.object.jsx, variable.other.object.tsx #F0F4FC —
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #F0F4FC —
meta.embedded.expression.jsx, meta.embedded.expression.tsx #F0F4FC —
keyword.operation.graphql #FF6E6E bold
entity.name.fragment.graphql, entity.name.query.graphql, entity.name.mutation.graphql #76FF8F bold
variable.graphql #FF9F43 italic
keyword.other.special-method.dockerfile #FF6E6E bold
string.quoted.double.dockerfile, string.quoted.single.dockerfile #FFE68A —
markup.heading.git-commit #FF6E6E bold
meta.scope.message.git-commit #F0F4FC —
meta.type.annotation #6CF3FF —
entity.name.type.alias, entity.name.type.interface #6CF3FF bold italic
meta.type.annotation meta.type.parameters, meta.type.parameters entity.name.type #A4FFFF italic
meta.type.annotation meta.type.function, meta.type.function entity.name.type #76FF8F italic
keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.definiteassignment #9D6CFF —
meta.type.annotation meta.object #F0F4FC —
entity.name.tag.svelte #FF92DF bold
meta.svelte-block entity.name.function #76FF8F bold
meta.svelte-directive.on punctuation.definition.keyword #FF6E6E —
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue #FF6E6E bold
source.vue entity.name.tag.custom #FF92DF —
keyword.control.flow.python #FF6E6E bold
meta.function-call.python #76FF8F —
support.function.magic.python #B28CFF italic bold
meta.function.decorator.python, entity.name.function.decorator.python #9D6CFF italic
meta.function.parameters.python #FF9F43 italic
support.function.builtin.python #76FF8F italic
entity.name.type.rust #6CF3FF bold
keyword.control.rust #FF6E6E bold
storage.modifier.lifetime.rust #FF9F43 italic
meta.attribute.rust #9D6CFF italic
keyword.function.go #FF6E6E bold
entity.name.function.go #76FF8F bold
entity.name.type.go #6CF3FF bold
storage.type.numeric.go #B28CFF —
entity.name.function.cpp, entity.name.function.c #76FF8F bold
entity.name.type.cpp, entity.name.type.c #6CF3FF bold
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c #6CF3FF italic
entity.name.namespace.cpp #FFE68A —
keyword.control.java #FF6E6E bold
entity.name.type.class.java #6CF3FF bold
storage.modifier.java #6CF3FF italic
storage.type.primitive.java #6CF3FF italic
entity.name.function.java #76FF8F bold
entity.name.function.php #76FF8F bold
entity.name.type.class.php #6CF3FF bold
keyword.control.php #FF6E6E bold
variable.other.php #F0F4FC —
keyword.control.shell #FF6E6E bold
meta.function.shell #76FF8F —
variable.other.special.shell #B28CFF —
string.quoted.double.shell, string.quoted.single.shell #FFE68A —
keyword.other.sql #FF6E6E bold
entity.name.function.sql #76FF8F bold
support.function.aggregate.sql #B28CFF —
entity.name.table.sql, entity.name.table.toml #6CF3FF —
support.type.rxjs, support.class.rxjs #FF6E6E italic
support.variable.rxjs #9D6CFF —
meta.method-call.rxjs, meta.function-call.rxjs #76FF8F —
support.type.tensor, support.class.tensor #FF9F43 —
entity.name.type.class.nn-layer #6CF3FF bold
support.function.tensorflow, support.function.torch, support.function.keras #76FF8F italic
variable.other.readwrite.tensorflow, variable.other.readwrite.torch #9D6CFF —
keyword.other.solidity #76FF8F —
storage.type.solidity #6CF3FF italic
entity.name.function.solidity #76FF8F bold
support.type.web3 #9D6CFF —
entity.name.tag.dockerfile #6CF3FF —
keyword.other.special-method.dockerfile #FF6E6E bold
support.function.cloudformation, support.type.property-name.cloudformation #FF9F43 —
entity.name.type.aws, entity.name.function.terraform #6CF3FF —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" } ,
} );
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" } ,
} );
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}