Skip to main content
Home Theme VS Code Neogenesis theme A theme for lovers of neon colors.It is still a beta version.
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.background #0a0525 activityBar.border #4e5aff activityBar.dropBackground #4e5aff activityBar.foreground #4e5aff activityBarBadge.background #0a0525 activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file #a2bffc italic markup.deleted.diff #EF535090 italic markup.inserted.diff #8eff4dff italic Global settings #d6deeb — comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Neogenesis theme — Neogenesis
badge.background
#4e5aff
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #A599E9
breadcrumbPicker.background #001122
button.background #4f0dc2cc
button.foreground #ffffffcc
button.hoverBackground #7e57c2
contrastActiveBorder #122d42
contrastBorder #122d42
debugToolBar.background #0a0525
dropdown.background #011627
dropdown.border #4e5aff
dropdown.foreground #ffffffcc
editor.background #0a0525
editor.findMatchBackground #5f7e9779
editor.findMatchHighlightBackground #2E3248
editor.foreground #d6deeb
editor.hoverHighlightBackground #7e57c25a
editor.inactiveSelectionBackground #7e57c25a
editor.lineHighlightBackground #0003
editor.rangeHighlightBackground #7e57c25a
editor.selectionBackground #4e5aff67
editor.selectionHighlightBackground #4e5aff67
editor.wordHighlightBackground #32374D
editor.wordHighlightStrongBackground #2E3250
editorBracketMatch.background #4e5aff
editorBracketMatch.border #00ffff
editorCodeLens.foreground #5e82ceb4
editorCursor.foreground #fff235
editorGroup.border #0a0525
editorGroup.dropBackground #7e57c273
editorGroupHeader.noTabsBackground #0a0525
editorGroupHeader.tabsBackground #0a0525
editorGroupHeader.tabsBorder #4e5aff
editorIndentGuide.activeBackground #4e5aff
editorIndentGuide.background #4e5aff52
editorLineNumber.activeForeground #C5E4FD
editorLineNumber.foreground #4e5aff
editorMarkerNavigation.background #31364a
editorMarkerNavigationError.background #EF5350
editorMarkerNavigationWarning.background #FFCA28
editorRuler.foreground #0a0525
errorForeground #EF5350
extensionButton.prominentBackground #7e57c2cc
extensionButton.prominentForeground #ffffffcc
extensionButton.prominentHoverBackground #7e57c2
focusBorder #122d42
foreground #d6deeb
gitDecoration.conflictingResourceForeground #ffeb95cc
gitDecoration.deletedResourceForeground #EF535090
gitDecoration.ignoredResourceForeground #395a75
gitDecoration.modifiedResourceForeground #a2bffc
gitDecoration.untrackedResourceForeground #8eff4dff
input.background #0b253a
input.border #4e5aff
input.foreground #ffffffcc
input.placeholderForeground #4e5aff
inputOption.activeBorder #ffffffcc
inputValidation.errorBackground #ef5350f2
inputValidation.errorBorder #EF5350
inputValidation.infoBackground #64b5f6f2
inputValidation.infoBorder #64B5F6
inputValidation.warningBackground #ffca28f2
inputValidation.warningBorder #FFCA28
list.activeSelectionBackground #2332ff8c
list.activeSelectionForeground #ffffff
list.dropBackground #011627
list.focusBackground #4e5aff
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #161f9c
list.hoverForeground #FFF
list.inactiveSelectionBackground #161f9c
list.inactiveSelectionForeground #FFF
list.invalidItemForeground #975f94
menu.background #0a0525
menu.selectionBackground #0a0525
menu.selectionBorder #4e5aff
menu.selectionForeground #0a0525
menu.separatorBackground #FFF
merge.currentHeaderBackground #5f7e97
merge.incomingHeaderBackground #7e57c25a
meta.objectliteral.js #82AAFF
notificationLink.foreground #80CBC4
notifications.background #03062e
notifications.foreground #ffffffcc
panel.background #0a0525
panel.border #4e5aff
panelTitle.activeBorder #4e5aff
panelTitle.activeForeground #ffffffcc
panelTitle.inactiveForeground #d6deeb80
peekView.border #5f7e97
peekViewEditor.background #011627
peekViewEditor.matchHighlightBackground #7e57c25a
peekViewResult.background #011627
peekViewResult.fileForeground #5f7e97
peekViewResult.lineForeground #5f7e97
peekViewResult.matchHighlightBackground #ffffffcc
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #5f7e97
peekViewTitle.background #011627
peekViewTitleDescription.foreground #697098
peekViewTitleLabel.foreground #5f7e97
pickerGroup.border #011627
pickerGroup.foreground #d1aaff
scrollbar.shadow #03062e
scrollbarSlider.activeBackground #084d8180
scrollbarSlider.background #084d8180
scrollbarSlider.hoverBackground #084d8180
selection.background #5a43c2
sideBar.background #0a0525
sideBar.border #4e5aff
sideBar.foreground #ffffff
sideBarSectionHeader.background #0a0525
sideBarSectionHeader.border #4e5aff
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #4e5aff
source.elm #5f7e97
statusBar.background #0a0525
statusBar.border #262A39
statusBar.debuggingBackground #202431
statusBar.debuggingBorder #1F2330
statusBar.foreground #4e5aff
statusBar.noFolderBackground #011627
statusBar.noFolderBorder #25293A
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
string.quoted.single.js #ffffff
tab.activeBackground #4e5aff
tab.activeBorder #4e5aff
tab.activeForeground #d2dee7
tab.inactiveBackground #0a0525
tab.inactiveForeground #ffffff
tab.unfocusedActiveForeground #4e5aff
tab.unfocusedInactiveForeground #4e5aff
terminal.ansiBlack #011627
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #575656
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #2cdbe7
terminal.ansiBrightGreen #22da6e
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffeb95
terminal.ansiCyan #21c7a8
terminal.ansiGreen #22da6e
terminal.ansiMagenta #C792EA
terminal.ansiRed #EF5350
terminal.ansiWhite #ffffff
terminal.ansiYellow #8eff4d
terminal.foreground #00ecec
titleBar.activeBackground #0a0525
titleBar.activeForeground #eeefff
titleBar.inactiveBackground #010e1a
walkThrough.embeddedEditorBackground #011627
welcomePage.buttonBackground #011627
welcomePage.buttonHoverBackground #011627
widget.shadow #011627 string.quoted, variable.other.readwrite.js #8b6bff italic
support.constant.math #8eff4d —
constant.numeric, constant.character.numeric #F78C6C
constant.language, punctuation.definition.constant, variable.other.constant #82AAFF —
constant.character, constant.other #8f82ff italic
constant.character.escape #F78C6C —
string.regexp, string.regexp keyword.other #5ca7e4 —
meta.function punctuation.separator.comma #5f7e97 —
punctuation.accessor, keyword #fff131 italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #c792ea italic
storage.type.function.arrow.js —
entity.name.class, meta.class entity.name.type.class #00b7e9 —
entity.other.inherited-class #8eff4d —
entity.name.function #82AAFF
punctuation.definition.tag, meta.tag #ff8c31 —
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #ff8c31
entity.other.attribute-name #8eff4d italic
entity.name.tag.custom #8eff4d —
support.function, support.constant #82AAFF italic
support.constant.meta.property-value #2cdbe7 —
support.type, support.class #8eff4d —
support.variable.dom #8eff4d —
invalid.deprecated #ffffff —
keyword.operator.relational #c792ea italic
keyword.operator.assignment #c792ea —
keyword.operator.arithmetic #c792ea —
keyword.operator.bitwise #c792ea —
keyword.operator.increment #c792ea —
keyword.operator.ternary #c792ea —
comment.line.double-slash #637777 —
constant.language.null #ff5874 —
meta.delimiter.period #c792ea italic
punctuation.definition.string #d9f5dd —
constant.language.boolean #ff5874 —
variable.parameter.function #2cdbe7
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag #80CBC4
meta.property-list entity.name.tag.reference #57eaf1 —
constant.other.color.rgb-value punctuation.definition.constant #F78C6C —
constant.other.color #FFEB95 —
keyword.other.unit #FFEB95 —
meta.selector #c792ea italic
entity.other.attribute-name.id #FAD430 —
meta.property-name #80CBC4 —
entity.name.tag.doctype, meta.tag.sgml.doctype #c792ea italic
punctuation.definition.parameters #d9f5dd —
keyword.control.operator #2cdbe7 —
keyword.operator.logical #c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #2cdbe7 —
variable.other.object.property #d7dbe0 italic
variable.other.object.js —
entity.name.function #ff8c31 italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx #c792ea italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts #c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #2cdbe7 —
invalid.unimplemented #ffffff —
variable.language #2cdbe7 —
support.variable.property #2cdbe7 —
variable.function #82AAFF —
variable.interpolation #ec5f67 —
meta.function-call #82AAFF —
punctuation.section.embedded #d3423e —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #d6deeb —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #d9f5dd —
string.template meta.template.expression #d3423e —
string.template punctuation.definition.string #d6deeb —
variable.assignment.coffee #31e1eb —
variable.parameter.function.coffee #d6deeb —
variable.assignment.coffee #2cdbe7 —
variable.other.readwrite.cs #d6deeb —
entity.name.type.class.cs, storage.type.cs #82AAFF —
entity.name.type.namespace.cs #B2CCD6 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css #ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #2cdbe7 —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js #F78C6C —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #82AAFF —
source.elixir entity.name.function #8eff4d —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #82AAFF —
source.elixir punctuation.definition.string #8eff4d —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #8eff4d —
source.elixir .punctuation.binary.elixir #c792ea italic
source.go meta.function-call.go #DDDDDD —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #c792ea italic
source.go constant.language.go, source.go constant.other.placeholder.go #ff5874 —
entity.other.attribute-name.id.html #8eff4d —
punctuation.definition.tag.html #6ae9f0 —
meta.tag.sgml.doctype.html #c792ea italic
meta.class entity.name.type.class.js #00b7e9 —
meta.method.declaration storage.type.js #828fff —
meta.js punctuation.definition.js #d6deeb —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #5f7e97 —
variable.other.jsdoc, variable.other.phpdoc #78ccf0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #d6deeb —
variable.parameter.function.js #7986E7 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #ffde4d —
variable.js, variable.other.js #d6deeb —
entity.name.type.js, entity.name.type.module.js #00b7e9
support.type.property-name.json #8eff4d —
support.constant.json #8eff4d —
meta.structure.dictionary.value.json string.quoted.double #c789d6 —
string.quoted.double.json punctuation.definition.string.json #80CBC4 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ff5874 —
variable.other.ruby #d6deeb —
entity.name.type.class.ruby #ecc48d —
constant.language.symbol.hashkey.ruby #2cdbe7 —
entity.name.tag.less #2cdbe7 —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.less entity.other.attribute-name.attribute #F78C6C —
markup.heading.markdown #82b1ff —
markup.italic.markdown #c792ea italic
markup.bold.markdown #8eff4d bold
markup.quote.markdown #697098 italic
markup.inline.raw.markdown #80CBC4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #ff869a —
string.other.link.title.markdown, string.other.link.description.markdown #d6deeb —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #82b1ff —
punctuation.definition.metadata.markdown #2cdbe7 —
beginning.punctuation.definition.list.markdown #82b1ff —
markup.inline.raw.string.markdown #8eff4d —
variable.other.php, variable.other.property.php #4f78ff —
support.class.php #9553ff —
meta.function-call.php punctuation #d6deeb —
variable.other.global.php #8eff4d —
variable.other.global.php punctuation.definition.variable #8eff4d —
constant.language.python #ff5874 —
variable.parameter.function.python, meta.function-call.arguments.python #82AAFF —
meta.function-call.python, meta.function-call.generic.python #B2CCD6 —
punctuation.python #d6deeb —
entity.name.function.decorator.python #8eff4d —
source.python variable.language.special #8EACE3 —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #8eff4d —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #82AAFF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bec5d4 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #F78C6C —
entity.name.tag.scss, entity.name.tag.sass #2cdbe7 —
keyword.other.unit.scss, keyword.other.unit.sass #FFEB95 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #d6deeb —
entity.name.type.ts, entity.name.type.tsx #00b7e9 —
support.class.node.ts, support.class.node.tsx #82AAFF —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #5f7e97 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #d6deeb —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #82AAFF —
meta.tag.js meta.jsx.children.tsx #82AAFF —
entity.name.tag.yaml #2cdbe7 —
variable.other.readwrite.js, variable.parameter #d7dbe0 —
support.class.component.js, support.class.component.tsx #f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #d6deeb —
meta.class entity.name.type.class.tsx #00b7e9 —
entity.name.type.tsx, entity.name.type.module.tsx #00b7e9 —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #82AAFF —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
Neogenesis theme | Coding Theme