Gruber Fruity Theme Pack

Name: Gruber Fruity Theme Pack
Author: Smups

Publisher: SmupsThemes in package: 11

minimalist fruity light and dark themes inspired by Gruber

Open in VS Code GitHub

Color themes

VS Code preview

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

Gruber Fruity Theme Pack — Gruber Apple Dark 🍎

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.activeBorder#FF264E
activityBar.background#181818
activityBar.foreground#FF264E
activityBar.inactiveForeground#dddddd
badge.background#FF264E
badge.foreground#181818
breadcrumb.activeSelectionForeground#73c936
breadcrumb.focusForeground#FF264E
button.background#FF264E
button.foreground#181818
button.hoverBackground#FF264E
checkbox.background#181818
checkbox.border#FF264E
checkbox.foreground#FF264E
diffEditorGutter.insertedLineBackground#73c936
editor.background#181818
editor.foreground#dddddd
editor.selectionBackground#cccccc22
editorBracketHighlight.foreground1#dddddd
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#dddddd
editorBracketHighlight.unexpectedBracket.foreground#FF264E
editorCursor.foreground#FF264E
editorGutter.addedBackground#73c936
editorGutter.deletedBackground#FF264E
editorGutter.modifiedBackground#FF264E
editorLineNumber.activeForeground#FF264E
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#181818
editorSuggestWidget.highlightForeground#FF264E
focusBorder#FF264E
foreground#dddddd
icon.foreground#FF264E
list.activeSelectionBackground#FF264E
list.activeSelectionForeground#181818
list.activeSelectionIconForeground#181818
list.focusHighlightForeground#181818
list.highlightForeground#FF264E
sash.hoverBorder#FF264E
sideBar.background#282828
sideBarSectionHeader.background#282828
sideBarSectionHeader.foreground#FF264E
statusBar.background#FF264E
statusBar.debuggingBackground#73c936
statusBar.focusBorder#dddddd
statusBar.foreground#181818
statusBar.noFolderBackground#FF264E
statusBar.noFolderForeground#181818
statusBarItem.errorBackground#9e95c7
statusBarItem.errorForeground#181818
statusBarItem.focusBorder#dddddd
statusBarItem.remoteBackground#00d5ff
statusBarItem.remoteForeground#181818
statusBarItem.warningBackground#282828
statusBarItem.warningForeground#FF264E
tab.activeBorder#FF264E
tab.unfocusedActiveBorder#181818
textCodeBlock.background#181818
textLink.activeForeground#73c936
textLink.foreground#FF264E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#dddddd	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type	#FF264E	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#FF264E
string	#73c936	—
constant, variable.other.constant	#9e95c7	—
variable.language.self, variable.language.super, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls	#73c936	italic
meta.attribute, meta.macro, support.function.macro	#00d5ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#dddddd	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#FF264E
entity.name.type.result, entity.name.type.option	#FF264E	bold
entity.name.type.lifetime	#9e95c7
support.variable.magic.python, support.function.magic.python	#00d5ff	italic
meta.function.decorator.python	#00d5ff
punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.section.function.begin.python, punctuation.section.function.lambda.begin.python, punctuation.section.class.begin.python, punctuation.separator.annotation.result.python, invalid.deprecated.semicolon.python	#FF264E
keyword.other.unit.hexadecimal	#9e95c7
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#FF264E
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#00d5ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#FF264E
storage.modifier.array.bracket.square.c	#dddddd
punctuation.separator.namespace.access.cpp	#FF264E
storage.modifier.import.java, storage.modifier.package.java	#dddddd
storage.type.annotation.java, punctuation.definition.annotation.java	#00d5ff
markup.heading	#FF264E	bold
markup.italic	#9e95c7	italic
markup.bold	#9e95c7	bold
markup.quote	#FF264E
support.type.property-name.json	#FF264E	—
meta.tag.xml	#FF264E	—
meta.tag.table.toml	#FF264E	bold
keyword.local.lua	#FF264E	bold
meta.tag.metadata.doctype.html	#00d5ff
entity.name.tag.html	#FF264E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FF264E	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#9e95c7
punctuation.separator.key-value.css	#FF264E
keyword.operator.arithmetic.css	#FF264E
support.function.attr.css, support.function.calc.css, support.function.conic-gradient.css, support.function.counter.css, support.function.cubic-bezier.css, support.function.hsl.css, support.function.hsla.css, support.function.linear-gradient.css, support.function.max.css, support.function.min.css, support.function.radial-gradient.css, support.function.repeating-conic-gradient.css, support.function.repeating-linear-gradient.css, support.function.repeating-radial-gradient.css, support.function.rgb.css, support.function.rgba.css, support.function.var.css	#00d5ff
keyword.package.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.var.go, keyword.import.go, keyword.interface.go, keyword.map.go, keyword.channel.go, keyword.const.go	#FF264E	bold
storage.type.string.go, storage.type.int.go, storage.type.error.go, storage.type.byte.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.rune.go, storage.type.uintptr.go	#FF264E
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#FF264E	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#FF264E
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#FF264E
support.function.builtin.zig	#00d5ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#9e95c7
variable.constant.error.zig	#dddddd	underline

VS Code preview

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

Gruber Fruity Theme Pack — Gruber Blueberry Light 🫐

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#4400b3
activityBar.background#fefefe
activityBar.foreground#4400b3
activityBar.inactiveForeground#181818
badge.background#4400b3
badge.foreground#fefefe
breadcrumb.activeSelectionForeground#5caf21
breadcrumb.focusForeground#4400b3
button.background#4400b3
button.foreground#fefefe
button.hoverBackground#4400b3
checkbox.background#fefefe
checkbox.border#4400b3
checkbox.foreground#4400b3
diffEditorGutter.insertedLineBackground#5caf21
editor.background#fefefe
editor.foreground#181818
editor.selectionBackground#18181822
editorBracketHighlight.foreground1#181818
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#181818
editorBracketHighlight.unexpectedBracket.foreground#4400b3
editorCursor.foreground#4400b3
editorGutter.addedBackground#5caf21
editorGutter.deletedBackground#4400b3
editorGutter.modifiedBackground#4400b3
editorLineNumber.activeForeground#4400b3
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#fefefe
editorSuggestWidget.highlightForeground#4400b3
focusBorder#4400b3
foreground#181818
icon.foreground#4400b3
list.activeSelectionBackground#4400b3
list.activeSelectionForeground#fefefe
list.activeSelectionIconForeground#fefefe
list.focusHighlightForeground#fefefe
list.highlightForeground#4400b3
sash.hoverBorder#4400b3
sideBar.background#efefef
sideBarSectionHeader.background#efefef
sideBarSectionHeader.foreground#4400b3
statusBar.background#4400b3
statusBar.debuggingBackground#5caf21
statusBar.focusBorder#181818
statusBar.foreground#fefefe
statusBar.noFolderBackground#4400b3
statusBar.noFolderForeground#fefefe
statusBarItem.errorBackground#d16693
statusBarItem.errorForeground#fefefe
statusBarItem.focusBorder#181818
statusBarItem.remoteBackground#0088ff
statusBarItem.remoteForeground#fefefe
statusBarItem.warningBackground#efefef
statusBarItem.warningForeground#4400b3
tab.activeBorder#4400b3
tab.unfocusedActiveBorder#fefefe
textCodeBlock.background#fefefe
textLink.activeForeground#5caf21
textLink.foreground#4400b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#181818	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type, keyword.operator.instanceof.java	#4400b3	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#4400b3
string	#5caf21	—
constant, variable.other.constant	#d16693	—
variable.language.self, variable.language.super, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls	#5caf21	italic
meta.attribute, meta.macro, support.function.macro	#0088ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#181818	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#4400b3
entity.name.type.result, entity.name.type.option	#4400b3	bold
entity.name.type.lifetime	#d16693
support.variable.magic.python, support.function.magic.python	#0088ff	italic
meta.function.decorator.python	#0088ff
punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.section.function.begin.python, punctuation.section.function.lambda.begin.python, punctuation.section.class.begin.python, punctuation.separator.annotation.result.python, invalid.deprecated.semicolon.python	#4400b3
keyword.other.unit.hexadecimal	#d16693
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#4400b3
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#0088ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#4400b3
storage.modifier.array.bracket.square.c	#181818
punctuation.separator.namespace.access.cpp	#4400b3
storage.modifier.import.java, storage.modifier.package.java	#181818
storage.type.annotation.java, punctuation.definition.annotation.java	#0088ff
markup.heading	#4400b3	bold
markup.italic	#d16693	italic
markup.bold	#d16693	bold
markup.quote	#4400b3
support.type.property-name.json	#4400b3	—
meta.tag.xml	#4400b3	—
meta.tag.table.toml	#4400b3	bold
keyword.local.lua	#4400b3	bold
meta.tag.metadata.doctype.html	#0088ff
entity.name.tag.html	#4400b3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#4400b3	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#d16693
punctuation.separator.key-value.css	#4400b3
keyword.operator.arithmetic.css	#4400b3
support.function.attr.css, support.function.calc.css, support.function.conic-gradient.css, support.function.counter.css, support.function.cubic-bezier.css, support.function.hsl.css, support.function.hsla.css, support.function.linear-gradient.css, support.function.max.css, support.function.min.css, support.function.radial-gradient.css, support.function.repeating-conic-gradient.css, support.function.repeating-linear-gradient.css, support.function.repeating-radial-gradient.css, support.function.rgb.css, support.function.rgba.css, support.function.var.css	#0088ff
keyword.package.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.var.go, keyword.import.go, keyword.interface.go, keyword.map.go, keyword.channel.go, keyword.const.go	#4400b3	bold
storage.type.string.go, storage.type.int.go, storage.type.error.go, storage.type.byte.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.rune.go, storage.type.uintptr.go	#4400b3
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#4400b3	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#4400b3
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#4400b3
support.function.builtin.zig	#0088ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#d16693
variable.constant.error.zig	#181818	underline

VS Code preview

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

Gruber Fruity Theme Pack — Gruber Cherry Light 🍒

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#d61e4c
activityBar.background#fefefe
activityBar.foreground#d61e4c
activityBar.inactiveForeground#181818
badge.background#d61e4c
badge.foreground#fefefe
breadcrumb.activeSelectionForeground#5caf21
breadcrumb.focusForeground#d61e4c
button.background#d61e4c
button.foreground#fefefe
button.hoverBackground#d61e4c
checkbox.background#fefefe
checkbox.border#d61e4c
checkbox.foreground#d61e4c
diffEditorGutter.insertedLineBackground#5caf21
editor.background#fefefe
editor.foreground#181818
editor.selectionBackground#18181822
editorBracketHighlight.foreground1#181818
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#181818
editorBracketHighlight.unexpectedBracket.foreground#d61e4c
editorCursor.foreground#d61e4c
editorGutter.addedBackground#5caf21
editorGutter.deletedBackground#d61e4c
editorGutter.modifiedBackground#d61e4c
editorLineNumber.activeForeground#d61e4c
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#fefefe
editorSuggestWidget.highlightForeground#d61e4c
focusBorder#d61e4c
foreground#181818
icon.foreground#d61e4c
list.activeSelectionBackground#d61e4c
list.activeSelectionForeground#fefefe
list.activeSelectionIconForeground#fefefe
list.focusHighlightForeground#fefefe
list.highlightForeground#d61e4c
sash.hoverBorder#d61e4c
sideBar.background#efefef
sideBarSectionHeader.background#efefef
sideBarSectionHeader.foreground#d61e4c
statusBar.background#d61e4c
statusBar.debuggingBackground#5caf21
statusBar.focusBorder#181818
statusBar.foreground#fefefe
statusBar.noFolderBackground#d61e4c
statusBar.noFolderForeground#fefefe
statusBarItem.errorBackground#938bb7
statusBarItem.errorForeground#fefefe
statusBarItem.focusBorder#181818
statusBarItem.remoteBackground#0088ff
statusBarItem.remoteForeground#fefefe
statusBarItem.warningBackground#efefef
statusBarItem.warningForeground#d61e4c
tab.activeBorder#d61e4c
tab.unfocusedActiveBorder#fefefe
textCodeBlock.background#fefefe
textLink.activeForeground#5caf21
textLink.foreground#d61e4c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#181818	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type, keyword.operator.instanceof.java	#d61e4c	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#d61e4c
string	#5caf21	—
constant, variable.other.constant	#938bb7	—
variable.language.self, variable.language.super, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls	#5caf21	italic
meta.attribute, meta.macro, support.function.macro	#0088ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#181818	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#d61e4c
entity.name.type.result, entity.name.type.option	#d61e4c	bold
entity.name.type.lifetime	#938bb7
support.variable.magic.python, support.function.magic.python	#0088ff	italic
meta.function.decorator.python	#0088ff
punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.section.function.begin.python, punctuation.section.function.lambda.begin.python, punctuation.section.class.begin.python, punctuation.separator.annotation.result.python, invalid.deprecated.semicolon.python	#d61e4c
keyword.other.unit.hexadecimal	#938bb7
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#d61e4c
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#0088ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#d61e4c
storage.modifier.array.bracket.square.c	#181818
punctuation.separator.namespace.access.cpp	#d61e4c
storage.modifier.import.java, storage.modifier.package.java	#181818
storage.type.annotation.java, punctuation.definition.annotation.java	#0088ff
markup.heading	#d61e4c	bold
markup.italic	#938bb7	italic
markup.bold	#938bb7	bold
markup.quote	#d61e4c
support.type.property-name.json	#d61e4c	—
meta.tag.xml	#d61e4c	—
meta.tag.table.toml	#d61e4c	bold
keyword.local.lua	#d61e4c	bold
meta.tag.metadata.doctype.html	#0088ff
entity.name.tag.html	#d61e4c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#d61e4c	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#938bb7
punctuation.separator.key-value.css	#d61e4c
keyword.operator.arithmetic.css	#d61e4c
support.function.attr.css, support.function.calc.css, support.function.conic-gradient.css, support.function.counter.css, support.function.cubic-bezier.css, support.function.hsl.css, support.function.hsla.css, support.function.linear-gradient.css, support.function.max.css, support.function.min.css, support.function.radial-gradient.css, support.function.repeating-conic-gradient.css, support.function.repeating-linear-gradient.css, support.function.repeating-radial-gradient.css, support.function.rgb.css, support.function.rgba.css, support.function.var.css	#0088ff
keyword.package.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.var.go, keyword.import.go, keyword.interface.go, keyword.map.go, keyword.channel.go, keyword.const.go	#d61e4c	bold
storage.type.string.go, storage.type.int.go, storage.type.error.go, storage.type.byte.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.rune.go, storage.type.uintptr.go	#d61e4c
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#d61e4c	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#d61e4c
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#d61e4c
support.function.builtin.zig	#0088ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#938bb7
variable.constant.error.zig	#181818	underline

VS Code preview

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

Gruber Fruity Theme Pack — Gruber Grape Dark 🍇

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.activeBorder#c86bff
activityBar.background#181818
activityBar.foreground#c86bff
activityBar.inactiveForeground#dddddd
badge.background#c86bff
badge.foreground#181818
breadcrumb.activeSelectionForeground#73c936
breadcrumb.focusForeground#c86bff
button.background#c86bff
button.foreground#181818
button.hoverBackground#c86bff
checkbox.background#181818
checkbox.border#c86bff
checkbox.foreground#c86bff
diffEditorGutter.insertedLineBackground#73c936
editor.background#181818
editor.foreground#dddddd
editor.selectionBackground#cccccc22
editorBracketHighlight.foreground1#dddddd
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#dddddd
editorBracketHighlight.unexpectedBracket.foreground#c86bff
editorCursor.foreground#c86bff
editorGutter.addedBackground#73c936
editorGutter.deletedBackground#c86bff
editorGutter.modifiedBackground#c86bff
editorLineNumber.activeForeground#c86bff
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#181818
editorSuggestWidget.highlightForeground#c86bff
focusBorder#c86bff
foreground#dddddd
icon.foreground#c86bff
list.activeSelectionBackground#c86bff
list.activeSelectionForeground#181818
list.activeSelectionIconForeground#181818
list.focusHighlightForeground#181818
list.highlightForeground#c86bff
sash.hoverBorder#c86bff
sideBar.background#282828
sideBarSectionHeader.background#282828
sideBarSectionHeader.foreground#c86bff
statusBar.background#c86bff
statusBar.debuggingBackground#73c936
statusBar.focusBorder#dddddd
statusBar.foreground#181818
statusBar.noFolderBackground#c86bff
statusBar.noFolderForeground#181818
statusBarItem.errorBackground#e9b5cb
statusBarItem.errorForeground#181818
statusBarItem.focusBorder#dddddd
statusBarItem.remoteBackground#00d5ff
statusBarItem.remoteForeground#181818
statusBarItem.warningBackground#282828
statusBarItem.warningForeground#c86bff
tab.activeBorder#c86bff
tab.unfocusedActiveBorder#181818
textCodeBlock.background#181818
textLink.activeForeground#73c936
textLink.foreground#c86bff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#dddddd	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type	#c86bff	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#c86bff
string	#73c936	—
constant, variable.other.constant	#e9b5cb	—
variable.language.self, variable.language.super, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls	#73c936	italic
meta.attribute, meta.macro, support.function.macro	#00d5ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#dddddd	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#c86bff
entity.name.type.result, entity.name.type.option	#c86bff	bold
entity.name.type.lifetime	#e9b5cb
support.variable.magic.python, support.function.magic.python	#00d5ff	italic
meta.function.decorator.python	#00d5ff
punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.section.function.begin.python, punctuation.section.function.lambda.begin.python, punctuation.section.class.begin.python, punctuation.separator.annotation.result.python, invalid.deprecated.semicolon.python	#c86bff
keyword.other.unit.hexadecimal	#e9b5cb
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#c86bff
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#00d5ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#c86bff
storage.modifier.array.bracket.square.c	#dddddd
punctuation.separator.namespace.access.cpp	#c86bff
storage.modifier.import.java, storage.modifier.package.java	#dddddd
storage.type.annotation.java, punctuation.definition.annotation.java	#00d5ff
markup.heading	#c86bff	bold
markup.italic	#e9b5cb	italic
markup.bold	#e9b5cb	bold
markup.quote	#c86bff
support.type.property-name.json	#c86bff	—
meta.tag.xml	#c86bff	—
meta.tag.table.toml	#c86bff	bold
keyword.local.lua	#c86bff	bold
meta.tag.metadata.doctype.html	#00d5ff
entity.name.tag.html	#c86bff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#c86bff	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#e9b5cb
punctuation.separator.key-value.css	#c86bff
keyword.operator.arithmetic.css	#c86bff
support.function.attr.css, support.function.calc.css, support.function.conic-gradient.css, support.function.counter.css, support.function.cubic-bezier.css, support.function.hsl.css, support.function.hsla.css, support.function.linear-gradient.css, support.function.max.css, support.function.min.css, support.function.radial-gradient.css, support.function.repeating-conic-gradient.css, support.function.repeating-linear-gradient.css, support.function.repeating-radial-gradient.css, support.function.rgb.css, support.function.rgba.css, support.function.var.css	#00d5ff
keyword.package.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.var.go, keyword.import.go, keyword.interface.go, keyword.map.go, keyword.channel.go, keyword.const.go	#c86bff	bold
storage.type.string.go, storage.type.int.go, storage.type.error.go, storage.type.byte.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.rune.go, storage.type.uintptr.go	#c86bff
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#c86bff	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#c86bff
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#c86bff
support.function.builtin.zig	#00d5ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#e9b5cb
variable.constant.error.zig	#dddddd	underline