Lavender Purple Theme

Name: Lavender Purple Theme
Author: hoshiko

Publisher: hoshikoThemes in package: 3

A soft, dreamy collection of lavender purple themes for Visual Studio Code.

Open in VS Code GitHub

Color themes

VS Code preview

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

Lavender Purple Theme — Lavender Theme Dark 1

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#1A1730
activityBar.foreground#C0A9FF
activityBar.inactiveForeground#5E3B51
activityBarBadge.background#D07CFF
activityBarBadge.foreground#1E1B2E
badge.background#D07CFF
badge.foreground#1E1B2E
button.background#D07CFF
button.foreground#1E1B2E
button.hoverBackground#C0A9FF
dropdown.background#231F3A
dropdown.border#3B9DBF44
dropdown.foreground#C0A9FF
editor.background#1E1B2E
editor.findMatchBackground#3B9DBF44
editor.findMatchHighlightBackground#3B9DBF22
editor.foreground#C0A9FF
editor.selectionBackground#3B9DBF33
editor.selectionHighlightBackground#3B9DBF22
editorBracketMatch.background#7E57C266
editorBracketMatch.border#D07CFF
editorCursor.foreground#D07CFF
editorError.foreground#D07CFF
editorGutter.addedBackground#3B9DBF
editorGutter.deletedBackground#D07CFF
editorGutter.modifiedBackground#C0A9FF
editorIndentGuide.activeBackground#7E57C2
editorIndentGuide.background#3B9DBF22
editorInfo.foreground#3B9DBF
editorLineNumber.activeForeground#C0A9FF
editorLineNumber.foreground#5E3B51
editorRuler.foreground#3B9DBF22
editorWarning.foreground#C0A9FF
gitDecoration.addedResourceForeground#3B9DBF
gitDecoration.conflictingResourceForeground#D07CFF
gitDecoration.deletedResourceForeground#D07CFF
gitDecoration.modifiedResourceForeground#C0A9FF
gitDecoration.renamedResourceForeground#7E57C2
input.background#231F3A
input.border#3B9DBF44
input.foreground#C0A9FF
input.placeholderForeground#5E3B51
list.activeSelectionBackground#3B9DBF44
list.activeSelectionForeground#D07CFF
list.focusBackground#3B9DBF33
list.focusForeground#D07CFF
list.highlightForeground#D07CFF
list.hoverBackground#3B9DBF22
list.hoverForeground#D07CFF
list.inactiveSelectionBackground#7E57C233
list.inactiveSelectionForeground#C0A9FF
minimap.findMatchHighlight#D07CFF22
minimap.selectionHighlight#D07CFF33
panel.background#231F3A
panel.border#1A1730
panelTitle.activeForeground#D07CFF
panelTitle.inactiveForeground#5E3B51
scrollbarSlider.activeBackground#D07CFF
scrollbarSlider.background#3B9DBF33
scrollbarSlider.hoverBackground#7E57C266
sideBar.background#1A1730
sideBar.foreground#C0A9FF
sideBarSectionHeader.background#231F3A
sideBarSectionHeader.foreground#C0A9FF
sideBarTitle.foreground#D07CFF
statusBar.background#150F26
statusBar.debuggingBackground#150F26
statusBar.foreground#C0A9FF
statusBar.noFolderBackground#150F26
tab.activeBackground#2A2545
tab.activeForeground#D07CFF
tab.border#231F3A
tab.inactiveBackground#1A1730
tab.inactiveForeground#5E3B51
tab.unfocusedActiveBackground#2A2545
tab.unfocusedInactiveBackground#1A1730
terminal.ansiBlack#1A1730
terminal.ansiBlue#7E57C2
terminal.ansiBrightBlack#5E3B51
terminal.ansiBrightBlue#7E57C2
terminal.ansiBrightCyan#3B9DBF
terminal.ansiBrightGreen#3B9DBF
terminal.ansiBrightMagenta#D07CFF
terminal.ansiBrightRed#D07CFF
terminal.ansiBrightWhite#C0A9FF
terminal.ansiBrightYellow#C0A9FF
terminal.ansiCyan#3B9DBF
terminal.ansiGreen#3B9DBF
terminal.ansiMagenta#D07CFF
terminal.ansiRed#D07CFF
terminal.ansiWhite#C0A9FF
terminal.ansiYellow#C0A9FF
terminal.background#1E1B2E
terminal.foreground#C0A9FF
titleBar.activeBackground#150F26
titleBar.activeForeground#C0A9FF
titleBar.inactiveBackground#150F26
titleBar.inactiveForeground#5E3B51

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5E3B51	italic
variable, string constant.other.placeholder	#C0A9FF	—
variable.parameter	#C0A9FF	italic
constant.other.color	#3B9DBF	—
invalid, invalid.illegal	#D07CFF	—
keyword, storage.type, storage.modifier	#D07CFF	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#3B9DBF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#D07CFF	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#3B9DBF	—
entity.name.method, meta.method	#3B9DBF	—
meta.block variable.other	#C0A9FF	—
support.other.variable, string.other.link	#C0A9FF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#7E57C2	—
constant, support.constant	#C0A9FF	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C0A9FF	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#7E57C2	—
support.type, storage.type	#7E57C2	—
entity.name.type.interface, support.interface	#3B9DBF	—
entity.name.type.enum, support.enum	#C0A9FF	—
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	#7E57C2	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#D07CFF	—
variable.language	#D07CFF	italic
entity.name.method.js	#3B9DBF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#3B9DBF	—
entity.other.attribute-name	#D07CFF	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#7E57C2	italic
entity.other.attribute-name.class	#7E57C2	—
source.sass keyword.control	#3B9DBF	—
markup.inserted	#3B9DBF	—
markup.deleted	#D07CFF	—
markup.changed	#C0A9FF	—
string.regexp	#3B9DBF	—
constant.character.escape	#3B9DBF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#3B9DBF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#D07CFF	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#D07CFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7E57C2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3B9DBF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D07CFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7E57C2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3B9DBF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D07CFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7E57C2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C0A9FF	—
text.html.markdown, punctuation.definition.list_item.markdown	#C0A9FF	—
text.html.markdown markup.inline.raw.markdown	#D07CFF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#5E3B51	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C0A9FF	—
markup.italic	#D07CFF	italic
markup.bold, markup.bold string	#D07CFF	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#D07CFF	bold
markup.underline	#7E57C2	underline
markup.quote punctuation.definition.blockquote.markdown	#5E3B51	—
markup.quote	—	italic
string.other.link.title.markdown	#3B9DBF	—
string.other.link.description.title.markdown	#D07CFF	—
constant.other.reference.link.markdown	#7E57C2	—
markup.raw.block	#D07CFF	—
markup.raw.block.fenced.markdown	#C0A9FF	—
punctuation.definition.fenced.markdown	#C0A9FF	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#C0A9FF	—
variable.language.fenced.markdown	#5E3B51	—
meta.separator	#5E3B51	bold
markup.table	#C0A9FF	—

VS Code preview

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

Lavender Purple Theme — Lavender Theme Dark 2

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#231F35
activityBar.foreground#F2ECFF
activityBar.inactiveForeground#8F84B5
activityBarBadge.background#C792EA
activityBarBadge.foreground#1E1B2E
badge.background#C792EA
badge.foreground#1E1B2E
button.background#C792EA
button.foreground#1E1B2E
button.hoverBackground#D8B4FE
dropdown.background#26213A
dropdown.border#322B4D
dropdown.foreground#F2ECFF
editor.background#1E1B2E
editor.findMatchBackground#463A6D
editor.findMatchHighlightBackground#463A6D55
editor.foreground#F2ECFF
editor.selectionBackground#463A6D
editor.selectionHighlightBackground#463A6D55
editorBracketMatch.background#322B4D
editorBracketMatch.border#C084FC
editorCursor.foreground#C792EA
editorError.foreground#FB7185
editorGutter.addedBackground#A7F3D0
editorGutter.deletedBackground#FB7185
editorGutter.modifiedBackground#C4B5FD
editorIndentGuide.activeBackground#8F84B5
editorIndentGuide.background#4B3F72
editorInfo.foreground#A78BFA
editorLineNumber.activeForeground#F2ECFF
editorLineNumber.foreground#8F84B5
editorRuler.foreground#4B3F72
editorWarning.foreground#FBBF24
gitDecoration.addedResourceForeground#A7F3D0
gitDecoration.conflictingResourceForeground#F87171
gitDecoration.deletedResourceForeground#FB7185
gitDecoration.modifiedResourceForeground#C4B5FD
gitDecoration.renamedResourceForeground#F9A8D4
input.background#26213A
input.border#322B4D
input.foreground#F2ECFF
input.placeholderForeground#8F84B5
list.activeSelectionBackground#463A6D
list.activeSelectionForeground#F2ECFF
list.focusBackground#463A6D
list.focusForeground#F2ECFF
list.highlightForeground#C792EA
list.hoverBackground#26213A
list.hoverForeground#F2ECFF
list.inactiveSelectionBackground#322B4D
list.inactiveSelectionForeground#F2ECFF
minimap.findMatchHighlight#C792EA55
minimap.selectionHighlight#C792EA55
panel.background#2C2742
panel.border#26213A
panelTitle.activeForeground#F2ECFF
panelTitle.inactiveForeground#8F84B5
scrollbarSlider.activeBackground#C792EA
scrollbarSlider.background#5B4A89
scrollbarSlider.hoverBackground#8F84B5
sideBar.background#231F35
sideBar.foreground#F2ECFF
sideBarSectionHeader.background#26213A
sideBarSectionHeader.foreground#F2ECFF
sideBarTitle.foreground#F2ECFF
statusBar.background#2B2542
statusBar.debuggingBackground#2B2542
statusBar.foreground#F2ECFF
statusBar.noFolderBackground#2B2542
tab.activeBackground#322B4D
tab.activeForeground#F2ECFF
tab.border#26213A
tab.inactiveBackground#231F35
tab.inactiveForeground#8F84B5
tab.unfocusedActiveBackground#322B4D
tab.unfocusedInactiveBackground#231F35
terminal.ansiBlack#231F35
terminal.ansiBlue#C4B5FD
terminal.ansiBrightBlack#8F84B5
terminal.ansiBrightBlue#A78BFA
terminal.ansiBrightCyan#C4B5FD
terminal.ansiBrightGreen#34D399
terminal.ansiBrightMagenta#D8B4FE
terminal.ansiBrightRed#FB7185
terminal.ansiBrightWhite#F2ECFF
terminal.ansiBrightYellow#FBBF24
terminal.ansiCyan#A78BFA
terminal.ansiGreen#A7F3D0
terminal.ansiMagenta#C792EA
terminal.ansiRed#FB7185
terminal.ansiWhite#F2ECFF
terminal.ansiYellow#FBBF24
terminal.background#1E1B2E
terminal.foreground#F2ECFF
titleBar.activeBackground#1B172A
titleBar.activeForeground#F2ECFF
titleBar.inactiveBackground#1B172A
titleBar.inactiveForeground#8F84B5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8F84B5	italic
variable, string constant.other.placeholder	#F2ECFF	—
variable.parameter	#E9DDFF	italic
constant.other.color	#C4B5FD	—
invalid, invalid.illegal	#FB7185	—
keyword, storage.type, storage.modifier	#C792EA	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#B794F4	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#D946EF	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#A78BFA	—
entity.name.method, meta.method	#A78BFA	—
meta.block variable.other	#F2ECFF	—
support.other.variable, string.other.link	#F2ECFF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F9A8D4	—
constant, support.constant	#F5B5D5	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#D8B4FE	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#E879F9	—
support.type, storage.type	#C4B5FD	—
entity.name.type.interface, support.interface	#DDD6FE	—
entity.name.type.enum, support.enum	#F0ABFC	—
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	#C4B5FD	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#C792EA	—
variable.language	#C792EA	italic
entity.name.method.js	#A78BFA	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#A78BFA	—
entity.other.attribute-name	#C084FC	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#E879F9	italic
entity.other.attribute-name.class	#E879F9	—
source.sass keyword.control	#A78BFA	—
markup.inserted	#A7F3D0	—
markup.deleted	#FB7185	—
markup.changed	#C4B5FD	—
string.regexp	#A78BFA	—
constant.character.escape	#B794F4	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#A78BFA	italic
source.js constant.other.object.key.js string.unquoted.label.js	#C792EA	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E879F9	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F9A8D4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E879F9	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#A78BFA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D946EF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D8B4FE	—
text.html.markdown, punctuation.definition.list_item.markdown	#F2ECFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#8F84B5	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#D8B4FE	—
markup.italic	#D946EF	italic
markup.bold, markup.bold string	#D946EF	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#D946EF	bold
markup.underline	#F9A8D4	underline
markup.quote punctuation.definition.blockquote.markdown	#8F84B5	—
markup.quote	—	italic
string.other.link.title.markdown	#A78BFA	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#E879F9	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#F2ECFF	—
punctuation.definition.fenced.markdown	#F2ECFF	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#F2ECFF	—
variable.language.fenced.markdown	#8F84B5	—
meta.separator	#8F84B5	bold
markup.table	#F2ECFF	—

VS Code preview

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

Lavender Purple Theme — Lavender Theme 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.background#F0EBFF
activityBar.foreground#4A3F6B
activityBar.inactiveForeground#C9BEE8
activityBarBadge.background#C792EA
activityBarBadge.foreground#FFFFFF
badge.background#C792EA
badge.foreground#FFFFFF
button.background#C792EA
button.foreground#FFFFFF
button.hoverBackground#D8B4FE
dropdown.background#FFFFFF
dropdown.border#E8DEFF
dropdown.foreground#2D2A3E
editor.background#F8F5FF
editor.findMatchBackground#E8DEFF88
editor.findMatchHighlightBackground#E8DEFF44
editor.foreground#2D2A3E
editor.selectionBackground#E8DEFF
editor.selectionHighlightBackground#E8DEFF55
editorBracketMatch.background#E8DEFF66
editorBracketMatch.border#C792EA
editorCursor.foreground#C792EA
editorError.foreground#EF4444
editorGutter.addedBackground#7C6CF5
editorGutter.deletedBackground#EF4444
editorGutter.modifiedBackground#C792EA
editorIndentGuide.activeBackground#C9BEE8
editorIndentGuide.background#E8DEFF44
editorInfo.foreground#7C6CF5
editorLineNumber.activeForeground#4A3F6B
editorLineNumber.foreground#C9BEE8
editorRuler.foreground#E8DEFF44
editorWarning.foreground#F59EAE
gitDecoration.addedResourceForeground#7C6CF5
gitDecoration.conflictingResourceForeground#F59EAE
gitDecoration.deletedResourceForeground#EF4444
gitDecoration.modifiedResourceForeground#C792EA
gitDecoration.renamedResourceForeground#C084FC
input.background#FFFFFF
input.border#E8DEFF
input.foreground#2D2A3E
input.placeholderForeground#C9BEE8
list.activeSelectionBackground#E8DEFF
list.activeSelectionForeground#2D2A3E
list.focusBackground#E8DEFF88
list.focusForeground#2D2A3E
list.highlightForeground#C792EA
list.hoverBackground#F0EBFF
list.hoverForeground#2D2A3E
list.inactiveSelectionBackground#E8DEFF66
list.inactiveSelectionForeground#2D2A3E
minimap.findMatchHighlight#C792EA22
minimap.selectionHighlight#C792EA33
panel.background#F5F0FF
panel.border#F0EBFF
panelTitle.activeForeground#4A3F6B
panelTitle.inactiveForeground#C9BEE8
scrollbarSlider.activeBackground#C792EA
scrollbarSlider.background#C9BEE866
scrollbarSlider.hoverBackground#C792EA88
sideBar.background#F5F0FF
sideBar.foreground#2D2A3E
sideBarSectionHeader.background#F0EBFF
sideBarSectionHeader.foreground#4A3F6B
sideBarTitle.foreground#4A3F6B
statusBar.background#EDE6FF
statusBar.debuggingBackground#EDE6FF
statusBar.foreground#4A3F6B
statusBar.noFolderBackground#EDE6FF
tab.activeBackground#FFFFFF
tab.activeForeground#4A3F6B
tab.border#F0EBFF
tab.inactiveBackground#F5F0FF
tab.inactiveForeground#C9BEE8
tab.unfocusedActiveBackground#FFFFFF
tab.unfocusedInactiveBackground#F5F0FF
terminal.ansiBlack#EDE6FF
terminal.ansiBlue#8B5CF6
terminal.ansiBrightBlack#C9BEE8
terminal.ansiBrightBlue#8B5CF6
terminal.ansiBrightCyan#7C6CF5
terminal.ansiBrightGreen#7C6CF5
terminal.ansiBrightMagenta#C084FC
terminal.ansiBrightRed#EF4444
terminal.ansiBrightWhite#2D2A3E
terminal.ansiBrightYellow#C792EA
terminal.ansiCyan#7C6CF5
terminal.ansiGreen#7C6CF5
terminal.ansiMagenta#C084FC
terminal.ansiRed#EF4444
terminal.ansiWhite#2D2A3E
terminal.ansiYellow#C792EA
terminal.background#F8F5FF
terminal.foreground#2D2A3E
titleBar.activeBackground#EDE6FF
titleBar.activeForeground#2D2A3E
titleBar.inactiveBackground#EDE6FF
titleBar.inactiveForeground#C9BEE8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#C9BEE8	italic
variable, string constant.other.placeholder	#2D2A3E	—
variable.parameter	#4A3F6B	italic
constant.other.color	#8B5CF6	—
invalid, invalid.illegal	#EF4444	—
keyword, storage.type, storage.modifier	#8B5CF6	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#7C6CF5	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#C084FC	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7C6CF5	—
entity.name.method, meta.method	#7C6CF5	—
meta.block variable.other	#2D2A3E	—
support.other.variable, string.other.link	#2D2A3E	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F59EAE	—
constant, support.constant	#4A3F6B	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C084FC	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#8B5CF6	—
support.type, storage.type	#7C6CF5	—
entity.name.type.interface, support.interface	#8B5CF6	—
entity.name.type.enum, support.enum	#C084FC	—
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	#7C6CF5	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#8B5CF6	—
variable.language	#8B5CF6	italic
entity.name.method.js	#7C6CF5	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#7C6CF5	—
entity.other.attribute-name	#8B5CF6	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#C084FC	italic
entity.other.attribute-name.class	#C084FC	—
source.sass keyword.control	#7C6CF5	—
markup.inserted	#7C6CF5	—
markup.deleted	#EF4444	—
markup.changed	#8B5CF6	—
string.regexp	#7C6CF5	—
constant.character.escape	#7C6CF5	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#7C6CF5	italic
source.js constant.other.object.key.js string.unquoted.label.js	#8B5CF6	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8B5CF6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C084FC	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F59EAE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8B5CF6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C084FC	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7C6CF5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C084FC	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8B5CF6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C084FC	—
text.html.markdown, punctuation.definition.list_item.markdown	#2D2A3E	—
text.html.markdown markup.inline.raw.markdown	#8B5CF6	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#C9BEE8	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C084FC	—
markup.italic	#C084FC	italic
markup.bold, markup.bold string	#C084FC	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#C084FC	bold
markup.underline	#F59EAE	underline
markup.quote punctuation.definition.blockquote.markdown	#C9BEE8	—
markup.quote	—	italic
string.other.link.title.markdown	#7C6CF5	—
string.other.link.description.title.markdown	#8B5CF6	—
constant.other.reference.link.markdown	#C084FC	—
markup.raw.block	#8B5CF6	—
markup.raw.block.fenced.markdown	#2D2A3E	—
punctuation.definition.fenced.markdown	#2D2A3E	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#2D2A3E	—
variable.language.fenced.markdown	#C9BEE8	—
meta.separator	#C9BEE8	bold
markup.table	#2D2A3E	—