Theodora

Name: Theodora
Author: ckpedersen

Publisher: ckpedersenThemes in package: 5

Open in VS Code

Color themes

VS Code preview

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

Theodora — Theodora's Material

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#2d3748
badge.background#C53030
badge.foreground#F7FAFC
breadcrumb.foreground#5d6e7a66
dropdown.background#242c3a
editor.background#2d3748
editor.foreground#d4d4d4
editor.lineHighlightBackground#00000022
editor.lineHighlightBorder#ff000000
editor.selectionBackground#a0aec0
editorCodeLens.foreground#4A5568
editorCursor.foreground#ffcc00
editorGroupHeader.tabsBackground#2d3748
editorGutter.addedBackground#0000
editorGutter.deletedBackground#0000
editorGutter.modifiedBackground#0000
editorLineNumber.activeForeground#fffc
editorLineNumber.foreground#4A5568
editorOverviewRuler.addedForeground#0000
editorOverviewRuler.border#0000
editorOverviewRuler.bracketMatchForeground#0000
editorOverviewRuler.deletedForeground#0000
editorOverviewRuler.findMatchForeground#0000
editorOverviewRuler.infoForeground#0000
editorOverviewRuler.rangeHighlightForeground#0000
editorOverviewRuler.selectionHighlightForeground#0000
editorOverviewRuler.wordHighlightForeground#0000
editorOverviewRuler.wordHighlightStrongForeground#0000
editorWidget.background#2d3748
editorWidget.border#0003
foreground#718096
githd.blameView.info#5D6E7A
gitlens.lineHighlightOverviewRulerColor#0000
gitlens.trailingLineForegroundColor#4A5568
input.background#242c3a
list.activeSelectionBackground#ff000000
list.activeSelectionForeground#CBD5E0
list.errorForeground#ff0000
list.highlightForeground#CBD5E0
list.hoverBackground#283040
list.inactiveSelectionBackground#ff000000
list.warningForeground#ff0000
listFilterWidget.background#C53030
panel.border#283040
scrollbar.shadow#ff000000
scrollbarSlider.background#ffffff11
selection.background#a0aec0
sideBar.background#2d3748
sideBar.foreground#718096
sideBarSectionHeader.background#2d3748
statusBar.background#2d3748
statusBar.foreground#718096
tab.activeBackground#2d3748
tab.activeBorder#ff8383
tab.border#ff000000
tab.inactiveBackground#2d3748
tab.inactiveForeground#5d6e7a
titleBar.activeBackground#2d3748
titleBar.activeForeground#718096
titleBar.background#2d3748
titleBar.inactiveBackground#2d3748
titleBar.inactiveForeground#4A5568
tree.indentGuidesStroke#ffffff11
widget.shadow#0006

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
	#D4D4D4	—
invalid	#f44747	—
variable	#ffffff	—
variable.predefined	#ea9b80	—
variable.parameter	#d4d4d4	—
identifier	#d4d4d4	—
identifier.const	#BD9AC2	—
identifier.const.class	#75AAFF	—
identifier.class	#75AAFF	—
identifier.const.tag	#75AAFF	—
identifier.tag	#75AAFF	—
identifier.def	#75AAFF	—
identifier.key	#a7c9de	—
entity.name.type	#d4d4d4	—
entity.name.function	#d4d4d4	—
storage.type.js.jsx	#ea9b80	—
entity.name.property	#75AAFF	—
entity.name.tag	#ff8383	—
storage.type.function	#ea9b80	—
storage.type.class	#ea9b80	—
comment	#4A5568	—
operator	#ea9b80	—
number	#598DA6	—
number.hex	#598DA6	—
numeric.css	#598DA6	—
regexp	#FD9231	—
annotation	#cc6666	—
type	#3DC9B0	—
boolean	#598DA6	—
constant.numeric	#ff8383	—
delimiter	#DCDCDC	—
delimiter.html	#808080	—
delimiter.xml	#808080	—
tag	#D9BB72	—
meta.scss	#A79873	—
meta.tag	#93ddfd	—
entity.other.attribute-name.js.jsx	#a7c9de	—
metatag	#DD6A6F	—
metatag.content.html	#9CDCFE	—
metatag.html	#569CD6	—
metatag.xml	#569CD6	—
key	#a7c9de	—
string.key.json	#9CDCFE	—
string.value.json	#CE9178	—
attribute.name	#a7c9de	—
attribute.value	#598DA6	—
attribute.value.number.css	#598DA6	—
attribute.value.unit.css	#598DA6	—
attribute.value.hex.css	#598DA6	—
string	#7da4b7	—
string.sql	#B7DE95	—
keyword, storage.type.js	#93ddfd	—
keyword.flow	#ea9b80	—
keyword.json	#ea9b80	—
keyword.flow.scss	#ea9b80	—
operator.scss	#909090	—
operator.sql	#778899	—
operator.swift	#909090	—
predefined.sql	#FF00FF	—
entity.name.selector.css	#D9BB72	—
support.type.property-name.css	#75AAFF	—
meta.object-literal.key	#ffe484	—
support.type.property-name.json, support.function.js.jsx, entity.name.function	#d9a9ff	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.section.property-list.begin.bracket.curly.css, text.html.derivative punctuation.terminator.rule.css, constant.other.color.rgb-value.hex.css, meta.function.color.css, punctuation.section.property-list.end.bracket.curly.css, source.json, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, source.vue	#93ddfd	—
string.quoted.double.html, string.quoted.double.json, string	#b5f4a5	—
meta.selector.css, meta.tag entity.other.attribute-name.html, support.type.property-name.css, entity.other.attribute-name.js.jsx, entity.name.function	#ffe484	—
constant.language.boolean, keyword, storage.type.js.jsx, storage.type.function	#ff8383	—
text.html.derivative, source.css	#ffffff	—

VS Code preview

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

Theodora — Theodora's Pure

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.background#27283f
editor.background#27283f
editor.foreground#f2f2f7
editor.inactiveSelectionBackground#3C3C3C
editor.lineHighlightBackground#9999ff0a
editor.selectionBackground#4C4C4C
editor.selectionForeground#f9f9f9
editorBracketMatch.border#8484ff
editorCursor.background#ff4d4d
editorCursor.foreground#ff4d4d
editorGroup.emptyBackground#ff0000
editorGroupHeader.tabsBackground#d3d3e4
editorGutter.background#27283f
editorIndentGuide.background#F1826025
editorLineNumber.activeForeground#f2f2f7
editorLineNumber.foreground#474774
editorOverviewRuler.addedForeground#141414
editorOverviewRuler.border#141414
editorRuler.foreground#141414
editorSuggestWidget.background#2b2b49
editorSuggestWidget.border#8484ff
editorSuggestWidget.foreground#d3d3e4
editorSuggestWidget.highlightForeground#f9f9f9
editorSuggestWidget.selectedBackground#0063e1
editorWhitespace.foreground#F18260
editorWidget.background#2b2b49
editorWidget.border#5757ee
editorWidget.foreground#d3d3e4
icon.foreground#5757ee
input.background#f2f2f7
input.foreground#232323
list.activeSelectionBackground#5655f3
list.hoverBackground#ffffff00
list.inactiveSelectionBackground#c0c1d8
listFilterWidget.background#ff0000
panel.background#27283f
panel.border#ff0000
scrollbar.shadow#ffffff00
scrollbarSlider.background#ffffff10
sideBar.background#d3d3e4
sideBar.foreground#232323
sideBarSectionHeader.background#d3d3e4
statusBar.background#d3d3e4
statusBar.foreground#232323
tab.activeBackground#27283f
tab.activeBorder#00000000
tab.activeBorderTop#5757ee
tab.activeForeground#fff
tab.border#d3d3e4
tab.hoverBackground#27283f
tab.inactiveBackground#d3d3e4
tab.inactiveForeground#61629e
titleBar.activeBackground#d9d9d9
titleBar.activeForeground#525252
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#f9f9f9	—
source.ruby, text.html.erb, source.json.comments, source.css, source.js	#5d5d97	—
comment	#5d5d97	italic
storage	#b197fc
invalid.deprecated	#dbb7b0	italic underline
invalid.illegal	#F8F8F8	—
-----------------------------------	—	—
text source	—	—
text.html.ruby source	—	—
entity.other.inherited-class	#e599f7	italic
string source	#e4efb9
string constant	#e7f1ba	—
string.regexp	#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#CF7D34	—
support.constant	#da7f5e
meta.preprocessor.c, support.class.ruby	#e599f7	—
meta.preprocessor.c keyword	#c0cfe0	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string	#494949	—
declaration.tag, declaration.tag entity, meta.tag entity	#e599f7	—
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity	#f783ac	—
meta.selector.css entity.name.tag	#d7b67c	—
meta.selector.css entity.other.attribute-name.tag.pseudo-class	#a0ab7d	—
meta.selector.css entity.other.attribute-name.id	#8B98AB	—
meta.selector.css entity.other.attribute-name.class	#ac8350	—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#faf0a8	—
meta.preprocessor.at-rule keyword.control.at-rule	#8693A5	—
meta.constructor.argument.css	#a0ab7d	—
meta.diff, meta.diff.header, meta.separator	#F8F8F8	italic
markup.deleted	#F8F8F8	—
markup.changed	#F8F8F8	—
markup.inserted	#F8F8F8	—
markup.list	#faf0a8	—
markup.heading	#da7f5e	—
markup.deleted.git_gutter	#da7f5e	—
markup.inserted.git_gutter	#a0ab7d	—
markup.changed.git_gutter	#889ab5	—
markup.ignored.git_gutter	#565656	—
markup.untracked.git_gutter	#565656	—
deco.folding	#6d7d78	—
comment	#5d5d97	italic
constant	#ffa94d	—
entity	#b197fc
keyword	#b197fc
string	#ffe066
support	#ac98ad
variable	#e599f7	—
invalid.deprecated	#dbb7b0	italic underline
source invalid.deprecated	—	italic underline
invalid.illegal	#f9f9f9	—
-----------------------------------	—	—
meta.embedded.block, punctuation.whitespace.embedded	—	—
meta.embedded.line	—	—
entity.other.inherited-class	#b197fc	italic
string meta.embedded	#e4efb9
string constant	#e7f1ba	—
string.regexp	#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#CF7D34	—
string variable	#ffffff	—
support.function	#74c0fc
support.constant	#da7f5e
meta.preprocessor.c, source.swift meta.preprocessor	#9da7b6	—
meta.preprocessor.c keyword, source.swift meta.preprocessor keyword	#c0cfe0	—
meta.tag.metadata.doctype, meta.tag.metadata.doctype entity, meta.tag.metadata.doctype string, meta.tag.metadata.processing.xml, meta.tag.metadata.processing.xml entity, meta.tag.metadata.processing.xml string	#494949	—
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity	#ffffff	—
declaration.tag.inline, declaration.tag.inline entity, meta.tag.inline, meta.tag.inline entity	#fff	—
meta.selector.css entity.name.tag	#d7b67c	—
meta.selector.css entity.other.attribute-name.tag.pseudo-class	#a0ab7d	—
meta.selector.css entity.other.attribute-name.id	#8B98AB	—
meta.selector.css entity.other.attribute-name.class	#ac8350	—
support.type.property-name.css	#ffffff	—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#faf0a8	—
meta.preprocessor.at-rule keyword.control.at-rule	#8693A5	—
meta.property-value support.constant.named-color.css, meta.property-value constant	#ffa94d	—
meta.constructor.argument.css	#a0ab7d	—
meta.diff, meta.diff.header, meta.separator, meta.diff.range, meta.diff.index	#F8F8F8	italic
markup.deleted	#F8F8F8	—
markup.changed	#F8F8F8	—
markup.inserted	#F8F8F8	—
markup.list	#faf0a8	—
markup.heading	#da7f5e	—
markup.raw.block	—	—
meta.test1	—	—
meta.test2	—	—
meta.test3	—	—
meta.test4	—	—
source.ruby	#74c0fc	bold
variable.other.readwrite.instance.ruby, constant.other.symbol.hashkey.ruby	#f783ac	—
source.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#5d5d97
support.type.property-name.json.comments, support	#b197fc	—
entity	#e599f7	—
variable.other.property.js	#f783ac	—
variable.language.this.js	#fff	—
meta.object-literal.key.js	#f783ac	—
variable.language.super.js	#8ce99a	—
entity.name.function.js	#74c0fc	—
support.class.component.js, meta.tag	#e599f7	—
source entity.other.attribute-name	#ffa94d	—
meta.embedded.expression.js	#66d9e8	—
meta.embedded.expression.js variable	#ffffff	—
source entity.name.tag	#	—
entity.name.function.tagged-template.js	#74c0fc	—
entity.other.inherited-class.ruby	#ffe066	—
keyword.operator.other.ruby	#fff	—
entity.name.function.ruby	#74c0fc	—
constant.other.symbol.ruby	#8ce99a	—
keyword.other.special-method.ruby	#74c0fc	—
text.html.erb, punctuation.section.embedded.end.erb source.ruby, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, punctuation.separator.method.ruby	#fff	—
entity.other.attribute-name.html	#ffa94d	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, text.html.erb meta.tag entity	#e599f7	—
punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, punctuation.section.embedded.end.erb source.ruby, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#5d5d97	—

VS Code preview

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

Theodora — Theodora's Scrimba

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.activeBackground#282f33
activityBar.background#282f33
editor.background#282f33
editor.foreground#d4d4d4
editor.lineHighlightBackground#00000022
editor.lineHighlightBorder#ff000000
editorGroupHeader.tabsBackground#282f33
editorGroupHeader.tabsBorder#333F47
editorGutter.addedBackground#0000
editorGutter.deletedBackground#0000
editorGutter.modifiedBackground#0000
editorLineNumber.activeForeground#9fb0bf
editorLineNumber.foreground#5D6E7A
editorOverviewRuler.addedForeground#0000
editorOverviewRuler.border#0000
editorOverviewRuler.bracketMatchForeground#0000
editorOverviewRuler.deletedForeground#0000
editorOverviewRuler.findMatchForeground#0000
editorOverviewRuler.infoForeground#0000
editorOverviewRuler.rangeHighlightForeground#0000
editorOverviewRuler.selectionHighlightForeground#0000
editorOverviewRuler.wordHighlightForeground#0000
editorOverviewRuler.wordHighlightStrongForeground#0000
editorSuggestWidget.background#31393e
editorSuggestWidget.border#31393e
editorWidget.background#31393e
editorWidget.border#282f33
focusBorder#ff000000
gitlens.lineHighlightOverviewRulerColor#0000
input.background#282f33
list.activeSelectionBackground#282f33
list.focusBackground#282f33
list.hoverBackground#282f33
list.inactiveFocusBackground#282f33
scrollbar.shadow#ff000000
scrollbarSlider.background#ffffff05
sideBar.background#31393e
sideBarSectionHeader.background#282f33
statusBar.background#75aaff
tab.activeBackground#282f33
tab.border#ff000000
tab.inactiveBackground#282f33
titleBar.activeBackground#282f33
titleBar.inactiveBackground#282f33
tree.indentGuidesStroke#ffffff11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
	#D4D4D4	—
invalid	#f44747	—
variable	#d4d4d4	—
variable.predefined	#ea9b80	—
variable.parameter	#d4d4d4	—
identifier	#d4d4d4	—
identifier.const	#BD9AC2	—
identifier.const.class	#75AAFF	—
identifier.class	#75AAFF	—
identifier.const.tag	#75AAFF	—
identifier.tag	#75AAFF	—
identifier.def	#75AAFF	—
identifier.key	#a7c9de	—
entity.name.type	#d4d4d4	—
entity.name.function	#d4d4d4	—
storage.type.js.jsx	#ea9b80	—
entity.name.property	#75AAFF	—
entity.name.tag	#D9BB72	—
storage.type.function	#ea9b80	—
storage.type.class	#ea9b80	—
comment	#5d6e7a	—
operator	#ea9b80	—
number	#598DA6	—
number.hex	#598DA6	—
numeric.css	#598DA6	—
regexp	#FD9231	—
annotation	#cc6666	—
type	#3DC9B0	—
boolean	#598DA6	—
constant.numeric	#598DA6	—
constant.language.boolean	#598DA6	—
delimiter	#DCDCDC	—
delimiter.html	#808080	—
delimiter.xml	#808080	—
tag	#D9BB72	—
meta.scss	#A79873	—
meta.tag	#d4d4d4	—
entity.other.attribute-name.js.jsx	#a7c9de	—
metatag	#DD6A6F	—
metatag.content.html	#9CDCFE	—
metatag.html	#569CD6	—
metatag.xml	#569CD6	—
key	#a7c9de	—
string.key.json	#9CDCFE	—
string.value.json	#CE9178	—
attribute.name	#a7c9de	—
attribute.value	#598DA6	—
attribute.value.number.css	#598DA6	—
attribute.value.unit.css	#598DA6	—
attribute.value.hex.css	#598DA6	—
string	#7da4b7	—
string.sql	#B7DE95	—
keyword, storage.type.js	#ea9b80	—
keyword.flow	#ea9b80	—
keyword.json	#ea9b80	—
keyword.flow.scss	#ea9b80	—
operator.scss	#909090	—
operator.sql	#778899	—
operator.swift	#909090	—
predefined.sql	#FF00FF	—
entity.name.selector.css	#D9BB72	—
support.type.property-name.css	#75AAFF	—
meta.object-literal.key	#a7c9de	—
meta.tag keyword.operator.assignment.js.jsx, storage.type.function.arrow.js.jsx, punctuation.separator.key-value.js, variable.parameter, source.js meta.jsx.children.js.jsx	#d4d4d4	—
variable variable.other.property.js, variable.other.property.js variable, variable.other.property.js, support.type.property-name.css, entity.other.attribute-name.html meta.tag, meta.tag entity.other.attribute-name.html, entity.other.attribute-name.js	#a7c9de	—
meta.property-value.css, meta.property-value.css keyword, string.quoted.double.html string, string string.quoted.double.html, string.quoted.double.html	#598da6	—
meta.selector.css	#d9bb73	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, source.vue meta.tag, source.js meta.tag, meta.jsx.children.js keyword, meta.tag.js keyword, meta.tag keyword.operator.assignment.js.jsx	#808080	—

VS Code preview

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

Theodora — Theodora's Twilight

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.

editor.background#141414
editor.foreground#FEFFD3
editor.inactiveSelectionBackground#3C3C3C
editor.lineHighlightBackground#525254
editor.selectionBackground#4C4C4C
editorCursor.foreground#F18260
editorGutter.background#3d3d3f
editorIndentGuide.background#F1826025
editorOverviewRuler.addedForeground#141414
editorOverviewRuler.border#141414
editorRuler.foreground#141414
editorWhitespace.foreground#F18260
scrollbarSlider.background#25252699
sideBar.background#141414
statusBar.background#262626
statusBar.foreground#232323
tab.activeBackground#141414
tab.hoverBackground#252526
tab.inactiveBackground#1f1f1f
titleBar.activeBackground#1f1f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#FEFFD3	—
entity.other.inherited-class.js, entity.name.type.module.js, meta.embedded.expression.js, source.ruby, text.html.erb, source.json.comments	#ffffff	—
storage.modifier.js	#ab98ac	—
	#C2A86C	—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js	#d7b67c	—
string.json.comments, string, support	#AFB979	—
meta.tag	#ac8350	—
comment	#5F5A60	italic
constant	#CF6A4C	—
entity	#ac8350
keyword	#d7b67c
storage	#faf0a8
variable	#889ab5	—
invalid.deprecated	#D2A8A1	italic underline
entity.other.inherited-class	#9B5C2E	italic
string source	#DAEFA3
string constant	#DDF2A4	—
string.regexp	#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#CF7D34	—
string variable	#8A9A95	—
support.function	#DAD085
support.constant	#CF6A4C
meta.preprocessor.c, support.class.ruby	#8996A8	—
meta.preprocessor.c keyword	#AFC4DB	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string	#494949	—
declaration.tag, declaration.tag entity, meta.tag entity	#AC885B	—
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity	#ffffff	—
meta.selector.css entity.name.tag	#CDA869	—
meta.selector.css entity.other.attribute-name.tag.pseudo-class	#8F9D6A	—
meta.selector.css entity.other.attribute-name.id	#8B98AB	—
meta.selector.css entity.other.attribute-name.class	#ac8350	—
support.type.property-name.css	#C5AF75	—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#F9EE98	—
meta.preprocessor.at-rule keyword.control.at-rule	#8693A5	—
meta.property-value support.constant.named-color.css, meta.property-value constant	#CA7840	—
meta.constructor.argument.css	#8F9D6A	—
meta.diff, meta.diff.header, meta.separator	#F8F8F8	italic
markup.deleted	#F8F8F8	—
markup.changed	#F8F8F8	—
markup.inserted	#F8F8F8	—
markup.list	#F9EE98	—
markup.heading	#CF6A4C	—
markup.deleted.git_gutter	#CF6A4C	—
markup.inserted.git_gutter	#8F9D6A	—
markup.changed.git_gutter	#889ab5	—
markup.ignored.git_gutter	#565656	—
markup.untracked.git_gutter	#565656	—