Neon City

Name: Neon City
Author: Lakshit Somani

Publisher: Lakshit SomaniThemes in package: 1

Discover the mesmerizing allure of the urban nightscape with Neon City, where sophistication meets the electric energy of the city streets.

GitHub

VS Code preview

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

Neon City — Neon City

fetchUser.ts

index.ts

README.md

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#0c0a20
activityBar.foreground#7984d1
activityBarBadge.background#ff2e97
activityBarBadge.foreground#ffffff
button.background#1ea8fc
button.foreground#f2f3f7
button.hoverBackground#1ea8fc
descriptionForeground#f2f3f7
dropdown.background#100d2b
dropdown.listBackground#100d2b
editor.background#0c0a20
editor.findMatchBackground#484f7d
editor.findMatchHighlightBackground#484f7d80
editor.foreground#f2f3f7
editor.hoverHighlightBackground#42c6ff2a
editor.lineHighlightBackground#0c0a20
editor.selectionBackground#484f7d
editor.selectionHighlightBackground#484f7d8e
editor.wordHighlightBackground#ffffff22
editor.wordHighlightStrongBackground#42c6ff63
editorCursor.foreground#ff2e97
editorError.foreground#ff2e97
editorGroup.dropBackground#7984d1
editorGroupHeader.noTabsBackground#090819
editorGroupHeader.tabsBackground#090819
editorHoverWidget.background#100d2b
editorHoverWidget.border#3b4167
editorIndentGuide.activeBackground#484f7d
editorIndentGuide.background#2d2844
editorInfo.foreground#7984d1
editorLineNumber.activeForeground#42c6ff
editorLineNumber.foreground#484f7d
editorRuler.foreground#484f7d
editorSuggestWidget.background#100d2b
editorWarning.foreground#ff9b50
editorWidget.background#100d2b
editorWidget.border#3b4167
foreground#f2f3f7
gitDecoration.conflictingResourceForeground#df85ff
gitDecoration.deletedResourceForeground#ff2e97
gitDecoration.ignoredResourceForeground#7984d1
gitDecoration.modifiedResourceForeground#ffd400
gitDecoration.untrackedResourceForeground#42c6ff
input.background#0c0a20
input.border#763b8c
input.placeholderForeground#7984d1
inputOption.activeBorder#ff9b50
list.activeSelectionBackground#d86bff
list.activeSelectionForeground#ffffff
list.dropBackground#100d2b
list.errorForeground#ff2e97
list.focusBackground#8a45a3
list.hoverBackground#8a45a3
list.inactiveSelectionBackground#131033
list.warningForeground#ff2e97
menu.background#100d2b
panel.background#090819
panel.border#090819
panelTitle.activeBorder#1ea8fc
panelTitle.activeForeground#f2f3f7
panelTitle.inactiveForeground#7984d1
peekView.border#ff9b50
peekViewEditor.background#110d26
peekViewEditor.matchHighlightBackground#161130
peekViewEditor.matchHighlightBorder#161130
peekViewResult.background#0c0a20
peekViewResult.selectionBackground#ff9b50
peekViewTitle.background#0c0a20
peekViewTitleDescription.foreground#7984d1
progressBar.background#ff2e97
scrollbar.shadow#090819
scrollbarSlider.activeBackground#919ad9
scrollbarSlider.background#9199d94f
scrollbarSlider.hoverBackground#9199d9b4
sideBar.background#090819
sideBarSectionHeader.background#0c0a20
sideBarSectionHeader.foreground#7984d1
statusBar.background#090819
statusBar.foreground#7984d1
statusBar.noFolderBackground#1ea8fc
statusBar.noFolderForeground#ffffff
tab.activeBackground#0c0a20
tab.activeForeground#f2f3f7
tab.border#0c0a20
tab.inactiveBackground#090819
tab.inactiveForeground#7984d1
terminal.ansiBlack#283034
terminal.ansiBlue#42c6ff
terminal.ansiBrightBlack#435056
terminal.ansiBrightBlue#42c6ff
terminal.ansiBrightCyan#42c6ff
terminal.ansiBrightGreen#add0e5
terminal.ansiBrightMagenta#ff2afc
terminal.ansiBrightRed#ff2e97
terminal.ansiBrightWhite#f4f6f9
terminal.ansiBrightYellow#ffd400
terminal.ansiCyan#42c6ff
terminal.ansiGreen#62a9cf
terminal.ansiMagenta#ff2afc
terminal.ansiRed#ff2e97
terminal.ansiWhite#d9e0e9
terminal.ansiYellow#ffd400
terminal.background#090819
terminal.foreground#e4eeff
titleBar.activeBackground#090819

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#616791	italic
constant	#E5FCA6	—
entity	#A6E2E0	—
invalid	#FF427B	italic bold underline
invalid.deprecated	#FF0000	bold
keyword	#E3A3F7	—
markup	#94B4C4	—
storage	#F37AB0	—
string	#83FF52	—
support	#7CB3B6	—
variable	#E4D2E6	—
comment.block.documentation	#75B7BB	—
comment.block.documentation storage	#FDA8BC	—
comment.block.documentation entity	#45898C	—
variable.other.jsdoc	#BAF7FC	—
support.function	#8CE1E7	—
keyword.control	#FB4293	—
keyword.import	#F272AA	—
meta.paragraph.markdown	#BCCFCF	—
comment.block.html	#48676A	—
entity.name.section.markdown	#FFDFEE	bold
punctuation.definition.heading.markdown	#A8FFDB	bold
markup.inline.raw.string.markdown	#FF96AA	—
punctuation.definition.raw.markdown	#FFDFEE	—
markup.fenced_code.block.markdown	#74A39D	—
meta.separator.markdown	#999EE1	—
meta.link.inline.markdown	#9CEEEB	—
markup.underline.link	#A8FFEFAD	italic
meta.link.inline.markdown punctuation.definition.string	#83FF52	—
constant.other.reference.link	#9CEEEB	—
meta.link.reference.def markup.underline.link	#74A39D	italic
meta.link.reference.def punctuation.definition.constant	#75FFFAAD	—
punctuation.definition.list.begin	#A8FFDBAD	—
markup.bold.markdown	#74A39D	bold
markup.italic.markdown	#ABDADA	italic
markup.italic.markdown punctuation.definition	#ABDADA	italic
constant.language.boolean	#B3E27C	—
constant.language.null	#DCFF7A	—
entity.name.function	#3DD8FF	—
keyword.control.flow	#FF1998	—
keyword.control.export	#FF1998	—
keyword.control.import, keyword.control.from	#F272AA	—
keyword.operator	#FE8DA5	—
storage.type.function	#FB4293	—
storage.type.function.arrow	#FE8DA5	—
string.template	#A4FFE4	—
support.type.property-name.json	#EBB7F7	—
source.json string	#BAF7FC	—
source.json punctuation.separator, source.json punctuation.definition.dictionary, source.json punctuation.definition.array	#45898C	—
entity.name.tag	#6ACBD8	—
punctuation.definition.tag	#639196	—
support.class.component	#7AFFE2	—
entity.name.tag.yaml	#7C9C9E	—
source.yaml string	#BAF7FC	—
source.yaml punctuation.separator, source.yaml punctuation.definition.sequence	#45898C	—
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this	—
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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