CheYHinSpark Theme

Name: CheYHinSpark Theme
Author: CheYHinSpark

Publisher: CheYHinSparkThemes in package: 9

Open in VS Code GitHub

Color themes

VS Code preview

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

CheYHinSpark Theme — CheYHinSpark Blue

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#3399FF
activityBar.background#2B3137
activityBar.dropBorder#3399FF
activityBar.foreground#3399FF
activityBar.inactiveForeground#647382
activityBarBadge.background#9B5D1F
activityBarTop.activeBorder#3399FF
activityBarTop.dropBorder#3399FF
activityBarTop.foreground#3399FF
activityBarTop.inactiveForeground#647382
badge.background#9B5D1F
button.background#153F69
button.border#103050
button.foreground#FFFFFF
button.hoverBackground#1A4E82
button.secondaryBackground#1A1A1A
button.secondaryForeground#E0E0E0
button.secondaryHoverBackground#1A4E82
checkbox.foreground#C3E1FF
dropdown.background#181B1E
dropdown.border#103050
dropdown.listBackground#181B1E
editor.background#1A1A1A
editor.findMatchBackground#1A4E82
editor.findMatchHighlightBackground#1A4E8280
editor.foldBackground#10305080
editor.foldPlaceholderForeground#E0E0E0
editor.foreground#D1D1D1
editor.lineHighlightBorder#647382
editor.selectionBackground#3E4750
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorCursor.foreground#FFFFFF
editorGroupHeader.tabsBackground#181B1E
editorLineNumber.activeForeground#297BCD
editorLineNumber.foreground#515D69
editorStickyScroll.border#103050
editorStickyScrollHover.background#0B2137
editorUnicodeHighlight.border#77899B
editorWidget.background#2B3137
editorWidget.border#1A4E82
focusBorder#1A4E82
foreground#E0E0E0
input.background#181B1E
input.border#103050
keybindingLabel.border#3399FF
keybindingLabel.bottomBorder#C3E1FF
list.activeSelectionBackground#153F69
list.hoverBackground#3E4750
list.inactiveSelectionBackground#0B2137
menu.background#2B3137
menu.border#1A4E82
menu.separatorBackground#1A4E82
minimap.findMatchHighlight#1F5D9B
minimap.selectionHighlight#3E4750
panel.border#103050
panelTitle.activeBorder#3399FF
pickerGroup.border#1A4E82
pickerGroup.foreground#3399FF
sideBar.background#181B1E
sideBar.border#103050
sideBarSectionHeader.background#0B2137
sideBarSectionHeader.foreground#C3E1FF
statusBar.background#103050
statusBar.debuggingBackground#693F15
statusBar.noFolderBackground#0B2137
tab.activeBorderTop#3399FF
tab.dragAndDropBorder#3399FF
tab.hoverBackground#0B2137
tab.inactiveBackground#181B1E
textPreformat.foreground#C3E1FF
titleBar.activeBackground#2B3137
titleBar.activeForeground#C3E1FF
widget.border#1A4E82

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.bold	#FDB975	bold
markup.italic	#FDB975	italic
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.inserted	#20A820	—
markup.deleted	#A82020	—
markup.changed	#2020A8	—
invalid	#FC3030	—
comment, punctuation.definition.comment	#949494	italic
meta.preprocessor, keyword.operator, punctuation.accessor, punctuation.definition, punctuation.math, punctuation.other, punctuation.section, punctuation.separator, punctuation.terminator, storage.type.function.arrow	#D1D1D1	—
constant.character, constant.language, constant.numeric, constant.other, punctuation.definition.bold, punctuation.separator.pointer-access	#EAC65A	—
punctuation.definition.string, string, punctuation.definition.quote	#C6EA5A	—
entity.name.section, markup.heading, heading, punctuation.definition.heading	#7EEA5A	bold
constant.other.caps, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.declaration, keyword.struct	#73BE5A	—
entity.name.tag, entity.name.variable.event	#5ABEA5	—
constant.character.math, entity.name.variable, entity.other.attribute-name, markup.inline, meta.attribute, meta.function-call.arguments, meta.member, meta.object.member, meta.property-value, punctuation.definition.constant.math, storage.modifier.import, support.class.math, support.type.property-name, variable	#5AC6EA	—
entity.name.variable.parameter, meta.parameter.initialization, variable.parameter	#7896F0	italic
constant.other.general.math, entity.name.function, keyword.operator.sizeof, meta.function-call.generic, support.function	#AA91F5	—
keyword.control, keyword.operator.delete, keyword.operator.expression.new, keyword.operator.new, keyword.other, keyword.other.type, keyword.type, punctuation.definition.directive, storage.modifier, storage.type.modifier, storage.type	#D25A78	—

VS Code preview

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

CheYHinSpark Theme — CheYHinSpark Blue HC

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#FF9933
activityBar.background#2B3137
activityBar.dropBorder#FF9933
activityBar.foreground#FF9933
activityBar.inactiveForeground#297BCD
activityBarBadge.background#246CB4
badge.background#246CB4
breadcrumb.activeSelectionForeground#FF9933
breadcrumb.focusForeground#FF9933
button.background#2B3137
button.foreground#E0E0E0
button.hoverBackground#3E4750
button.secondaryBackground#153F69
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#1A4E82
chat.requestBubbleBackground#181B1E80
chat.requestBubbleHoverBackground#2B313780
checkbox.foreground#FF9933
contrastActiveBorder#FF9933
contrastBorder#153F69
dropdown.background#181B1E
dropdown.listBackground#181B1E
editor.background#1A1A1A
editor.foldBackground#1A4E8280
editor.foreground#E0E0E0
editor.lineHighlightBorder#647382
editor.selectionBackground#693F15
editor.selectionForeground#FFFFFF
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorGroupHeader.tabsBackground#06121E
editorGutter.foldingControlForeground#FF9933
editorLineNumber.activeForeground#297BCD
editorLineNumber.foreground#515D69
editorStickyScrollHover.background#37210B
editorUnicodeHighlight.border#77899B
editorWidget.background#2B3137
editorWidget.border#246CB4
focusBorder#FF9933
foreground#E0E0E0
input.background#181B1E
inputOption.activeBorder#FF9933
keybindingLabel.border#3399FF
keybindingLabel.bottomBorder#FF9933
list.hoverBackground#00000000
menu.background#2B3137
menu.border#246CB4
menu.separatorBackground#246CB4
panelTitle.activeBorder#06121E
pickerGroup.border#246CB4
pickerGroup.foreground#3399FF
sideBar.background#181B1E
sideBarSectionHeader.background#0B2137
statusBar.background#153F69
statusBar.debuggingBackground#693F15
statusBar.noFolderBackground#103050
tab.activeForeground#E0E0E0
tab.inactiveBackground#06121E
tab.inactiveForeground#E0E0E0
textPreformat.background#3E4750
textPreformat.foreground#FF9933
titleBar.activeBackground#103050
titleBar.activeForeground#E0E0E0
titleBar.inactiveBackground#2B3137
titleBar.inactiveForeground#C3E1FF
widget.border#246CB4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.bold	#FDB975	bold
markup.italic	#FDB975	italic
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.inserted	#20A820	—
markup.deleted	#A82020	—
markup.changed	#2020A8	—
invalid	#FC3030	—
comment, punctuation.definition.comment	#949494	italic
meta.preprocessor, keyword.operator, punctuation.accessor, punctuation.definition, punctuation.math, punctuation.other, punctuation.section, punctuation.separator, punctuation.terminator, storage.type.function.arrow	#E0E0E0	—
constant.character, constant.language, constant.numeric, constant.other, punctuation.definition.bold, punctuation.separator.pointer-access	#FAC832	—
punctuation.definition.string, string, punctuation.definition.quote	#C8FA32	—
entity.name.section, markup.heading, heading, punctuation.definition.heading	#64FA32	bold
constant.other.caps, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.declaration, keyword.struct	#50C828	—
entity.name.tag, entity.name.variable.event	#28C8A0	—
constant.character.math, entity.name.variable, entity.other.attribute-name, markup.inline, meta.attribute, meta.function-call.arguments, meta.member, meta.object.member, meta.property-value, punctuation.definition.constant.math, storage.modifier.import, support.class.math, support.type.property-name, variable	#32C8FA	—
entity.name.variable.parameter, meta.parameter.initialization, variable.parameter	#7A9AFA	italic
constant.other.general.math, entity.name.function, keyword.operator.sizeof, meta.function-call.generic, support.function	#9A7AFA	—
keyword.control, keyword.operator.delete, keyword.operator.expression.new, keyword.operator.new, keyword.other, keyword.other.type, keyword.type, punctuation.definition.directive, storage.modifier, storage.type.modifier, storage.type	#FA7A9A	—

VS Code preview

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

CheYHinSpark Theme — CheYHinSpark Blue 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#1A4E82
activityBar.background#D1D1D1
activityBar.dropBorder#1A4E82
activityBar.foreground#1A4E82
activityBar.inactiveForeground#8A9FB4
activityBarBadge.background#FF9933
activityBarBadge.foreground#000000
activityBarTop.activeBorder#1A4E82
activityBarTop.dropBorder#1A4E82
activityBarTop.foreground#1A4E82
activityBarTop.inactiveForeground#8A9FB4
badge.background#FF9933
badge.foreground#000000
button.background#1A4E82
button.foreground#FFFFFF
button.hoverBackground#153F69
button.secondaryBackground#333333
button.secondaryForeground#E0E0E0
button.secondaryHoverBackground#1A1A1A
editor.background#F0F0F0
editor.findMatchBackground#C3E1FF
editor.findMatchHighlightBackground#FF993340
editor.foldBackground#94949440
editor.foreground#1A1A1A
editor.lineHighlightBorder#C3E1FF
editor.rangeHighlightBackground#FF993340
editor.selectionBackground#C3E1FF
editorCursor.foreground#000000
editorGroupHeader.tabsBackground#E0E0E0
editorLineNumber.activeForeground#297BCD
editorLineNumber.foreground#A3A3A3
editorWidget.background#E0E0E0
editorWidget.border#246CB4
focusBorder#246CB4
foreground#1A1A1A
keybindingLabel.border#3399FF
keybindingLabel.bottomBorder#C3E1FF
list.activeSelectionBackground#1A4E82
list.hoverBackground#C3E1FF
list.inactiveSelectionBackground#B0CBE6
menu.background#E0E0E0
menu.border#246CB4
menu.separatorBackground#246CB4
minimap.findMatchHighlight#FF9933
minimap.selectionHighlight#C3E1FF
panel.border#8A9FB4
panelTitle.activeBorder#3399FF
pickerGroup.border#246CB4
pickerGroup.foreground#246CB4
sideBar.background#E0E0E0
sideBar.border#8A9FB4
sideBarSectionHeader.foreground#1A4E82
statusBar.background#246CB4
statusBar.debuggingBackground#B46C24
statusBar.noFolderBackground#8A9FB4
tab.activeBorderTop#3399FF
tab.border#BDBDBD
tab.dragAndDropBorder#3399FF
tab.hoverBackground#D1D1D1
tab.inactiveBackground#E0E0E0
textPreformat.background#F0F0F0
textPreformat.foreground#B46C24
titleBar.activeBackground#D1D1D1
titleBar.activeForeground#1A4E82
titleBar.border#8A9FB4
widget.border#1A4E82

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.bold	#FC9630	bold
markup.italic	#FC9630	italic
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.inserted	#20A820	—
markup.deleted	#A82020	—
markup.changed	#2020A8	—
invalid	#FC3030	—
comment, punctuation.definition.comment	#949494	italic
meta.preprocessor, keyword.operator, punctuation.accessor, punctuation.definition, punctuation.math, punctuation.other, punctuation.section, punctuation.separator, punctuation.terminator, storage.type.function.arrow	#595959	—
constant.character, constant.language, constant.numeric, constant.other, punctuation.definition.bold, punctuation.separator.pointer-access	#A08020	—
punctuation.definition.string, string, punctuation.definition.quote	#80A020	—
entity.name.section, markup.heading, heading, punctuation.definition.heading	#50C828	bold
constant.other.caps, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.declaration, keyword.struct	#40A020	—
entity.name.tag, entity.name.variable.event	#20A040	—
constant.character.math, entity.name.variable, entity.other.attribute-name, markup.inline, meta.attribute, meta.function-call.arguments, meta.member, meta.object.member, meta.property-value, punctuation.definition.constant.math, storage.modifier.import, support.class.math, support.type.property-name, variable	#2080A0	—
entity.name.variable.parameter, meta.parameter.initialization, variable.parameter	#2850C8	italic
constant.other.general.math, entity.name.function, keyword.operator.sizeof, meta.function-call.generic, support.function	#5028C8	—
keyword.control, keyword.operator.delete, keyword.operator.expression.new, keyword.operator.new, keyword.other, keyword.other.type, keyword.type, punctuation.definition.directive, storage.modifier, storage.type.modifier, storage.type	#A02040	—

VS Code preview

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

CheYHinSpark Theme — CheYHinSpark Green

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#33FF99
activityBar.background#2B3731
activityBar.dropBorder#33FF99
activityBar.foreground#33FF99
activityBar.inactiveForeground#648273
activityBarBadge.background#9B1F5D
activityBarTop.activeBorder#33FF99
activityBarTop.dropBorder#33FF99
activityBarTop.foreground#33FF99
activityBarTop.inactiveForeground#648273
badge.background#9B1F5D
button.background#15693F
button.border#105030
button.foreground#FFFFFF
button.hoverBackground#1A824E
button.secondaryBackground#1A1A1A
button.secondaryForeground#E0E0E0
button.secondaryHoverBackground#1A824E
checkbox.foreground#C3FFE1
dropdown.background#181E1B
dropdown.border#105030
dropdown.listBackground#181E1B
editor.background#1A1A1A
editor.findMatchBackground#1A824E
editor.findMatchHighlightBackground#1A824E80
editor.foldBackground#10503080
editor.foldPlaceholderForeground#E0E0E0
editor.foreground#D1D1D1
editor.lineHighlightBorder#648273
editor.selectionBackground#3E5047
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorCursor.foreground#FFFFFF
editorGroupHeader.tabsBackground#181E1B
editorLineNumber.activeForeground#29CD7B
editorLineNumber.foreground#51695D
editorStickyScroll.border#105030
editorStickyScrollHover.background#0B3721
editorUnicodeHighlight.border#779B89
editorWidget.background#2B3731
editorWidget.border#1A824E
focusBorder#1A824E
foreground#E0E0E0
input.background#181E1B
input.border#105030
keybindingLabel.border#33FF99
keybindingLabel.bottomBorder#C3FFE1
list.activeSelectionBackground#15693F
list.hoverBackground#3E5047
list.inactiveSelectionBackground#0B3721
menu.background#2B3731
menu.border#1A824E
menu.separatorBackground#1A824E
minimap.findMatchHighlight#1F9B5D
minimap.selectionHighlight#3E5047
panel.border#105030
panelTitle.activeBorder#33FF99
pickerGroup.border#1A824E
pickerGroup.foreground#33FF99
sideBar.background#181E1B
sideBar.border#105030
sideBarSectionHeader.background#0B3721
sideBarSectionHeader.foreground#C3FFE1
statusBar.background#105030
statusBar.debuggingBackground#69153F
statusBar.noFolderBackground#0B3721
tab.activeBorderTop#33FF99
tab.dragAndDropBorder#33FF99
tab.hoverBackground#0B3721
tab.inactiveBackground#181E1B
textPreformat.foreground#C3FFE1
titleBar.activeBackground#2B3731
titleBar.activeForeground#C3FFE1
widget.border#1A824E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.bold	#FDB975	bold
markup.italic	#FDB975	italic
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.inserted	#20A820	—
markup.deleted	#A82020	—
markup.changed	#2020A8	—
invalid	#FC3030	—
comment, punctuation.definition.comment	#949494	italic
meta.preprocessor, keyword.operator, punctuation.accessor, punctuation.definition, punctuation.math, punctuation.other, punctuation.section, punctuation.separator, punctuation.terminator, storage.type.function.arrow	#D1D1D1	—
constant.character, constant.language, constant.numeric, constant.other, punctuation.definition.bold, punctuation.separator.pointer-access	#EAC65A	—
punctuation.definition.string, string, punctuation.definition.quote	#C6EA5A	—
entity.name.section, markup.heading, heading, punctuation.definition.heading	#7EEA5A	bold
constant.other.caps, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.declaration, keyword.struct	#73BE5A	—
entity.name.tag, entity.name.variable.event	#5ABEA5	—
constant.character.math, entity.name.variable, entity.other.attribute-name, markup.inline, meta.attribute, meta.function-call.arguments, meta.member, meta.object.member, meta.property-value, punctuation.definition.constant.math, storage.modifier.import, support.class.math, support.type.property-name, variable	#5AC6EA	—
entity.name.variable.parameter, meta.parameter.initialization, variable.parameter	#7896F0	italic
constant.other.general.math, entity.name.function, keyword.operator.sizeof, meta.function-call.generic, support.function	#AA91F5	—
keyword.control, keyword.operator.delete, keyword.operator.expression.new, keyword.operator.new, keyword.other, keyword.other.type, keyword.type, punctuation.definition.directive, storage.modifier, storage.type.modifier, storage.type	#D25A78	—