Neon Night

Name: Neon Night
Author: chaseadamsio

Publisher: chaseadamsioThemes in package: 4

Dark VS Code Theme

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Neon Night — Neon Night

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#20242D
activityBar.foreground#DD92F6
activityBar.inactiveForeground#C7C8FF77
activityBarBadge.background#C7C8FF
activityBarBadge.foreground#20242D
badge.background#20242D
badge.foreground#DD92F6
breadcrumb.activeSelectionForeground#DD92F6
breadcrumb.background#20242D
breadcrumb.focusForeground#DD92F6
breadcrumb.foreground#C7C8FF
breadcrumbPicker.background#20242D
button.background#69B4F9
button.foreground#20242D
button.hoverBackground#0adeff
contrastBorder#DD92F677
debugToolBar.background#1E2129
debugToolBar.border#DD92F6
descriptionForeground#C7C8FF
diffEditor.border#DD92F677
diffEditor.insertedTextBackground#7EFDD011
diffEditor.removedTextBackground#FF8E8E11
dropdown.background#1E2129
dropdown.border#DD92F633
dropdown.foreground#C7C8FF
dropdown.listBackground#1E2129
editor.background#20242D
editor.findMatchBackground#DD92F633
editor.findMatchHighlightBackground#DD92F633
editor.findRangeHighlightBackground#DD92F633
editor.foreground#C7C8FF
editor.hoverHighlightBackground#1E2129
editor.rangeHighlightBackground#DD92F633
editor.selectionBackground#DD92F622
editor.selectionHighlightBackground#DD92F633
editor.selectionHighlightBorder#DD92F677
editor.wordHighlightBackground#DD92F633
editor.wordHighlightBorder#DD92F677
editor.wordHighlightStrongBackground#DD92F633
editorBracketMatch.background#20242D
editorBracketMatch.border#DD92F677
editorCodeLens.foreground#DD92F6
editorError.foreground#FF8E8E
editorGroup.emptyBackground#20242D
editorGroupHeader.tabsBackground#20242D
editorGutter.addedBackground#7EFDD0
editorGutter.background#20242D
editorGutter.deletedBackground#FF8E8E
editorGutter.modifiedBackground#DD92F6
editorHint.foreground#DD92F6
editorHoverWidget.background#1B1E26
editorIndentGuide.activeBackground#DD92F677
editorIndentGuide.background#C7C8FF33
editorInfo.foreground#69B4F9
editorLineNumber.activeForeground#C7C8FF
editorLineNumber.foreground#C7C8FF77
editorLink.activeForeground#DD92F6
editorMarkerNavigation.background#20242D
editorMarkerNavigationError.background#FF8E8E
editorMarkerNavigationInfo.background#69B4F9
editorMarkerNavigationWarning.background#FCAD3F
editorOverviewRuler.addedForeground#7EFDD0
editorOverviewRuler.border#DD92F633
editorOverviewRuler.bracketMatchForeground#DD92F6
editorOverviewRuler.deletedForeground#FF8E8E
editorOverviewRuler.errorForeground#FF8E8E
editorOverviewRuler.findMatchForeground#DD92F677
editorOverviewRuler.infoForeground#69B4F977
editorOverviewRuler.modifiedForeground#DD92F6
editorOverviewRuler.warningForeground#FCAD3F
editorRuler.foreground#DD92F633
editorSuggestWidget.background#20242D
editorSuggestWidget.foreground#C7C8FF
editorSuggestWidget.highlightForeground#DD92F6
editorSuggestWidget.selectedBackground#1B1E26
editorUnnecessaryCode.border#FF8E8E
editorWarning.foreground#FCAD3F
editorWidget.background#20242D
editorWidget.border#DD92F633
errorForeground#FF8E8E
focusBorder#DD92F677
foreground#C7C8FF
gitDecoration.addedResourceForeground#7EFDD0
gitDecoration.deletedResourceForeground#FF8E8E
gitDecoration.modifiedResourceForeground#DD92F6
input.background#1E2129
input.foreground#C7C8FF
input.placeholderForeground#C7C8FF77
inputOption.activeBorder#DD92F6
list.activeSelectionBackground#1B1E26
list.activeSelectionForeground#DD92F6
list.border#1B1E26
list.focusBackground#1B1E26
list.focusForeground#C7C8FF
list.highlightForeground#DD92F6
list.hoverBackground#1E2129
list.hoverForeground#DD92F6
list.inactiveSelectionBackground#DD92F633
list.inactiveSelectionForeground#C7C8FF
menu.background#20242D
menu.foreground#C7C8FF
menu.selectionBorder#DD92F6
menubar.selectionBackground#20242D
menubar.selectionForeground#DD92F6
merge.commonContentBackground#20242D
merge.commonHeaderBackground#20242D
merge.currentContentBackground#7EFDD033
merge.currentHeaderBackground#7EFDD077
merge.incomingContentBackground#69B4F933
merge.incomingHeaderBackground#69B4F977
notificationCenter.border#DD92F677
notificationCenterHeader.background#20242D
notificationCenterHeader.foreground#DD92F6
notificationLink.foreground#69B4F9
notifications.background#20242D
notifications.foreground#C7C8FF
notificationToast.border#DD92F677
panel.background#20242D
panel.border#DD92F633
panelTitle.activeBorder#DD92F677
panelTitle.activeForeground#C7C8FF
panelTitle.inactiveForeground#C7C8FF77
peekView.border#DD92F633
peekViewEditor.background#20242D
peekViewEditor.matchHighlightBackground#DD92F633
peekViewEditor.matchHighlightBorder#20242D
peekViewEditorGutter.background#20242D
peekViewResult.background#20242D
peekViewResult.fileForeground#C7C8FF
peekViewResult.lineForeground#C7C8FF77
peekViewResult.matchHighlightBackground#DD92F633
peekViewResult.selectionBackground#DD92F633
peekViewResult.selectionForeground#C7C8FF
peekViewTitle.background#20242D
peekViewTitleDescription.foreground#C7C8FF
peekViewTitleLabel.foreground#DD92F6
pickerGroup.foreground#C7C8FF
progressBar.background#DD92F6
quickInput.background#20242D
quickInput.foreground#C7C8FF
scrollbar.shadow#20242D
scrollbarSlider.activeBackground#DD92F6
scrollbarSlider.background#DD92F633
scrollbarSlider.hoverBackground#DD92F677
selection.background#DD92F633
sideBar.background#20242D
sideBar.border#DD92F633
sideBarSectionHeader.background#20242D
sideBarSectionHeader.border#DD92F633
sideBarSectionHeader.foreground#DD92F6
sideBarTitle.foreground#C7C8FF
statusBar.background#20242D
statusBar.debuggingBackground#DD92F6
statusBar.debuggingBorder#1E2129
statusBar.debuggingForeground#20242D
statusBar.foreground#C7C8FF77
statusBar.noFolderBackground#20242D
statusBar.noFolderForeground#C7C8FF
tab.activeBackground#20242D
tab.activeBorder#DD92F6
tab.activeForeground#C7C8FF
tab.border#DD92F633
tab.inactiveBackground#20242D
tab.inactiveForeground#C7C8FF77
terminal.ansiBlack#20242D
terminal.ansiBlue#69B4F9
terminal.ansiCyan#0adeff
terminal.ansiGreen#7EFDD0
terminal.ansiMagenta#DD92F6
terminal.ansiRed#FF8E8E
terminal.ansiWhite#C7C8FF
terminal.ansiYellow#FCAD3F
terminal.background#20242D
terminal.foreground#C7C8FF
textBlockQuote.background#1B1E26
textCodeBlock.background#20242D
textLink.activeForeground#DD92F6
textLink.foreground#DD92F6
textPreformat.foreground#DD92F6
titleBar.activeBackground#20242D
titleBar.activeForeground#C7C8FF
titleBar.inactiveBackground#20242D
titleBar.inactiveForeground#C7C8FF33
widget.shadow#20242D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#DD92F677	italic
string.quoted punctuation, string.quoted	#7EFDD0	—
entity.name.function	#C7C8FF	italic
variable, string constant.other.placeholder	#69B4F9	—
constant.language.boolean	#C7C8FF	bold
invalid, invalid.illegal	#FF8E8E	—
keyword	#DD92F6	—
storage.type, storage.modifier	#DD92F6	italic
keyword.operator.accessor	#C7C8FF	—
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control	#DD92F6	italic
string.regexp	#7EFDD0	—
constant.character.escape	#DD92F6	—
url, link, uri	—	underline
variable.language	#C7C8FF	bold
entity.other.attribute-name	#DD92F6	italic
markup.inserted	#DD92F6	—
markup.deleted	#FF8E8E	—
markup.changed	#69B4F9	—
markup.heading.heading-0.asciidoc, markup.heading.heading-1.asciidoc, markup.heading.heading-2.asciidoc, markup.heading.heading-3.asciidoc, markup.heading.heading-4.asciidoc, markup.heading.heading-5.asciidoc, markup.heading.heading-6.asciidoc	#DD92F6	—
text.asciidoc markup.code markup.heading, text.asciidoc markup.code markup.heading entity.name.function	#69B4F9	—
markup.bold.asciidoc	—	bold
markup.italic.asciidoc	—	italic
markup.raw.monospace.asciidoc	#69B4F9	bold
source.clojure constant.keyword	#69B4F9	—
source.clojure storage.control	#DD92F6	—
source.clojure meta.symbol	#0adeff	italic
source.css keyword.control, source.sass keyword.control, source.scss keyword.control, source.less keyword.control, source.stylus keyword.control, source.postcss keyword.control	#DD92F6	italic
source.css entity.name.tag, source.sass entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag, source.postcss entity.name.tag	#DD92F6	—
source.css support.constant.property-value, source.sass support.constant.property-value, source.less support.constant.property-value, source.stylus support.constant.property-value, source.postcss support.constant.property-value	#7EFDD0	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#DD92F6	—
source.css entity.other.attribute-name.class, source.sass entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.less entity.other.attribute-name.class, source.stylus entity.other.attribute-name.class, source.postcss entity.other.attribute-name.class	#0adeff	normal
source.css support.function, source.sass support.function, source.scss support.function, source.less support.function, source.stylus support.function, source.postcss support.function	#69B4F9	normal
source.dockerfile keyword.other.special-method	#DD92F6	bold
source.go entity.name.import	#7EFDD0	—
source.go support.function	#69B4F9	—
text.html entity.name.tag	#DD92F6	—
text.html entity.other.attribute-name	#69B4F9	—
text.html meta.tag.metadata.doctype	—	bold
source.js keyword.control.module	#DD92F6	—
source.js keyword.operator.accessor	#DD92F6	—
source.js string.unquoted	#C7C8FF	italic
source.js constant.other.object.key.js string.quoted, source.js constant.other.object.key.js string.quoted punctuation	#DD92F6	—
source.js support.type	#DD92F6	normal
source.js support.type.class.flowtype	#C7C8FF	bold
source.js entity.name.module.js, source.js variable.import.parameter.js, source.js variable.other.class.js	#C7C8FF	bold
source.js variable.language	#C7C8FF	bold
source.js meta.tag.jsx	#DD92F6	—
source.js punctuation.definition.tag.jsx	#C7C8FF	—
source.js entity.other.attribute-name.jsx	#69B4F9	italic
source.json support.type.property-name, source.json punctuation.support.type.property-name	#DD92F6	—
source.json constant.language	#C7C8FF	bold
source.json string.quoted.double, source.json string.quoted.double punctuation	#0adeff	—
source.makefile variable.language	#DD92F6	—
source.makefile support.function.target.PHONY	#69B4F9	—
source.makefile entity.name.function.target.makefile	#DD92F6	—
source.makefile string.interpolated variable.language	#7EFDD0	—
source.makefile punctuation.definition	#7EFDD0	—
source.makefile meta.scope.function-call	#0adeff	—
text.html.markdown, punctuation.definition.list_item.markdown	#C7C8FF	—
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw.markdown	#69B4F9	bold
text.html.markdown markup.heading	#DD92F6	—
text.html.markdown markup.italic	#0adeff	italic
text.html.markdown markup.bold, text.html.markdown markup.bold string	#0adeff	bold
text.html.markdown markup.underline	#C7C8FF	underline
text.html.markdown markup.quote punctuation.definition.blockquote.markdown	#DD92F6	—
text.html.markdown markup.quote	#69B4F9	italic
text.html.markdown string.other.link.title.markdown	#69B4F9	—
text.html.markdown string.other.link.description.title	#C7C8FF	—
text.html.markdown markup.underline.link	#7EFDD0	—
text.html.markdown markup.raw.block	#C7C8FF	—
text.html.markdown markup.raw.block.fenced	#C7C8FF	—
text.html.markdown markup.fenced_code.block punctuation.definition	#69B4F9	—
text.html markdown meta.separator	#C7C8FF	bold
source.yaml entity.name.tag	#DD92F6	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}