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 Green 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#FF3399
activityBar.background#2B3731
activityBar.dropBorder#FF3399
activityBar.foreground#FF3399
activityBar.inactiveForeground#29CD7B
activityBarBadge.background#24B46C
badge.background#24B46C
breadcrumb.activeSelectionForeground#FF3399
breadcrumb.focusForeground#FF3399
button.background#2B3731
button.foreground#E0E0E0
button.hoverBackground#3E5047
button.secondaryBackground#15693F
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#1A824E
chat.requestBubbleBackground#181E1B80
chat.requestBubbleHoverBackground#2B373180
checkbox.foreground#FF3399
contrastActiveBorder#FF3399
contrastBorder#15693F
dropdown.background#181E1B
dropdown.listBackground#181E1B
editor.background#1A1A1A
editor.foldBackground#1A824E80
editor.foreground#E0E0E0
editor.lineHighlightBorder#648273
editor.selectionBackground#69153F
editor.selectionForeground#FFFFFF
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorGroupHeader.tabsBackground#061E12
editorGutter.foldingControlForeground#FF3399
editorLineNumber.activeForeground#29CD7B
editorLineNumber.foreground#51695D
editorStickyScrollHover.background#370B21
editorUnicodeHighlight.border#779B89
editorWidget.background#2B3731
editorWidget.border#24B46C
focusBorder#FF3399
foreground#E0E0E0
input.background#181E1B
inputOption.activeBorder#FF3399
keybindingLabel.border#33FF99
keybindingLabel.bottomBorder#FF3399
list.hoverBackground#00000000
menu.background#2B3731
menu.border#24B46C
menu.separatorBackground#24B46C
panelTitle.activeBorder#061E12
pickerGroup.border#24B46C
pickerGroup.foreground#33FF99
sideBar.background#181E1B
sideBarSectionHeader.background#0B3721
statusBar.background#15693F
statusBar.debuggingBackground#69153F
statusBar.noFolderBackground#105030
tab.activeForeground#E0E0E0
tab.inactiveBackground#061E12
tab.inactiveForeground#E0E0E0
textPreformat.background#3E5047
textPreformat.foreground#FF3399
titleBar.activeBackground#105030
titleBar.activeForeground#E0E0E0
titleBar.inactiveBackground#2B3731
titleBar.inactiveForeground#C3FFE1
widget.border#24B46C

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 Green 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#1A824E
activityBar.background#D1D1D1
activityBar.dropBorder#1A824E
activityBar.foreground#1A824E
activityBar.inactiveForeground#8AB49F
activityBarBadge.background#FF3399
activityBarBadge.foreground#000000
activityBarTop.activeBorder#1A824E
activityBarTop.dropBorder#1A824E
activityBarTop.foreground#1A824E
activityBarTop.inactiveForeground#8AB49F
badge.background#FF3399
badge.foreground#000000
button.background#1A824E
button.foreground#FFFFFF
button.hoverBackground#15693F
button.secondaryBackground#333333
button.secondaryForeground#E0E0E0
button.secondaryHoverBackground#1A1A1A
editor.background#F0F0F0
editor.findMatchBackground#C3FFE1
editor.findMatchHighlightBackground#FF339940
editor.foldBackground#94949440
editor.foreground#1A1A1A
editor.lineHighlightBorder#C3FFE1
editor.rangeHighlightBackground#FF339940
editor.selectionBackground#C3FFE1
editorCursor.foreground#000000
editorGroupHeader.tabsBackground#E0E0E0
editorLineNumber.activeForeground#29CD7B
editorLineNumber.foreground#A3A3A3
editorWidget.background#E0E0E0
editorWidget.border#24B46C
focusBorder#24B46C
foreground#1A1A1A
keybindingLabel.border#33FF99
keybindingLabel.bottomBorder#C3FFE1
list.activeSelectionBackground#1A824E
list.hoverBackground#C3FFE1
list.inactiveSelectionBackground#B0E6CB
menu.background#E0E0E0
menu.border#24B46C
menu.separatorBackground#24B46C
minimap.findMatchHighlight#FF3399
minimap.selectionHighlight#C3FFE1
panel.border#8AB49F
panelTitle.activeBorder#33FF99
pickerGroup.border#24B46C
pickerGroup.foreground#24B46C
sideBar.background#E0E0E0
sideBar.border#8AB49F
sideBarSectionHeader.foreground#1A824E
statusBar.background#24B46C
statusBar.debuggingBackground#B4246C
statusBar.noFolderBackground#8AB49F
tab.activeBorderTop#33FF99
tab.border#BDBDBD
tab.dragAndDropBorder#33FF99
tab.hoverBackground#D1D1D1
tab.inactiveBackground#E0E0E0
textPreformat.background#F0F0F0
textPreformat.foreground#B4246C
titleBar.activeBackground#D1D1D1
titleBar.activeForeground#1A824E
titleBar.border#8AB49F
widget.border#1A824E

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 Purple

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#9933FF
activityBar.background#312B37
activityBar.dropBorder#9933FF
activityBar.foreground#9933FF
activityBar.inactiveForeground#736482
activityBarBadge.background#5D9B1F
activityBarTop.activeBorder#9933FF
activityBarTop.dropBorder#9933FF
activityBarTop.foreground#9933FF
activityBarTop.inactiveForeground#736482
badge.background#5D9B1F
button.background#3F1569
button.border#301050
button.foreground#FFFFFF
button.hoverBackground#4E1A82
button.secondaryBackground#1A1A1A
button.secondaryForeground#E0E0E0
button.secondaryHoverBackground#4E1A82
checkbox.foreground#E1C3FF
dropdown.background#1B181E
dropdown.border#301050
dropdown.listBackground#1B181E
editor.background#1A1A1A
editor.findMatchBackground#4E1A82
editor.findMatchHighlightBackground#4E1A8280
editor.foldBackground#30105080
editor.foldPlaceholderForeground#E0E0E0
editor.foreground#D1D1D1
editor.lineHighlightBorder#736482
editor.selectionBackground#473E50
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorCursor.foreground#FFFFFF
editorGroupHeader.tabsBackground#1B181E
editorLineNumber.activeForeground#7B29CD
editorLineNumber.foreground#5D5169
editorStickyScroll.border#301050
editorStickyScrollHover.background#210B37
editorUnicodeHighlight.border#89779B
editorWidget.background#312B37
editorWidget.border#4E1A82
focusBorder#4E1A82
foreground#E0E0E0
input.background#1B181E
input.border#301050
keybindingLabel.border#9933FF
keybindingLabel.bottomBorder#E1C3FF
list.activeSelectionBackground#3F1569
list.hoverBackground#473E50
list.inactiveSelectionBackground#210B37
menu.background#312B37
menu.border#4E1A82
menu.separatorBackground#4E1A82
minimap.findMatchHighlight#5D1F9B
minimap.selectionHighlight#473E50
panel.border#301050
panelTitle.activeBorder#9933FF
pickerGroup.border#4E1A82
pickerGroup.foreground#9933FF
sideBar.background#1B181E
sideBar.border#301050
sideBarSectionHeader.background#210B37
sideBarSectionHeader.foreground#E1C3FF
statusBar.background#301050
statusBar.debuggingBackground#3F6915
statusBar.noFolderBackground#210B37
tab.activeBorderTop#9933FF
tab.dragAndDropBorder#9933FF
tab.hoverBackground#210B37
tab.inactiveBackground#1B181E
textPreformat.foreground#E1C3FF
titleBar.activeBackground#312B37
titleBar.activeForeground#E1C3FF
widget.border#4E1A82

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 Purple 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#99FF33
activityBar.background#312B37
activityBar.dropBorder#99FF33
activityBar.foreground#99FF33
activityBar.inactiveForeground#7B29CD
activityBarBadge.background#6C24B4
badge.background#6C24B4
breadcrumb.activeSelectionForeground#99FF33
breadcrumb.focusForeground#99FF33
button.background#312B37
button.foreground#E0E0E0
button.hoverBackground#473E50
button.secondaryBackground#3F1569
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#4E1A82
chat.requestBubbleBackground#1B181E80
chat.requestBubbleHoverBackground#312B3780
checkbox.foreground#99FF33
contrastActiveBorder#99FF33
contrastBorder#3F1569
dropdown.background#1B181E
dropdown.listBackground#1B181E
editor.background#1A1A1A
editor.foldBackground#4E1A8280
editor.foreground#E0E0E0
editor.lineHighlightBorder#736482
editor.selectionBackground#3F6915
editor.selectionForeground#FFFFFF
editorBracketHighlight.foreground1#FCFC30
editorBracketHighlight.foreground2#FC30FC
editorBracketHighlight.foreground3#30FCFC
editorGroupHeader.tabsBackground#12061E
editorGutter.foldingControlForeground#99FF33
editorLineNumber.activeForeground#7B29CD
editorLineNumber.foreground#5D5169
editorStickyScrollHover.background#21370B
editorUnicodeHighlight.border#89779B
editorWidget.background#312B37
editorWidget.border#6C24B4
focusBorder#99FF33
foreground#E0E0E0
input.background#1B181E
inputOption.activeBorder#99FF33
keybindingLabel.border#9933FF
keybindingLabel.bottomBorder#99FF33
list.hoverBackground#00000000
menu.background#312B37
menu.border#6C24B4
menu.separatorBackground#6C24B4
panelTitle.activeBorder#12061E
pickerGroup.border#6C24B4
pickerGroup.foreground#9933FF
sideBar.background#1B181E
sideBarSectionHeader.background#210B37
statusBar.background#3F1569
statusBar.debuggingBackground#3F6915
statusBar.noFolderBackground#301050
tab.activeForeground#E0E0E0
tab.inactiveBackground#12061E
tab.inactiveForeground#E0E0E0
textPreformat.background#473E50
textPreformat.foreground#99FF33
titleBar.activeBackground#301050
titleBar.activeForeground#E0E0E0
titleBar.inactiveBackground#312B37
titleBar.inactiveForeground#E1C3FF
widget.border#6C24B4

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	—