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

Kani Pajamas

VS Code preview

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

Cookie Tin Theme — Kani Pajamas

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#8E2F38
activityBar.foreground#FFF0EA
activityBar.inactiveForeground#E2B7BD
activityBarBadge.background#FFB0B7
activityBarBadge.foreground#241A24
badge.background#FFB0B7
badge.foreground#241A24
button.background#A43A45
button.foreground#FFF0EA
button.hoverBackground#B94651
button.secondaryBackground#6D3B42
button.secondaryForeground#FFF0EA
button.secondaryHoverBackground#7C474E
descriptionForeground#C8A9AE
dropdown.background#33202A
dropdown.border#6D3B42
dropdown.foreground#F3E8E1
editor.background#241A24
editor.findMatchBackground#F08A9299
editor.findMatchHighlightBackground#F08A9244
editor.foreground#F3E8E1
editor.inactiveSelectionBackground#8E2F3866
editor.lineHighlightBackground#8E2F38
editor.selectionBackground#8E2F38AA
editor.selectionHighlightBackground#F08A9233
editorBracketMatch.background#6D3B4299
editorBracketMatch.border#FFB0B7
editorCursor.foreground#FFB0B7
editorGroupHeader.tabsBackground#8E2F38
editorIndentGuide.activeBackground1#F08A9266
editorIndentGuide.background1#6D3B4255
editorLineNumber.activeForeground#FFB0B7
editorLineNumber.foreground#8C6B72
editorSuggestWidget.selectedBackground#8E2F3888
editorWhitespace.foreground#6D3B4266
editorWidget.background#8E2F38
editorWidget.border#6D3B42
editorWidget.foreground#FFF0EA
errorForeground#FFB0B7
focusBorder#F08A92
foreground#F3E8E1
input.background#33202A
input.border#6D3B42
input.foreground#F3E8E1
list.activeSelectionBackground#A43A45
list.activeSelectionForeground#FFF0EA
list.highlightForeground#FFE1DC
list.hoverBackground#6D3B4255
list.inactiveSelectionBackground#8E2F3888
notificationCenterHeader.background#442832
notifications.background#8E2F38
notifications.border#6D3B42
notifications.foreground#FFF0EA
progressBar.background#FFB0B7
sideBar.background#8E2F38
sideBar.foreground#FFF0EA
sideBarSectionHeader.background#8E2F38
sideBarSectionHeader.foreground#FFE1DC
sideBarTitle.foreground#FFE1DC
statusBar.background#8E2F38
statusBar.debuggingBackground#FFB0B7
statusBar.debuggingForeground#241A24
statusBar.foreground#FFF0EA
statusBar.noFolderBackground#8E2F38
statusBarItem.hoverBackground#6D3B42
tab.activeBackground#241A24
tab.activeBorderTop#FFB0B7
tab.activeForeground#F3E8E1
tab.border#6D3B4255
tab.inactiveBackground#8E2F38
tab.inactiveForeground#E2B7BD
terminal.background#241A24
terminal.foreground#F3E8E1
terminalCursor.foreground#FFB0B7
textLink.activeForeground#F3E8E1
textLink.foreground#FFB0B7
titleBar.activeBackground#8E2F38
titleBar.activeForeground#FFF0EA
titleBar.inactiveBackground#8E2F38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#C8A9AE	italic
keyword, storage, storage.type, storage.modifier	#F08A92	—
string, constant.other.symbol	#E7C09E	—
constant.numeric, constant.language, constant.character, constant.escape	#FFB0B7	—
entity.name.function, meta.function-call, variable.function, support.function	#FFC6CA	—
entity.name.type, entity.name.class, support.type, support.class	#FFE1DC	—
variable, support.variable	#F3E8E1	—
entity.name.tag, entity.other.attribute-name	#F6A8C2	—
keyword.operator, punctuation, meta.tag	#D8C3C7	—
invalid, invalid.illegal	#FFD0D4	—