Cookie Tin Theme

Name: Cookie Tin Theme
Author: Gabriel Lathos

Publisher: Gabriel LathosThemes in package: 5

Celestial theme for butter cookies that love to code

Open in VS Code GitHub

Color themes

VS Code preview

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

Cookie Tin Theme — Banana Drip

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#917b34
activityBar.foreground#120F09
activityBar.inactiveForeground#120F09
activityBarBadge.background#211B12
activityBarBadge.foreground#E8C95A
badge.background#211B12
badge.foreground#E8C95A
button.background#5B4C1E
button.foreground#F2E8D2
button.hoverBackground#6D5B24
button.secondaryBackground#6B5A28
button.secondaryForeground#F2E8D2
button.secondaryHoverBackground#7A6830
descriptionForeground#CDBD91
dropdown.background#302816
dropdown.border#6B5A28
dropdown.foreground#F2E8D2
editor.background#232038
editor.findMatchBackground#E8C95A99
editor.findMatchHighlightBackground#E8C95A44
editor.foreground#F2E8D2
editor.inactiveSelectionBackground#917b3466
editor.lineHighlightBackground#4B3F25
editor.selectionBackground#917b34AA
editor.selectionHighlightBackground#E8C95A33
editorBracketMatch.background#6B5A2899
editorBracketMatch.border#E8C95A
editorCursor.foreground#E8C95A
editorGroupHeader.tabsBackground#917b34
editorIndentGuide.activeBackground1#E8C95A66
editorIndentGuide.background1#6B5A2855
editorLineNumber.activeForeground#E8C95A
editorLineNumber.foreground#9B8B60
editorSuggestWidget.selectedBackground#917b3488
editorWhitespace.foreground#6B5A2866
editorWidget.background#917b34
editorWidget.border#6B5A28
editorWidget.foreground#120F09
errorForeground#D6979D
focusBorder#E8C95A
foreground#F2E8D2
input.background#302816
input.border#6B5A28
input.foreground#F2E8D2
list.activeSelectionBackground#5B4C1E
list.activeSelectionForeground#F2E8D2
list.highlightForeground#120F09
list.hoverBackground#6B5A2855
list.inactiveSelectionBackground#917b3488
notificationCenterHeader.background#3D351F
notifications.background#917b34
notifications.border#6B5A28
notifications.foreground#120F09
progressBar.background#E8C95A
sideBar.background#917b34
sideBar.foreground#120F09
sideBarSectionHeader.background#917b34
sideBarSectionHeader.foreground#120F09
sideBarTitle.foreground#120F09
statusBar.background#917b34
statusBar.debuggingBackground#E8C95A
statusBar.debuggingForeground#120F09
statusBar.foreground#120F09
statusBar.noFolderBackground#917b34
statusBar.noFolderForeground#120F09
statusBarItem.hoverBackground#6B5A28
tab.activeBackground#232038
tab.activeBorderTop#E8C95A
tab.activeForeground#F2E8D2
tab.border#6B5A2855
tab.inactiveBackground#917b34
tab.inactiveForeground#120F09
terminal.background#232038
terminal.foreground#F2E8D2
terminalCursor.foreground#E8C95A
textLink.activeForeground#F2E8D2
textLink.foreground#E8C95A
titleBar.activeBackground#917b34
titleBar.activeForeground#120F09
titleBar.inactiveBackground#917b34
titleBar.inactiveForeground#120F09

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#CDBD91	italic
keyword, storage, storage.type, storage.modifier	#E8C95A	—
string, constant.other.symbol	#A9D18E	—
constant.numeric, constant.language, constant.character, constant.escape	#F0A0A8	—
entity.name.function, meta.function-call, variable.function, support.function	#8FC7E8	—
entity.name.type, entity.name.class, support.type, support.class	#D6B3F0	—
variable, support.variable	#F2E8D2	—
entity.name.tag, entity.other.attribute-name	#F2A65A	—
keyword.operator, punctuation, meta.tag	#D5C8A8	—
invalid, invalid.illegal	#F0B4B8	—

VS Code preview

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

Cookie Tin Theme — Celestial Sailor

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#352452
activityBar.foreground#DDD5C0
activityBar.inactiveForeground#B4A9C4
activityBarBadge.background#C3A2F2
activityBarBadge.foreground#21172F
badge.background#C3A2F2
badge.foreground#21172F
button.background#49306F
button.foreground#F1EBDD
button.hoverBackground#5A3D86
button.secondaryBackground#66536E
button.secondaryForeground#F1EBDD
button.secondaryHoverBackground#76617F
descriptionForeground#B4A9C4
dropdown.background#302040
dropdown.border#66536E
dropdown.foreground#F1EBDD
editor.background#1e1d38
editor.findMatchBackground#C3A2F299
editor.findMatchHighlightBackground#C3A2F244
editor.foreground#F1EBDD
editor.inactiveSelectionBackground#49306F66
editor.lineHighlightBackground#352452
editor.selectionBackground#49306FAA
editor.selectionHighlightBackground#C3A2F233
editorBracketMatch.background#66536E99
editorBracketMatch.border#DDD5C0
editorCursor.foreground#DDD5C0
editorGroupHeader.tabsBackground#352452
editorIndentGuide.activeBackground1#C3A2F266
editorIndentGuide.background1#66536E55
editorLineNumber.activeForeground#DDD5C0
editorLineNumber.foreground#82728F
editorSuggestWidget.selectedBackground#49306F88
editorWhitespace.foreground#66536E66
editorWidget.background#352452
editorWidget.border#66536E
errorForeground#D6979D
focusBorder#C3A2F2
foreground#F1EBDD
input.background#302040
input.border#66536E
input.foreground#F1EBDD
list.activeSelectionBackground#49306F
list.activeSelectionForeground#F1EBDD
list.highlightForeground#DDD5C0
list.hoverBackground#66536E55
list.inactiveSelectionBackground#49306F88
notificationCenterHeader.background#42334A
notifications.background#352452
notifications.border#66536E
progressBar.background#DDD5C0
sideBar.background#352452
sideBar.foreground#D8D0DF
sideBarSectionHeader.background#352452
sideBarSectionHeader.foreground#DDD5C0
sideBarTitle.foreground#DDD5C0
statusBar.background#352452
statusBar.debuggingBackground#C3A2F2
statusBar.debuggingForeground#21172F
statusBar.foreground#F1EBDD
statusBar.noFolderBackground#352452
statusBarItem.hoverBackground#66536E
tab.activeBackground#21172F
tab.activeBorderTop#DDD5C0
tab.activeForeground#F1EBDD
tab.border#66536E55
tab.inactiveBackground#352452
tab.inactiveForeground#B4A9C4
terminal.background#21172F
terminal.foreground#F1EBDD
terminalCursor.foreground#DDD5C0
textLink.activeForeground#F1EBDD
textLink.foreground#DDD5C0
titleBar.activeBackground#352452
titleBar.activeForeground#DDD5C0
titleBar.inactiveBackground#352452

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#B4A9C4	italic
keyword, storage, storage.type, storage.modifier	#C3A2F2	—
string, constant.other.symbol	#D9C79C	—
constant.numeric, constant.language, constant.character, constant.escape	#D6979D	—
entity.name.function, meta.function-call, variable.function, support.function	#D2B8FF	—
entity.name.type, entity.name.class, support.type, support.class	#DDD5C0	—
variable, support.variable	#F1EBDD	—
entity.name.tag, entity.other.attribute-name	#DDB6D5	—
keyword.operator, punctuation, meta.tag	#CEC3D2	—
invalid, invalid.illegal	#F0B4B8	—

VS Code preview

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

Cookie Tin Theme — Celestial Seamstress

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#2f2d58
activityBar.foreground#DDD5C0
activityBar.inactiveForeground#AAA3B1
activityBarBadge.background#B397CA
activityBarBadge.foreground#1e1d38
badge.background#B397CA
badge.foreground#1e1d38
button.background#2f2d58
button.foreground#F1EBDD
button.hoverBackground#3b3970
button.secondaryBackground#5D5258
button.secondaryForeground#F1EBDD
button.secondaryHoverBackground#6D6168
descriptionForeground#AAA3B1
dropdown.background#2f293d
dropdown.border#5D5258
dropdown.foreground#F1EBDD
editor.background#1e1d38
editor.findMatchBackground#B397CA99
editor.findMatchHighlightBackground#B397CA44
editor.foreground#F1EBDD
editor.inactiveSelectionBackground#2f2d5866
editor.lineHighlightBackground#2f2d58
editor.selectionBackground#2f2d58AA
editor.selectionHighlightBackground#B397CA33
editorBracketMatch.background#5D525899
editorBracketMatch.border#DDD5C0
editorCursor.foreground#DDD5C0
editorGroupHeader.tabsBackground#2f2d58
editorIndentGuide.activeBackground1#B397CA66
editorIndentGuide.background1#5D525855
editorLineNumber.activeForeground#DDD5C0
editorLineNumber.foreground#756D80
editorSuggestWidget.selectedBackground#3b3970
editorWhitespace.foreground#5D525866
editorWidget.background#2f2d58
editorWidget.border#5D5258
errorForeground#D6979D
focusBorder#B397CA
foreground#F1EBDD
input.background#2f293d
input.border#5D5258
input.foreground#F1EBDD
list.activeSelectionBackground#2f2d58
list.activeSelectionForeground#F1EBDD
list.focusBackground#3b3970
list.focusForeground#F1EBDD
list.focusHighlightForeground#DDD5C0
list.focusOutline#B397CA66
list.highlightForeground#DDD5C0
list.hoverBackground#5D525855
list.inactiveSelectionBackground#2f2d5888
notificationCenterHeader.background#3A373E
notifications.background#2f2d58
notifications.border#5D5258
pickerGroup.border#5D5258
pickerGroup.foreground#DDD5C0
progressBar.background#DDD5C0
quickInput.background#2f2d58
quickInput.foreground#F1EBDD
quickInputList.focusBackground#3b3970
quickInputList.focusForeground#F1EBDD
quickInputList.focusIconForeground#DDD5C0
quickInputTitle.background#1e1d38
sideBar.background#2f2d58
sideBar.foreground#D4CED8
sideBarSectionHeader.background#2f2d58
sideBarSectionHeader.foreground#DDD5C0
sideBarTitle.foreground#DDD5C0
statusBar.background#2f2d58
statusBar.debuggingBackground#B397CA
statusBar.debuggingForeground#1e1d38
statusBar.foreground#F1EBDD
statusBar.noFolderBackground#2f2d58
statusBarItem.hoverBackground#5D5258
tab.activeBackground#1e1d38
tab.activeBorderTop#DDD5C0
tab.activeForeground#F1EBDD
tab.border#5D525855
tab.inactiveBackground#2f2d58
tab.inactiveForeground#AAA3B1
terminal.background#1e1d38
terminal.foreground#F1EBDD
terminalCursor.foreground#DDD5C0
textLink.activeForeground#F1EBDD
textLink.foreground#DDD5C0
titleBar.activeBackground#2f2d58
titleBar.activeForeground#DDD5C0
titleBar.inactiveBackground#2f2d58

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#AAA3B1	italic
keyword, storage, storage.type, storage.modifier	#B397CA	—
string, constant.other.symbol	#D9C79C	—
constant.numeric, constant.language, constant.character, constant.escape	#D6979D	—
entity.name.function, meta.function-call, variable.function, support.function	#C9C0F0	—
entity.name.type, entity.name.class, support.type, support.class	#DDD5C0	—
variable, support.variable	#F1EBDD	—
entity.name.tag, entity.other.attribute-name	#D9B1C8	—
keyword.operator, punctuation, meta.tag	#C7BEC5	—
invalid, invalid.illegal	#F0B4B8	—

VS Code preview

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

Cookie Tin Theme — Codename: Seamstress

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#151518
activityBar.foreground#D9B85F
activityBar.inactiveForeground#8E8C88
activityBarBadge.background#B397CA
activityBarBadge.foreground#101012
badge.background#D9B85F
badge.foreground#101012
button.background#3A3442
button.foreground#F0ECE4
button.hoverBackground#4A4254
button.secondaryBackground#2B2B2F
button.secondaryForeground#D8D8D6
button.secondaryHoverBackground#36363A
descriptionForeground#A9A7A2
dropdown.background#151518
dropdown.border#3A3442
dropdown.foreground#E6E2D8
editor.background#101012
editor.findMatchBackground#D9B85F99
editor.findMatchHighlightBackground#B397CA44
editor.foreground#E6E2D8
editor.inactiveSelectionBackground#3A344266
editor.lineHighlightBackground#1E1E22
editor.selectionBackground#3A3442AA
editor.selectionHighlightBackground#B397CA33
editorBracketMatch.background#3A344299
editorBracketMatch.border#D8D8D6
editorCursor.foreground#D9B85F
editorGroupHeader.tabsBackground#1A1A1D
editorIndentGuide.activeBackground1#B397CA66
editorIndentGuide.background1#5A5A5E55
editorLineNumber.activeForeground#D9B85F
editorLineNumber.foreground#77777A
editorSuggestWidget.selectedBackground#3A344288
editorWhitespace.foreground#5A5A5E66
editorWidget.background#1A1A1D
editorWidget.border#3A3442
editorWidget.foreground#E6E2D8
errorForeground#E58B8F
focusBorder#B397CA
foreground#E6E2D8
input.background#151518
input.border#3A3442
input.foreground#E6E2D8
list.activeSelectionBackground#3A3442
list.activeSelectionForeground#F0ECE4
list.highlightForeground#D9B85F
list.hoverBackground#2B2B2F
list.inactiveSelectionBackground#2B2B2F
notificationCenterHeader.background#2B2B2F
notifications.background#1A1A1D
notifications.border#3A3442
notifications.foreground#E6E2D8
progressBar.background#B397CA
sideBar.background#1A1A1D
sideBar.foreground#D8D8D6
sideBarSectionHeader.background#1A1A1D
sideBarSectionHeader.foreground#D9B85F
sideBarTitle.foreground#D9B85F
statusBar.background#151518
statusBar.debuggingBackground#B397CA
statusBar.debuggingForeground#101012
statusBar.foreground#D8D8D6
statusBar.noFolderBackground#151518
statusBar.noFolderForeground#D8D8D6
statusBarItem.hoverBackground#2B2B2F
tab.activeBackground#101012
tab.activeBorderTop#D9B85F
tab.activeForeground#F0ECE4
tab.border#2B2B2F
tab.inactiveBackground#1A1A1D
tab.inactiveForeground#A9A7A2
terminal.background#101012
terminal.foreground#E6E2D8
terminalCursor.foreground#D9B85F
textLink.activeForeground#F0ECE4
textLink.foreground#D9B85F
titleBar.activeBackground#151518
titleBar.activeForeground#D8D8D6
titleBar.inactiveBackground#151518
titleBar.inactiveForeground#8E8C88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8E8C88	italic
keyword, storage, storage.type, storage.modifier	#B397CA	—
string, constant.other.symbol	#D9B85F	—
constant.numeric, constant.language, constant.character, constant.escape	#E58B8F	—
entity.name.function, meta.function-call, variable.function, support.function	#D8D8D6	—
entity.name.type, entity.name.class, support.type, support.class	#C9C0F0	—
variable, support.variable	#E6E2D8	—
entity.name.tag, entity.other.attribute-name	#D9C79C	—
keyword.operator, punctuation, meta.tag	#AFAEAD	—
invalid, invalid.illegal	#F0B4B8	—