Nightshade

Name: Nightshade
Author: Winning Software

Publisher: Winning SoftwareThemes in package: 1

A deep-purple dark theme with teal and pink accents, tuned for readable syntax highlighting across many languages.

Open in VS Code GitHub

VS Code preview

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

Nightshade — Nightshade

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#130518
activityBar.border#130518
activityBar.foreground#1ba891
activityBar.inactiveForeground#1ba89192
activityBarBadge.background#e91e63
activityBarBadge.foreground#ffffff
badge.background#1ba891
badge.foreground#130518
breadcrumb.activeSelectionForeground#e91e63
breadcrumb.background#130518
breadcrumb.focusForeground#1ba891
breadcrumb.foreground#8aaea8
button.background#1ba891
button.foreground#130518
button.hoverBackground#24c9ac
button.secondaryBackground#2a1230
button.secondaryForeground#eeffff
button.secondaryHoverBackground#3a1a42
diffEditor.insertedLineBackground#1ba89177
diffEditor.removedLineBackground#e91e6242
diffEditorGutter.insertedLineBackground#1ba89177
diffEditorGutter.removedLineBackground#e91e6242
dropdown.background#1c0722
dropdown.border#bdb7bf3e
dropdown.foreground#eeffff
editor.background#130518
editor.findMatchBackground#e91e6377
editor.findMatchHighlightBackground#e91e6344
editor.foreground#eeffff
editor.lineHighlightBackground#1c0722
editor.rangeHighlightBackground#1ba89122
editor.selectionBackground#1ba89155
editor.selectionHighlightBackground#1ba89133
editor.wordHighlightBackground#1ba89133
editor.wordHighlightStrongBackground#1ba89155
editorBracketHighlight.foreground1#1ba891
editorBracketHighlight.foreground2#e1b5f8
editorBracketHighlight.foreground3#08dde4
editorBracketHighlight.foreground4#748bcf
editorBracketHighlight.foreground5#e91e63
editorBracketHighlight.foreground6#e2c9ea
editorBracketHighlight.unexpectedBracket.foreground#ff5370
editorBracketMatch.background#1ba89144
editorBracketMatch.border#1ba891
editorCursor.foreground#e91e63
editorError.foreground#ff5370
editorGroup.border#2a1230
editorGroupHeader.tabsBackground#130518
editorGutter.addedBackground#1ba891
editorGutter.deletedBackground#e91e63
editorGutter.modifiedBackground#00eaff
editorHoverWidget.background#1c0722
editorHoverWidget.border#bdb7bf3e
editorIndentGuide.activeBackground1#1ba89177
editorIndentGuide.background1#2a1230
editorInfo.foreground#00eaff
editorLineNumber.activeForeground#e91e63
editorLineNumber.dimmedForeground#1ba891
editorLineNumber.foreground#1ba891
editorSuggestWidget.background#1c0722
editorSuggestWidget.border#bdb7bf3e
editorSuggestWidget.foreground#eeffff
editorSuggestWidget.highlightForeground#1ba891
editorSuggestWidget.selectedBackground#1ba89133
editorWarning.foreground#ffcb6b
editorWhitespace.foreground#3a1a42
editorWidget.background#1c0722
editorWidget.border#bdb7bf3e
focusBorder#1ba89188
gitDecoration.conflictingResourceForeground#ffcb6b
gitDecoration.deletedResourceForeground#e91e63
gitDecoration.ignoredResourceForeground#8aaea8
gitDecoration.modifiedResourceForeground#00eaff
gitDecoration.untrackedResourceForeground#1ba891
input.background#1c0722
input.border#bdb7bf3e
input.foreground#eeffff
input.placeholderForeground#8aaea8
inputOption.activeBorder#1ba891
inputValidation.errorBackground#3a0a18
inputValidation.errorBorder#e91e63
list.activeSelectionBackground#1ba89133
list.activeSelectionForeground#eeffff
list.focusBackground#1ba89133
list.highlightForeground#1ba891
list.hoverBackground#1c0722
list.inactiveSelectionBackground#2a1230
menu.background#130518
menu.border#bdb7bf3e
menu.foreground#1ba891
menu.selectionBackground#1ba89133
menu.selectionForeground#eeffff
panel.background#130518
panel.border#2a1230
panelTitle.activeBorder#e91e63
panelTitle.activeForeground#1ba891
panelTitle.inactiveForeground#8aaea8
peekView.border#1ba891
peekViewEditor.background#1c0722
peekViewResult.background#130518
peekViewTitle.background#1c0722
scrollbarSlider.activeBackground#1ba89177
scrollbarSlider.background#1ba89133
scrollbarSlider.hoverBackground#1ba89155
sideBar.background#130518
sideBar.border#2a1230
sideBar.foreground#c9d9d6
sideBarSectionHeader.background#1c0722
sideBarSectionHeader.foreground#1ba891
sideBarTitle.foreground#1ba891
statusBar.background#1c0722
statusBar.border#2a1230
statusBar.debuggingBackground#e91e63
statusBar.debuggingForeground#ffffff
statusBar.foreground#1ba891
statusBar.noFolderBackground#130518
statusBarItem.hoverBackground#1ba89122
statusBarItem.remoteBackground#e91e63
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1c0722
tab.activeBorder#e91e63
tab.activeForeground#eeffff
tab.border#130518
tab.hoverBackground#1c0722
tab.inactiveBackground#130518
tab.inactiveForeground#8aaea8
terminal.ansiBlack#130518
terminal.ansiBlue#748bcf
terminal.ansiBrightBlack#8aaea8
terminal.ansiBrightBlue#8ba0e0
terminal.ansiBrightCyan#00eaff
terminal.ansiBrightGreen#24c9ac
terminal.ansiBrightMagenta#e2c9ea
terminal.ansiBrightRed#ff5370
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd88a
terminal.ansiCyan#08dde4
terminal.ansiGreen#1ba891
terminal.ansiMagenta#e1b5f8
terminal.ansiRed#e91e63
terminal.ansiWhite#eeffff
terminal.ansiYellow#ffcb6b
terminal.foreground#eeffff
titleBar.activeBackground#130518
titleBar.activeForeground#1ba891
titleBar.inactiveBackground#130518
titleBar.inactiveForeground#8aaea8
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.block.documentation.phpdoc.php, comment.line, comment.block, string.comment	#797979	—
keyword.other.phpdoc, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, comment keyword	#8aaea8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, storage.type.class, storage.modifier.extends, storage.modifier, keyword.other.use, keyword.other.namespace, keyword.control.declare, storage.type.const, storage.type.function, storage.type, storage.type.var, keyword.other.phpdoc	#e1b5f8	—
keyword.other.type, support.type.primitive, support.type.builtin, entity.name.type.alias, meta.type.annotation entity.name.type	#00eaff	—
support.attribute.php, entity.name.function.decorator, meta.decorator punctuation.decorator, punctuation.decorator	#47c69e	—
punctuation.separator.colon.php, punctuation.separator, punctuation.terminator, punctuation.separator.key-value	#797979	—
meta.attribute.php	#a66cab	—
meta.class.php, punctuation.definition.class	#83aab5	—
support.other.namespace, entity.name.namespace	#6d8f89	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.class.php, support.class.builtin, support.class, support.type	#1ba891	—
entity.name.function, entity.name.function.method, support.function, meta.function-call entity.name.function, variable.function	#08dde4	—
keyword.control, keyword.other.new, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.control.flow, keyword.control.import, keyword.control.from	#748bcf	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison	#89b8c2	—
variable.language.this, variable.language.self, variable.language.super, variable.language.special	#00d2b2	—
string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.unquoted, punctuation.definition.string	#845195	—
constant.character.escape, constant.other.placeholder	#00eaff	—
punctuation.definition.template-expression, punctuation.section.embedded	#748bcf	—
entity.name.variable.parameter, variable.parameter, variable.parameter.function-call	#00eaff	—
variable, variable.other, variable.other.readwrite, meta.definition.variable entity.name.function	#d6c7e8	—
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name	#9fd6c9	—
variable.other.property.promoted-property.php, meta.function.parameter.promoted-property.php variable.other	#9fd6c9	—
constant.numeric.decimal.php, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex	#5b8cf0	—
constant.other.php, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.other.constant	#9d86ff	—
entity.name.tag, punctuation.definition.tag	#748bcf	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx	#47c69e	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css	#1ba891	—
support.type.property-name.css, support.type.property-name.scss	#08dde4	—
markup.heading, entity.name.section.markdown	#1ba891	bold
markup.bold	#e1b5f8	bold
markup.italic	#e2c9ea	italic
markup.underline.link, string.other.link.title.markdown	#08dde4	—
markup.inline.raw, markup.fenced_code.block	#00d2b2	—
support.type.property-name.json	#1ba891	—
invalid, invalid.illegal	#ff5370	—
storage.type.class.ts, storage.type.class.tsx, storage.type.interface.ts, storage.type.enum.ts, storage.type.type.ts, storage.type.namespace.ts, storage.type.function.ts, storage.type.function.arrow.ts, storage.type.ts, storage.type.js, storage.modifier.ts, storage.modifier.async.ts, keyword.control.export.ts, keyword.control.import.ts, keyword.control.as.ts, keyword.control.default.ts	#e1b5f8	—
entity.name.type.class.ts, entity.name.type.class.tsx, entity.name.type.interface.ts, entity.name.type.alias.ts, entity.name.type.enum.ts, entity.name.type.module.ts, entity.name.type.ts, support.class.builtin.ts, support.type.builtin.ts	#1ba891	—
support.type.primitive.ts, meta.type.annotation.ts entity.name.type, meta.type.parameters.ts entity.name.type, meta.return.type.ts entity.name.type, keyword.operator.type.annotation.ts	#00eaff	—
entity.name.function.ts, entity.name.function.tsx, meta.function-call.ts entity.name.function, support.function.dom.ts	#08dde4	—
meta.decorator.ts, meta.decorator.tsx, entity.name.function.decorator.ts, punctuation.decorator.ts	#47c69e	—
constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.null.ts, constant.language.undefined.ts, constant.language.nan.ts, support.variable.property.ts	#9d86ff	—
meta.object-literal.key.ts, variable.object.property.ts, meta.definition.property.ts variable	#9fd6c9	—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, meta.import variable.other.readwrite, meta.export variable.other.readwrite	#e1b5f8	—
entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, text.html.vue-html entity.name.tag, entity.name.tag.other.html.vue	#748bcf	—
entity.other.attribute-name.html.vue, meta.directive.vue entity.other.attribute-name.html, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.separator.key-value.html.vue	#47c69e	—
punctuation.definition.interpolation.begin.html.vue, punctuation.definition.interpolation.end.html.vue	#748bcf	—