themesmith

Name: themesmith
Author: CyberBoost

Publisher: CyberBoostThemes in package: 583

Handcrafted VS Code themes + live theme generator + community gallery. Create, preview, and share themes!

Open in VS Code GitHub

Color themes

VS Code preview

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

themesmith — summary

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

VS Code preview

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

themesmith — Summary

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

VS Code preview

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

themesmith — Sun Bliss Orange

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#FFB84D
activityBar.background#2b1505
activityBar.foreground#FFB84D
activityBarBadge.background#FF7F00
activityBarBadge.foreground#ffffff
badge.background#FF8C00
badge.foreground#ffffff
button.background#FF8C00
button.foreground#ffffff
button.hoverBackground#FF9F33
dropdown.background#261a0e
dropdown.border#7a5c44
dropdown.foreground#F5E8D0
editor.background#201111
editor.findMatchBackground#FFB84D44
editor.findMatchHighlightBackground#FFB84D22
editor.foreground#F5E8D0
editor.lineHighlightBackground#FF8C0040
editor.lineHighlightBorder#FF8C0060
editor.selectionBackground#FF8C0030
editor.selectionHighlightBackground#FF8C0020
editorBracketMatch.background#FFB84D33
editorBracketMatch.border#FFB84D
editorCursor.foreground#FFB84D
editorGroupHeader.tabsBackground#201111
editorIndentGuide.activeBackground#7a5c4480
editorIndentGuide.background#7a5c4440
editorLineNumber.activeForeground#FFB84D
editorLineNumber.foreground#9a7a5c
editorWhitespace.foreground#7a5c44
focusBorder#FF8C00
gitDecoration.conflictingResourceForeground#FFDB4D
gitDecoration.deletedResourceForeground#FF6E4D
gitDecoration.modifiedResourceForeground#FFB84D
gitDecoration.untrackedResourceForeground#B7FF6E
input.background#261a0e
input.border#7a5c44
input.foreground#F5E8D0
input.placeholderForeground#9a7a5c
inputOption.activeBorder#FFB84D
list.activeSelectionBackground#FF8C00
list.activeSelectionForeground#ffffff
list.focusBackground#FF8C00
list.highlightForeground#FFB84D
list.hoverBackground#FF8C0044
minimap.background#201111
minimapSlider.activeBackground#FFB84D66
minimapSlider.background#FFB84D22
minimapSlider.hoverBackground#FFB84D44
panel.background#201111
panel.border#FF8C00
panelTitle.activeBorder#FFB84D
panelTitle.activeForeground#FFB84D
panelTitle.inactiveForeground#F5D1A9
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#FFB84D88
scrollbarSlider.background#9a7a5c44
scrollbarSlider.hoverBackground#9a7a5c88
sideBar.background#261a0e
sideBar.foreground#F5D1A9
sideBarSectionHeader.background#2b1505
sideBarSectionHeader.foreground#FFB84D
sideBarTitle.foreground#FFB84D
statusBar.background#FF8C00
statusBar.debuggingBackground#FFB84D
statusBar.foreground#ffffff
statusBar.noFolderBackground#2b1505
statusBarItem.hoverBackground#FF9F33
tab.activeBackground#3a1e0a
tab.activeBorder#FFB84D
tab.activeForeground#ffffff
tab.border#201111
tab.inactiveBackground#261a0e
tab.inactiveForeground#F5D1A9
terminal.ansiBlue#6EB5FF
terminal.ansiBrightBlue#99CCFF
terminal.ansiBrightCyan#99FFFF
terminal.ansiBrightGreen#CCFF99
terminal.ansiBrightMagenta#FF99FF
terminal.ansiBrightRed#FF9999
terminal.ansiBrightYellow#FFEE99
terminal.ansiCyan#6EFFFF
terminal.ansiGreen#B7FF6E
terminal.ansiMagenta#FF6EFF
terminal.ansiRed#FF6E4D
terminal.ansiYellow#FFDB4D
terminal.background#201111
terminal.foreground#F5E8D0
titleBar.activeBackground#2b1505
titleBar.activeForeground#F5E8D0
titleBar.inactiveBackground#201111
titleBar.inactiveForeground#F5D1A9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9a7a5c	italic
string, string.quoted, string.template	#FFD166	—
keyword, storage.type, storage.modifier	#FF8C00	bold
keyword.operator, punctuation.accessor	#FFB84D	—
variable, variable.other	#F5E8D0	—
variable.parameter	#FFC966	italic
entity.name.function, support.function	#FFB84D	—
meta.function-call	#FFD1A9	—
entity.name.class, entity.name.type.class, support.class	#FF9C33	bold
entity.name.type, support.type	#FF9C33	—
entity.name.type.interface	#6EB5FF	italic
constant.numeric	#FFC966	—
constant, constant.language, constant.character	#FFB84D	—
constant.language.boolean	#FFC966	bold
variable.other.property, support.variable.property	#FFD1A9	—
meta.object-literal.key	#FF9C33	—
entity.name.tag, punctuation.definition.tag	#FF8C00	—
entity.other.attribute-name	#FFC966	italic
punctuation, meta.brace	#FFB84D	—
string.regexp	#FFC966	—
constant.character.escape	#6EB5FF	—
meta.decorator, punctuation.decorator	#FFC966	—
invalid, invalid.illegal	#FF4C33	strikethrough
markup.heading, entity.name.section	#FF8C00	bold
markup.bold	#FFC966	bold
markup.italic	#FFD166	italic
markup.underline.link	#6EB5FF	—
markup.inline.raw, markup.fenced_code	#B7FF6E	—
support.type.property-name.json	#FF8C00	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FFC966	—
support.type.property-name.css	#FF9C33	—
support.constant.property-value.css	#FFD166	—

VS Code preview

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

themesmith — Sunburst - 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#E4002B
activityBar.background#f5f5f5
activityBar.foreground#333333
activityBarBadge.background#E4002B
activityBarBadge.foreground#ffffff
badge.background#E4002B
badge.foreground#ffffff
button.background#E4002B
button.foreground#ffffff
button.hoverBackground#FF3333
dropdown.background#ffffff
dropdown.border#cccccc
dropdown.foreground#333333
editor.background#ffffff
editor.findMatchBackground#FFCC00
editor.findMatchHighlightBackground#FFE066
editor.foreground#333333
editor.lineHighlightBackground#fff7cc
editor.lineHighlightBorder#ffe680
editor.selectionBackground#FFEB99
editor.selectionHighlightBackground#FFF2CC
editorBracketMatch.background#FFE60033
editorBracketMatch.border#FFE600
editorCursor.foreground#E4002B
editorGroupHeader.tabsBackground#f5f5f5
editorIndentGuide.activeBackground#b0b0b0
editorIndentGuide.background#e0e0e0
editorLineNumber.activeForeground#333333
editorLineNumber.foreground#999999
editorWhitespace.foreground#CCCCCC
focusBorder#FFE600
gitDecoration.conflictingResourceForeground#FF8C00
gitDecoration.deletedResourceForeground#E4002B
gitDecoration.modifiedResourceForeground#007ACC
gitDecoration.untrackedResourceForeground#008000
input.background#ffffff
input.border#cccccc
input.foreground#333333
input.placeholderForeground#999999
inputOption.activeBorder#E4002B
list.activeSelectionBackground#FFE600
list.activeSelectionForeground#000000
list.focusBackground#FFE60033
list.highlightForeground#E4002B
list.hoverBackground#FFFAE6
minimap.background#ffffff
minimapSlider.activeBackground#888888
minimapSlider.background#cccccc80
minimapSlider.hoverBackground#aaaaaa
panel.background#f5f5f5
panel.border#d0d0d0
panelTitle.activeBorder#E4002B
panelTitle.activeForeground#333333
panelTitle.inactiveForeground#777777
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#888888
scrollbarSlider.background#cccccc80
scrollbarSlider.hoverBackground#aaaaaa
sideBar.background#f9f9f9
sideBar.foreground#333333
sideBarSectionHeader.background#f0f0f0
sideBarSectionHeader.foreground#333333
sideBarTitle.foreground#333333
statusBar.background#E4002B
statusBar.debuggingBackground#FF8C00
statusBar.foreground#ffffff
statusBar.noFolderBackground#CCCCCC
statusBarItem.hoverBackground#FFCC00
tab.activeBackground#ffffff
tab.activeBorder#FFE600
tab.activeForeground#E4002B
tab.border#d0d0d0
tab.inactiveBackground#f5f5f5
tab.inactiveForeground#666666
terminal.ansiBlue#007ACC
terminal.ansiBrightBlue#0099FF
terminal.ansiBrightCyan#5FD7FF
terminal.ansiBrightGreen#00FF00
terminal.ansiBrightMagenta#FF66FF
terminal.ansiBrightRed#FF3333
terminal.ansiBrightYellow#FFFF66
terminal.ansiCyan#3A96DD
terminal.ansiGreen#008000
terminal.ansiMagenta#C71585
terminal.ansiRed#E4002B
terminal.ansiYellow#FFE600
terminal.background#ffffff
terminal.foreground#333333
titleBar.activeBackground#FFE600
titleBar.activeForeground#000000
titleBar.inactiveBackground#fff8b3
titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	italic
string, string.quoted, string.template	#FFE600	—
keyword, storage.type, storage.modifier	#E4002B	bold
keyword.operator, punctuation.accessor	#E4002B	—
variable, variable.other	#007ACC	—
variable.parameter	#FF8C00	italic
entity.name.function, support.function	#008000	—
meta.function-call	#008000	—
entity.name.class, entity.name.type.class, support.class	#C71585	bold
entity.name.type, support.type	#20B2AA	—
entity.name.type.interface	#20B2AA	italic
constant.numeric	#FF8C00	—
constant, constant.language, constant.character	#20B2AA	—
constant.language.boolean	#E4002B	bold
variable.other.property, support.variable.property	#007ACC	—
meta.object-literal.key	#20B2AA	—
entity.name.tag, punctuation.definition.tag	#E4002B	—
entity.other.attribute-name	#FF8C00	italic
punctuation, meta.brace	#666666	—
string.regexp	#C71585	—
constant.character.escape	#FF8C00	—
meta.decorator, punctuation.decorator	#3A96DD	—
invalid, invalid.illegal	#FF3333	strikethrough
markup.heading, entity.name.section	#E4002B	bold
markup.bold	#E4002B	bold
markup.italic	#666666	italic
markup.underline.link	#007ACC	—
markup.inline.raw, markup.fenced_code	#008000	—
support.type.property-name.json	#20B2AA	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#C71585	—
support.type.property-name.css	#007ACC	—
support.constant.property-value.css	#008000	—