Cozy Vintage Theme

Name: Cozy Vintage Theme
Author: lilin

Publisher: lilinThemes in package: 2

A warm, low-saturation vintage-inspired VS Code theme with cozy dark and light variants for calm, comfortable coding.

Open in VS Code GitHub

Color themes

VS Code preview

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

Cozy Vintage Theme — Cozy Vintage Dark

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#B0CDE6
activityBar.background#2B2420
activityBar.foreground#E7D3B1
activityBar.inactiveForeground#8A7A6B
activityBarBadge.background#946D6D
activityBarBadge.foreground#FDF4D2
badge.background#946D6D
badge.foreground#FDF4D2
breadcrumb.activeSelectionForeground#B49C84
breadcrumb.focusForeground#E7D3B1
breadcrumb.foreground#8A7A6B
button.background#946D6D
button.foreground#FDF4D2
button.hoverBackground#A87F7F
button.secondaryBackground#3D342F
button.secondaryForeground#E7D3B1
button.secondaryHoverBackground#52463F
debugToolBar.background#3A312C
descriptionForeground#B49C84
dropdown.background#3D342F
dropdown.border#52463F
dropdown.foreground#E7D3B1
editor.background#322A26
editor.findMatchBackground#5A4642
editor.findMatchHighlightBackground#4A3D38
editor.foreground#E7D3B1
editor.inactiveSelectionBackground#4A3D38
editor.lineHighlightBackground#3B322D
editor.selectionBackground#5A4642
editorBracketMatch.background#4A3D38
editorBracketMatch.border#B0CDE6
editorCursor.foreground#B0CDE6
editorError.foreground#D98B8B
editorGroup.background#322A26
editorGroup.border#52463F
editorGroupHeader.tabsBackground#3A312C
editorGroupHeader.tabsBorder#52463F
editorGutter.background#322A26
editorHoverWidget.background#3D342F
editorHoverWidget.border#52463F
editorIndentGuide.activeBackground#52463F
editorIndentGuide.background#3D342F
editorLineNumber.activeForeground#B0CDE6
editorLineNumber.foreground#8A7A6B
editorOverviewRuler.border#52463F
editorRuler.foreground#3D342F
editorSuggestWidget.background#3D342F
editorSuggestWidget.border#52463F
editorSuggestWidget.selectedBackground#5A4642
editorWarning.foreground#D8B57A
editorWhitespace.foreground#52463F
editorWidget.background#3D342F
editorWidget.border#52463F
editorWidget.resizeBorder#B0CDE6
errorForeground#D98B8B
focusBorder#B0CDE6
foreground#E7D3B1
gitDecoration.addedResourceForeground#9DBE8E
gitDecoration.deletedResourceForeground#D98B8B
gitDecoration.ignoredResourceForeground#8A7A6B
gitDecoration.modifiedResourceForeground#D8B57A
gitDecoration.untrackedResourceForeground#9DBE8E
input.background#2B2420
input.border#52463F
input.foreground#E7D3B1
inputOption.activeBorder#B0CDE6
inputValidation.errorBackground#4A3D38
inputValidation.errorBorder#D98B8B
inputValidation.infoBackground#3D342F
inputValidation.infoBorder#B0CDE6
inputValidation.warningBackground#3D342F
inputValidation.warningBorder#D8B57A
link.foreground#B0CDE6
list.activeSelectionBackground#5A4642
list.activeSelectionForeground#FDF4D2
list.dropBackground#4A3D38
list.focusBackground#4A3D38
list.focusForeground#FDF4D2
list.highlightForeground#B0CDE6
list.hoverBackground#443A34
list.hoverForeground#E7D3B1
list.inactiveSelectionBackground#4A3D38
list.inactiveSelectionForeground#E7D3B1
menu.background#3A312C
menu.foreground#E7D3B1
menu.selectionBackground#5A4642
menu.selectionForeground#FDF4D2
menu.separatorBackground#52463F
menubar.selectionForeground#B0CDE6
panel.background#3A312C
panel.border#52463F
panelTitle.activeForeground#E7D3B1
panelTitle.inactiveForeground#B49C84
progressBar.background#B0CDE6
scrollbarSlider.activeBackground#B0CDE6
scrollbarSlider.background#52463F
scrollbarSlider.hoverBackground#6B5B51
selection.background#5A4642
sideBar.background#3A312C
sideBar.foreground#E7D3B1
sideBarSectionHeader.background#443A34
sideBarSectionHeader.border#52463F
sideBarSectionHeader.foreground#E7D3B1
sideBarTitle.foreground#C9B79E
statusBar.background#2B2420
statusBar.debuggingBackground#2B2420
statusBar.foreground#E7D3B1
statusBar.noFolderBackground#2B2420
statusBarItem.hoverBackground#3D342F
statusBarItem.prominentBackground#946D6D
statusBarItem.prominentHoverBackground#A87F7F
statusBarItem.remoteBackground#946D6D
statusBarItem.remoteForeground#FDF4D2
tab.activeBackground#322A26
tab.activeBorder#B0CDE6
tab.activeForeground#E7D3B1
tab.border#52463F
tab.inactiveBackground#3A312C
tab.inactiveForeground#B49C84
tab.unfocusedActiveForeground#E7D3B1
tab.unfocusedInactiveForeground#B49C84
terminal.background#322A26
terminal.foreground#E7D3B1
terminal.selectionBackground#5A4642
terminalCursor.foreground#B0CDE6
textBlockQuote.background#3B322D
textBlockQuote.border#52463F
textCodeBlock.background#3B322D
textLink.foreground#B0CDE6
textPreformat.foreground#E7D3B1
titleBar.activeBackground#2B2420
titleBar.activeForeground#E7D3B1
titleBar.border#52463F
titleBar.inactiveBackground#322A26
titleBar.inactiveForeground#8A7A6B
toolbar.activeBackground#4A3D38
toolbar.hoverBackground#443A34
walkThrough.embeddedEditorBackground#3D342F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8A7A6B	italic
string	#FDF4D2	—
string.quoted	#F2D9A0	—
string.regexp	#D8B57A	—
constant.numeric	#946D6D	—
constant.language	#946D6D	—
constant.character.escape	#D8B57A	—
keyword	#A290B7	—
keyword.control	#A290B7	—
keyword.operator	#C9B79E	—
storage.type	#A290B7	—
storage.modifier	#A290B7	—
entity.name.function	#B0CDE6	—
support.function	#B0CDE6	—
entity.name.type	#9488B0	—
entity.name.class	#9488B0	—
entity.name.namespace	#9488B0	—
entity.other.attribute-name	#A290B7	—
variable	#B49C84	—
variable.parameter	#C9B79E	—
support.type	#9488B0	—
support.class	#9488B0	—
meta.tag	#A290B7	—
punctuation.definition.tag	#C9B79E	—
entity.name.tag	#A290B7	—
markup.heading	#B0CDE6	bold
markup.bold	#C9B79E	bold
markup.italic	—	italic