KSHN Themes

Name: KSHN Themes
Author: KSHN Codes

Publisher: KSHN CodesThemes in package: 4

A family of VS Code color themes, each pairing a soft pastel light mode with a saturated dark mode built from the same accent.

Open in VS Code GitHub

Color themes

VS Code preview

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

KSHN Themes — KSHN Champagne

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.activeBackground#C4501C33
activityBar.activeBorder#C4501C
activityBar.activeFocusBorder#C4501C
activityBar.background#F0DDBC
activityBar.border#EDE0C4
activityBar.foreground#8A4A1E
activityBar.hoverBackground#C4501C1F
activityBar.hoverForeground#8A4A1E
activityBar.inactiveForeground#C9AE87
activityBarBadge.background#C4501C
activityBarBadge.foreground#FFF8ED
badge.background#C4501C
badge.foreground#FFF8ED
breadcrumb.activeSelectionForeground#C4501C
breadcrumb.focusForeground#3A2410
breadcrumb.foreground#8B6F4E
button.background#C4501C
button.foreground#FFF8ED
button.hoverBackground#A8401A
button.secondaryBackground#EDE0C4
button.secondaryForeground#3A2410
button.secondaryHoverBackground#E0CFA8
descriptionForeground#8B6F4E
disabledForeground#B7A38A
dropdown.background#FFFFFF
dropdown.border#E0CFA8
dropdown.foreground#3A2410
editor.background#FBF3E6
editor.findMatchBackground#A8791E55
editor.findMatchHighlightBackground#A8791E2A
editor.foreground#3A2410
editor.inactiveSelectionBackground#2E8F841A
editor.lineHighlightBackground#F3E4CC
editor.lineHighlightBorder#00000000
editor.selectionBackground#2E8F8433
editor.selectionHighlightBackground#2E8F8422
editor.wordHighlightBackground#B85C4222
editor.wordHighlightStrongBackground#B85C4233
editorBracketMatch.background#2E8F8422
editorBracketMatch.border#2E8F8488
editorCursor.foreground#C4501C
editorError.foreground#B8402A
editorGroup.border#EDE0C4
editorGroupHeader.tabsBackground#F5E8D2
editorGroupHeader.tabsBorder#EDE0C4
editorGutter.addedBackground#6B8A3D
editorGutter.deletedBackground#B8402A
editorGutter.modifiedBackground#2E8F84
editorIndentGuide.activeBackground1#C4501C66
editorIndentGuide.background1#EDE0C4
editorInfo.foreground#2E8F84
editorLineNumber.activeForeground#C4501C
editorLineNumber.foreground#D9C4A0
editorOverviewRuler.border#EDE0C4
editorRuler.foreground#EDE0C4
editorWarning.foreground#A8791E
editorWhitespace.foreground#E6D6B4
errorForeground#B8402A
extensionButton.prominentBackground#C4501C
extensionButton.prominentForeground#FFF8ED
extensionButton.prominentHoverBackground#A8401A
focusBorder#C4501C88
foreground#3A2410
gitDecoration.addedResourceForeground#6B8A3D
gitDecoration.conflictingResourceForeground#A8791E
gitDecoration.deletedResourceForeground#B8402A
gitDecoration.ignoredResourceForeground#D9C4A0
gitDecoration.modifiedResourceForeground#2E8F84
gitDecoration.untrackedResourceForeground#B85C42
input.background#FFFFFF
input.border#E0CFA8
input.foreground#3A2410
input.placeholderForeground#B7A38A
inputOption.activeBackground#C4501C22
inputOption.activeBorder#C4501C
list.activeSelectionBackground#C4501C22
list.activeSelectionForeground#3A2410
list.focusBackground#C4501C33
list.highlightForeground#C4501C
list.hoverBackground#F0DDBC
list.inactiveSelectionBackground#F0DDBC
menu.background#FBF3E6
menu.border#EDE0C4
menu.foreground#3A2410
menu.selectionBackground#C4501C22
notificationCenterHeader.background#F0DDBC
notifications.background#FBF3E6
notifications.border#EDE0C4
panel.background#FBF3E6
panel.border#EDE0C4
panelTitle.activeBorder#C4501C
panelTitle.activeForeground#8A4A1E
panelTitle.inactiveForeground#8B6F4E
pickerGroup.border#EDE0C4
pickerGroup.foreground#C4501C
progressBar.background#C4501C
scrollbarSlider.activeBackground#C4501C77
scrollbarSlider.background#C4501C33
scrollbarSlider.hoverBackground#C4501C55
selection.background#C4501C44
sideBar.background#F5E8D2
sideBar.border#EDE0C4
sideBar.foreground#4F3A26
sideBarSectionHeader.background#F0DDBC
sideBarSectionHeader.border#EDE0C4
sideBarSectionHeader.foreground#3A2410
sideBarTitle.foreground#3A2410
statusBar.background#C4501C
statusBar.border#A8401A
statusBar.debuggingBackground#A8791E
statusBar.debuggingForeground#3A2410
statusBar.foreground#FFF8ED
statusBar.noFolderBackground#7A5C9E
statusBarItem.hoverBackground#A8401A
statusBarItem.remoteBackground#2E8F84
statusBarItem.remoteForeground#0E2C28
tab.activeBackground#FBF3E6
tab.activeBorderTop#C4501C
tab.activeForeground#3A2410
tab.border#EDE0C4
tab.inactiveBackground#F0DDBC
tab.inactiveForeground#8B6F4E
tab.unfocusedActiveBorderTop#C4501C66
terminal.ansiBlack#3A2410
terminal.ansiBlue#2E8F84
terminal.ansiBrightBlack#8B6F4E
terminal.ansiBrightBlue#52B0A4
terminal.ansiBrightCyan#64B8B0
terminal.ansiBrightGreen#86A85A
terminal.ansiBrightMagenta#D07858
terminal.ansiBrightRed#D65A3F
terminal.ansiBrightWhite#3A2410
terminal.ansiBrightYellow#C99A3D
terminal.ansiCyan#3F9A93
terminal.ansiGreen#6B8A3D
terminal.ansiMagenta#B85C42
terminal.ansiRed#B8402A
terminal.ansiWhite#4F3A26
terminal.ansiYellow#A8791E
terminal.background#FBF3E6
terminal.foreground#3A2410
titleBar.activeBackground#F0DDBC
titleBar.activeForeground#3A2410
titleBar.border#EDE0C4
titleBar.inactiveBackground#F5E8D2
titleBar.inactiveForeground#8B6F4E
widget.shadow#3A241022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#3A2410	—
comment, punctuation.definition.comment	#A9906E	italic
string, string.quoted, punctuation.definition.string	#4F7A2E	—
string.regexp, constant.other.character-class.regexp	#A8502F	—
constant.numeric, constant.language, constant.character	#A8791E	—
keyword, keyword.control, storage.type, storage.modifier	#C4501C	bold
keyword.operator	#8A4A1E	—
entity.name.function, support.function, meta.function-call	#2E7A72	—
entity.name.class, entity.name.type, support.class, support.type	#A8791E	bold
entity.name.tag	#C4501C	—
entity.other.attribute-name, variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, support.type.property-name.json, support.type.property-name.jsonc, entity.name.tag.yaml, support.type.property-name.yaml	#B8703F	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#A8791E	bold
variable, variable.other	#3A2410	—
variable.parameter	#6B5438	italic
variable.language, constant.language.this	#C4501C	italic
punctuation, meta.brace	#8B6F4E	—
markup.heading	#C4501C	bold
markup.bold	#3A2410	bold
markup.italic	#3A2410	italic
markup.underline.link	#2E7A72	—
invalid, invalid.illegal	#B8402A	—

VS Code preview

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

KSHN Themes — KSHN Dark Champagne

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#FF6A2E33
activityBar.activeBorder#FF6A2E
activityBar.activeFocusBorder#FF6A2E
activityBar.background#241309
activityBar.border#3A2013
activityBar.foreground#FFB37A
activityBar.hoverBackground#FF6A2E1F
activityBar.hoverForeground#FFB37A
activityBar.inactiveForeground#6B5640
activityBarBadge.background#FF6A2E
activityBarBadge.foreground#1E0F07
badge.background#FF6A2E
badge.foreground#1E0F07
breadcrumb.activeSelectionForeground#FFB37A
breadcrumb.focusForeground#F3E6D2
breadcrumb.foreground#A8886A
button.background#FF6A2E
button.foreground#1E0F07
button.hoverBackground#FF8850
button.secondaryBackground#4A2A14
button.secondaryForeground#F3E6D2
button.secondaryHoverBackground#5C3420
descriptionForeground#A8886A
disabledForeground#6B5640
dropdown.background#241309
dropdown.border#4A2A14
dropdown.foreground#F3E6D2
editor.background#1E0F07
editor.findMatchBackground#D9A25755
editor.findMatchHighlightBackground#D9A2572A
editor.foreground#F3E6D2
editor.inactiveSelectionBackground#FFB34714
editor.lineHighlightBackground#2E1B0F
editor.lineHighlightBorder#00000000
editor.selectionBackground#FFB34733
editor.selectionHighlightBackground#FFB3471F
editor.wordHighlightBackground#E2704F26
editor.wordHighlightStrongBackground#E2704F3D
editorBracketMatch.background#FFB34722
editorBracketMatch.border#FFB34799
editorCursor.foreground#FFD9A0
editorError.foreground#FF6B5C
editorGroup.border#3A2013
editorGroupHeader.tabsBackground#170B05
editorGroupHeader.tabsBorder#3A2013
editorGutter.addedBackground#8FBE6B
editorGutter.deletedBackground#FF6B5C
editorGutter.modifiedBackground#E8B84B
editorIndentGuide.activeBackground1#FF6A2E66
editorIndentGuide.background1#3A2013
editorInfo.foreground#FFD9A0
editorLineNumber.activeForeground#FF6A2E
editorLineNumber.foreground#4A3420
editorOverviewRuler.border#2E1B0F
editorRuler.foreground#3A2013
editorWarning.foreground#E8B84B
editorWhitespace.foreground#3A2013
errorForeground#FF6B5C
extensionButton.prominentBackground#FF6A2E
extensionButton.prominentForeground#1E0F07
extensionButton.prominentHoverBackground#FF8850
focusBorder#FF6A2E88
foreground#F3E6D2
gitDecoration.addedResourceForeground#8FBE6B
gitDecoration.conflictingResourceForeground#E8B84B
gitDecoration.deletedResourceForeground#FF6B5C
gitDecoration.ignoredResourceForeground#4A3420
gitDecoration.modifiedResourceForeground#6FA8C8
gitDecoration.untrackedResourceForeground#E2704F
input.background#241309
input.border#4A2A14
input.foreground#F3E6D2
input.placeholderForeground#6B5640
inputOption.activeBackground#FF6A2E22
inputOption.activeBorder#FF6A2E
list.activeSelectionBackground#FF6A2E2A
list.activeSelectionForeground#F3E6D2
list.focusBackground#FF6A2E3D
list.highlightForeground#FFB37A
list.hoverBackground#2E1B0F
list.inactiveSelectionBackground#2E1B0F
menu.background#241309
menu.border#3A2013
menu.foreground#F3E6D2
menu.selectionBackground#FF6A2E2A
notificationCenterHeader.background#241309
notifications.background#170B05
notifications.border#3A2013
panel.background#1E0F07
panel.border#3A2013
panelTitle.activeBorder#FF6A2E
panelTitle.activeForeground#FFB37A
panelTitle.inactiveForeground#6B5640
pickerGroup.border#3A2013
pickerGroup.foreground#FF6A2E
progressBar.background#FF6A2E
scrollbarSlider.activeBackground#FF6A2E70
scrollbarSlider.background#FF6A2E2A
scrollbarSlider.hoverBackground#FF6A2E4D
selection.background#FF6A2E44
sideBar.background#170B05
sideBar.border#3A2013
sideBar.foreground#D9C4A8
sideBarSectionHeader.background#2E1B0F
sideBarSectionHeader.border#3A2013
sideBarSectionHeader.foreground#F3E6D2
sideBarTitle.foreground#F3E6D2
statusBar.background#A8461B
statusBar.border#7A3012
statusBar.debuggingBackground#E8B84B
statusBar.debuggingForeground#1E0F07
statusBar.foreground#FDF0E0
statusBar.noFolderBackground#5C3A6B
statusBarItem.hoverBackground#C4581F
statusBarItem.remoteBackground#FFD9A0
statusBarItem.remoteForeground#1E0F07
tab.activeBackground#1E0F07
tab.activeBorderTop#FF6A2E
tab.activeForeground#F3E6D2
tab.border#3A2013
tab.inactiveBackground#241309
tab.inactiveForeground#8C6F52
tab.unfocusedActiveBorderTop#FF6A2E66
terminal.ansiBlack#241309
terminal.ansiBlue#6FA8C8
terminal.ansiBrightBlack#6B5640
terminal.ansiBrightBlue#9CC8E0
terminal.ansiBrightCyan#A0DCD2
terminal.ansiBrightGreen#A8D488
terminal.ansiBrightMagenta#F0906E
terminal.ansiBrightRed#FF8C7A
terminal.ansiBrightWhite#F3E6D2
terminal.ansiBrightYellow#FFD07A
terminal.ansiCyan#7AC0B8
terminal.ansiGreen#8FBE6B
terminal.ansiMagenta#E2704F
terminal.ansiRed#FF6B5C
terminal.ansiWhite#D9C4A8
terminal.ansiYellow#E8B84B
terminal.background#1E0F07
terminal.foreground#F3E6D2
titleBar.activeBackground#241309
titleBar.activeForeground#F3E6D2
titleBar.border#3A2013
titleBar.inactiveBackground#170B05
titleBar.inactiveForeground#6B5640
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F3E6D2	—
comment, punctuation.definition.comment	#8C6F52	italic
string, string.quoted, punctuation.definition.string	#8FBE6B	—
string.regexp, constant.other.character-class.regexp	#E2704F	—
constant.numeric, constant.language, constant.character	#E8B84B	—
keyword, keyword.control, storage.type, storage.modifier	#FF6A2E	bold
keyword.operator	#FFB37A	—
entity.name.function, support.function, meta.function-call	#5FB8AE	—
entity.name.class, entity.name.type, support.class, support.type	#FFB347	bold
entity.name.tag	#FF6A2E	—
entity.other.attribute-name, variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, support.type.property-name.json, support.type.property-name.jsonc, entity.name.tag.yaml, support.type.property-name.yaml	#E2966F	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#E8B84B	bold
variable, variable.other	#F3E6D2	—
variable.parameter	#C9AF94	italic
variable.language, constant.language.this	#FFB37A	italic
punctuation, meta.brace	#A8886A	—
markup.heading	#FFB37A	bold
markup.bold	#F3E6D2	bold
markup.italic	#F3E6D2	italic
markup.underline.link	#5FB8AE	—
invalid, invalid.illegal	#FF6B5C	—

VS Code preview

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

KSHN Themes — KSHN Dark Pink Moscato

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#FF3EC433
activityBar.activeBorder#FF3EC4
activityBar.activeFocusBorder#FF3EC4
activityBar.background#401429
activityBar.border#60213E
activityBar.foreground#FF7CDA
activityBar.hoverBackground#FF3EC41F
activityBar.hoverForeground#FF7CDA
activityBar.inactiveForeground#5A4C70
activityBarBadge.background#FF3EC4
activityBarBadge.foreground#300E1E
badge.background#FF3EC4
badge.foreground#300E1E
breadcrumb.activeSelectionForeground#FF7CDA
breadcrumb.focusForeground#F0E6F5
breadcrumb.foreground#9884A8
button.background#FF3EC4
button.foreground#300E1E
button.hoverBackground#FF66D2
button.secondaryBackground#682444
button.secondaryForeground#F0E6F5
button.secondaryHoverBackground#382A50
descriptionForeground#9884A8
disabledForeground#6B5C78
dropdown.background#401429
dropdown.border#682444
dropdown.foreground#F0E6F5
editor.background#300E1E
editor.findMatchBackground#FFB86B55
editor.findMatchHighlightBackground#FFB86B2A
editor.foreground#F0E6F5
editor.inactiveSelectionBackground#4FD1FF14
editor.lineHighlightBackground#521833
editor.lineHighlightBorder#00000000
editor.selectionBackground#4FD1FF33
editor.selectionHighlightBackground#4FD1FF1F
editor.wordHighlightBackground#B47CFF26
editor.wordHighlightStrongBackground#B47CFF3D
editorBracketMatch.background#4FD1FF22
editorBracketMatch.border#4FD1FF99
editorCursor.foreground#4FD1FF
editorError.foreground#FF5C7A
editorGroup.border#60213E
editorGroupHeader.tabsBackground#280B19
editorGroupHeader.tabsBorder#60213E
editorGutter.addedBackground#4FD1FF
editorGutter.deletedBackground#FF5C7A
editorGutter.modifiedBackground#4FD1FF
editorIndentGuide.activeBackground1#FF3EC466
editorIndentGuide.background1#60213E
editorInfo.foreground#4FD1FF
editorLineNumber.activeForeground#FF3EC4
editorLineNumber.foreground#463A5C
editorOverviewRuler.border#521833
editorRuler.foreground#60213E
editorWarning.foreground#FFB86B
editorWhitespace.foreground#60213E
errorForeground#FF5C7A
extensionButton.prominentBackground#FF3EC4
extensionButton.prominentForeground#300E1E
extensionButton.prominentHoverBackground#FF66D2
focusBorder#FF3EC488
foreground#F0E6F5
gitDecoration.addedResourceForeground#4FE0A8
gitDecoration.conflictingResourceForeground#FFB86B
gitDecoration.deletedResourceForeground#FF5C7A
gitDecoration.ignoredResourceForeground#463A5C
gitDecoration.modifiedResourceForeground#4FD1FF
gitDecoration.untrackedResourceForeground#B47CFF
input.background#401429
input.border#682444
input.foreground#F0E6F5
input.placeholderForeground#6B5C78
inputOption.activeBackground#FF3EC422
inputOption.activeBorder#FF3EC4
list.activeSelectionBackground#FF3EC42A
list.activeSelectionForeground#F0E6F5
list.focusBackground#FF3EC43D
list.highlightForeground#FF7CDA
list.hoverBackground#521833
list.inactiveSelectionBackground#521833
menu.background#401429
menu.border#60213E
menu.foreground#F0E6F5
menu.selectionBackground#FF3EC42A
notificationCenterHeader.background#211440
notifications.background#1A0E30
notifications.border#60213E
panel.background#300E1E
panel.border#60213E
panelTitle.activeBorder#FF3EC4
panelTitle.activeForeground#FF7CDA
panelTitle.inactiveForeground#6B5C78
pickerGroup.border#60213E
pickerGroup.foreground#FF3EC4
progressBar.background#FF3EC4
scrollbarSlider.activeBackground#FF3EC470
scrollbarSlider.background#FF3EC42A
scrollbarSlider.hoverBackground#FF3EC44D
selection.background#FF3EC444
sideBar.background#280B19
sideBar.border#60213E
sideBar.foreground#D8CBE0
sideBarSectionHeader.background#521833
sideBarSectionHeader.border#60213E
sideBarSectionHeader.foreground#F0E6F5
sideBarTitle.foreground#F0E6F5
statusBar.background#AF1D7A
statusBar.border#7A1F59
statusBar.debuggingBackground#FFB86B
statusBar.debuggingForeground#300E1E
statusBar.foreground#FDF0F8
statusBar.noFolderBackground#5F10C6
statusBarItem.hoverBackground#C9268E
statusBarItem.remoteBackground#4FD1FF
statusBarItem.remoteForeground#300E1E
tab.activeBackground#300E1E
tab.activeBorderTop#FF3EC4
tab.activeForeground#F0E6F5
tab.border#60213E
tab.inactiveBackground#401429
tab.inactiveForeground#7A6C88
tab.unfocusedActiveBorderTop#FF3EC466
terminal.ansiBlack#401429
terminal.ansiBlue#4FD1FF
terminal.ansiBrightBlack#6B5C78
terminal.ansiBrightBlue#8AE0FF
terminal.ansiBrightCyan#9CDCFF
terminal.ansiBrightGreen#7CF0C0
terminal.ansiBrightMagenta#FF7CDA
terminal.ansiBrightRed#FF8098
terminal.ansiBrightWhite#F0E6F5
terminal.ansiBrightYellow#FFCB8E
terminal.ansiCyan#5AC8FA
terminal.ansiGreen#4FE0A8
terminal.ansiMagenta#FF3EC4
terminal.ansiRed#FF5C7A
terminal.ansiWhite#D8CBE0
terminal.ansiYellow#FFB86B
terminal.background#300E1E
terminal.foreground#F0E6F5
titleBar.activeBackground#401429
titleBar.activeForeground#F0E6F5
titleBar.border#60213E
titleBar.inactiveBackground#280B19
titleBar.inactiveForeground#6B5C78
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F0E6F5	—
comment, punctuation.definition.comment	#6B5C78	italic
string, string.quoted, punctuation.definition.string	#4FE0A8	—
string.regexp, constant.other.character-class.regexp	#FF8A5C	—
constant.numeric, constant.language, constant.character	#FFB86B	—
keyword, keyword.control, storage.type, storage.modifier	#FF3EC4	bold
keyword.operator	#FF7CDA	—
entity.name.function, support.function, meta.function-call	#B47CFF	—
entity.name.class, entity.name.type, support.class, support.type	#4FD1FF	bold
entity.name.tag	#FF3EC4	—
entity.other.attribute-name, variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, support.type.property-name.json, support.type.property-name.jsonc, entity.name.tag.yaml, support.type.property-name.yaml	#FF6FA8	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#FFB86B	bold
variable, variable.other	#F0E6F5	—
variable.parameter	#C9BAD4	italic
variable.language, constant.language.this	#FF7CDA	italic
punctuation, meta.brace	#9884A8	—
markup.heading	#FF7CDA	bold
markup.bold	#F0E6F5	bold
markup.italic	#F0E6F5	italic
markup.underline.link	#5AC8FA	—
invalid, invalid.illegal	#FF5C7A	—

VS Code preview

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

KSHN Themes — KSHN Pink Moscato

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.activeBackground#D6399E33
activityBar.activeBorder#D6399E
activityBar.activeFocusBorder#D6399E
activityBar.background#F3DCEE
activityBar.border#EAD5E6
activityBar.foreground#8A2A6E
activityBar.hoverBackground#D6399E1F
activityBar.hoverForeground#8A2A6E
activityBar.inactiveForeground#C79BC0
activityBarBadge.background#D6399E
activityBarBadge.foreground#FFF6FB
badge.background#D6399E
badge.foreground#FFF6FB
breadcrumb.activeSelectionForeground#D6399E
breadcrumb.focusForeground#3A2740
breadcrumb.foreground#8B6F8A
button.background#D6399E
button.foreground#FFF6FB
button.hoverBackground#C42E8F
button.secondaryBackground#E6CFE2
button.secondaryForeground#3A2740
button.secondaryHoverBackground#DABAD6
descriptionForeground#8B6F8A
disabledForeground#B7A3B5
dropdown.background#FFFFFF
dropdown.border#DABAD6
dropdown.foreground#3A2740
editor.background#FCF6FB
editor.findMatchBackground#E8A33D55
editor.findMatchHighlightBackground#E8A33D2A
editor.foreground#3A2740
editor.inactiveSelectionBackground#3FA9DD1A
editor.lineHighlightBackground#F3E1F0
editor.lineHighlightBorder#00000000
editor.selectionBackground#3FA9DD33
editor.selectionHighlightBackground#3FA9DD22
editor.wordHighlightBackground#9B5DE522
editor.wordHighlightStrongBackground#9B5DE533
editorBracketMatch.background#3FA9DD22
editorBracketMatch.border#3FA9DD88
editorCursor.foreground#D6399E
editorError.foreground#C6294F
editorGroup.border#EAD5E6
editorGroupHeader.tabsBackground#F7E9F4
editorGroupHeader.tabsBorder#EAD5E6
editorGutter.addedBackground#3FA9DD
editorGutter.deletedBackground#C6294F
editorGutter.modifiedBackground#3FA9DD
editorIndentGuide.activeBackground1#D6399E66
editorIndentGuide.background1#EAD5E6
editorInfo.foreground#3FA9DD
editorLineNumber.activeForeground#D6399E
editorLineNumber.foreground#C9AEC6
editorOverviewRuler.border#EAD5E6
editorRuler.foreground#EAD5E6
editorWarning.foreground#B8791E
editorWhitespace.foreground#E6CFE2
errorForeground#C6294F
extensionButton.prominentBackground#D6399E
extensionButton.prominentForeground#FFF6FB
extensionButton.prominentHoverBackground#C42E8F
focusBorder#D6399E88
foreground#3A2740
gitDecoration.addedResourceForeground#2E9E6D
gitDecoration.conflictingResourceForeground#E8A33D
gitDecoration.deletedResourceForeground#C6294F
gitDecoration.ignoredResourceForeground#C9AEC6
gitDecoration.modifiedResourceForeground#3FA9DD
gitDecoration.untrackedResourceForeground#9B5DE5
input.background#FFFFFF
input.border#DABAD6
input.foreground#3A2740
input.placeholderForeground#B7A3B5
inputOption.activeBackground#D6399E22
inputOption.activeBorder#D6399E
list.activeSelectionBackground#D6399E22
list.activeSelectionForeground#3A2740
list.focusBackground#D6399E33
list.highlightForeground#D6399E
list.hoverBackground#F1DCED
list.inactiveSelectionBackground#F1DCED
menu.background#FCF6FB
menu.border#EAD5E6
menu.foreground#3A2740
menu.selectionBackground#D6399E22
notificationCenterHeader.background#F3DCEE
notifications.background#FCF6FB
notifications.border#EAD5E6
panel.background#FCF6FB
panel.border#EAD5E6
panelTitle.activeBorder#D6399E
panelTitle.activeForeground#8A2A6E
panelTitle.inactiveForeground#8B6F8A
pickerGroup.border#EAD5E6
pickerGroup.foreground#D6399E
progressBar.background#D6399E
scrollbarSlider.activeBackground#D6399E77
scrollbarSlider.background#D6399E33
scrollbarSlider.hoverBackground#D6399E55
selection.background#D6399E44
sideBar.background#F7E9F4
sideBar.border#EAD5E6
sideBar.foreground#4F3A50
sideBarSectionHeader.background#F1DCED
sideBarSectionHeader.border#EAD5E6
sideBarSectionHeader.foreground#3A2740
sideBarTitle.foreground#3A2740
statusBar.background#D6399E
statusBar.border#C42E8F
statusBar.debuggingBackground#E8A33D
statusBar.debuggingForeground#3A2740
statusBar.foreground#FFF6FB
statusBar.noFolderBackground#9B5DE5
statusBarItem.hoverBackground#C42E8F
statusBarItem.remoteBackground#3FA9DD
statusBarItem.remoteForeground#0E2A38
tab.activeBackground#FCF6FB
tab.activeBorderTop#D6399E
tab.activeForeground#3A2740
tab.border#EAD5E6
tab.inactiveBackground#F1DCED
tab.inactiveForeground#8B6F8A
tab.unfocusedActiveBorderTop#D6399E66
terminal.ansiBlack#3A2740
terminal.ansiBlue#3FA9DD
terminal.ansiBrightBlack#8B6F8A
terminal.ansiBrightBlue#6EC6F0
terminal.ansiBrightCyan#79D2E8
terminal.ansiBrightGreen#3DBE85
terminal.ansiBrightMagenta#E91E8C
terminal.ansiBrightRed#E5484D
terminal.ansiBrightWhite#3A2740
terminal.ansiBrightYellow#E8A33D
terminal.ansiCyan#4FA8C8
terminal.ansiGreen#2E9E6D
terminal.ansiMagenta#D6399E
terminal.ansiRed#C6294F
terminal.ansiWhite#4F3A50
terminal.ansiYellow#B8791E
terminal.background#FCF6FB
terminal.foreground#3A2740
titleBar.activeBackground#F3DCEE
titleBar.activeForeground#3A2740
titleBar.border#EAD5E6
titleBar.inactiveBackground#F7E9F4
titleBar.inactiveForeground#8B6F8A
widget.shadow#3A274022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#3A2740	—
comment, punctuation.definition.comment	#A98CA6	italic
string, string.quoted, punctuation.definition.string	#1F8A6E	—
string.regexp, constant.other.character-class.regexp	#C9512F	—
constant.numeric, constant.language, constant.character	#B8791E	—
keyword, keyword.control, storage.type, storage.modifier	#C42E8F	bold
keyword.operator	#8A2A6E	—
entity.name.function, support.function, meta.function-call	#7A3FC9	—
entity.name.class, entity.name.type, support.class, support.type	#2A7FA8	bold
entity.name.tag	#C42E8F	—
entity.other.attribute-name, variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, support.type.property-name.json, support.type.property-name.jsonc, entity.name.tag.yaml, support.type.property-name.yaml	#B8386B	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#B8791E	bold
variable, variable.other	#3A2740	—
variable.parameter	#5C4460	italic
variable.language, constant.language.this	#C42E8F	italic
punctuation, meta.brace	#8B6F8A	—
markup.heading	#C42E8F	bold
markup.bold	#3A2740	bold
markup.italic	#3A2740	italic
markup.underline.link	#2A7FA8	—
invalid, invalid.illegal	#C6294F	—