Anorak Themes

Name: Anorak Themes
Author: calebdsharp

Publisher: calebdsharpThemes in package: 36

A collection of 18 thoughtfully designed VS Code theme packs, each with light and dark variants (36 themes total), with matching editor fonts.

Open in VS Code GitHub

Color themes

VS Code preview

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

Anorak Themes — Anorak: Graph Paper Studio 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.background#242526
activityBar.border#242526
activityBar.foreground#F7F7F5
activityBar.inactiveForeground#8A8E93
activityBarBadge.background#757B84
activityBarBadge.foreground#F7F7F5
badge.background#757B84
badge.foreground#F7F7F5
button.background#757B84
button.foreground#F7F7F5
button.hoverBackground#646A73
button.secondaryBackground#D5D7D9
button.secondaryForeground#242526
contrastBorder#D5D7D9
dropdown.background#FFFFFF
dropdown.border#D5D7D9
editor.background#F7F7F5
editor.findMatchBackground#F0D27A70
editor.findMatchHighlightBackground#F0D27A40
editor.foreground#242526
editor.inactiveSelectionBackground#ADC7E025
editor.lineHighlightBackground#ECEDEC
editor.selectionBackground#ADC7E050
editor.selectionHighlightBackground#ADC7E030
editor.wordHighlightBackground#F0D27A40
editorBracketMatch.background#ADC7E020
editorBracketMatch.border#757B84
editorCursor.foreground#757B84
editorGroup.border#D5D7D9
editorGroupHeader.tabsBackground#ECEDEC
editorGutter.addedBackground#6E9C6E
editorGutter.deletedBackground#C46C63
editorGutter.modifiedBackground#5E7FA8
editorHoverWidget.background#ECEDEC
editorHoverWidget.border#D5D7D9
editorIndentGuide.activeBackground1#C2C4C6
editorIndentGuide.background1#E0E2E3
editorLineNumber.activeForeground#757B84
editorLineNumber.foreground#C2C4C6
editorRuler.foreground#E0E2E3
editorSuggestWidget.background#ECEDEC
editorSuggestWidget.border#D5D7D9
editorSuggestWidget.selectedBackground#ADC7E040
editorWhitespace.foreground#E0E2E3
editorWidget.background#ECEDEC
editorWidget.border#D5D7D9
extensionButton.prominentBackground#757B84
extensionButton.prominentHoverBackground#646A73
focusBorder#757B84
foreground#242526
input.background#FFFFFF
input.border#D5D7D9
input.foreground#242526
input.placeholderForeground#B0B3B7
list.activeSelectionBackground#242526
list.activeSelectionForeground#F7F7F5
list.highlightForeground#757B84
list.hoverBackground#E8E9EA
list.inactiveSelectionBackground#E1E3E4
notificationCenterHeader.background#ECEDEC
notifications.background#ECEDEC
notifications.border#D5D7D9
notifications.foreground#242526
panel.background#ECEDEC
panel.border#D5D7D9
panelTitle.activeForeground#242526
panelTitle.inactiveForeground#55585D
peekView.border#757B84
peekViewEditor.background#F7F7F5
peekViewResult.background#ECEDEC
progressBar.background#757B84
scrollbarSlider.activeBackground#757B8480
scrollbarSlider.background#C2C4C670
scrollbarSlider.hoverBackground#C2C4C6A0
sideBar.background#ECEDEC
sideBar.border#D5D7D9
sideBar.foreground#55585D
sideBarSectionHeader.background#E1E3E4
sideBarSectionHeader.foreground#242526
sideBarTitle.foreground#242526
statusBar.background#757B84
statusBar.debuggingBackground#C46C63
statusBar.foreground#F7F7F5
statusBar.noFolderBackground#757B84
statusBarItem.hoverBackground#646A73
tab.activeBackground#F7F7F5
tab.activeBorderTop#757B84
tab.activeForeground#242526
tab.border#D5D7D9
tab.inactiveBackground#E1E3E4
tab.inactiveForeground#55585D
terminal.ansiBlack#242526
terminal.ansiBlue#5E7FA8
terminal.ansiBrightBlack#C2C4C6
terminal.ansiBrightBlue#7B9ABF
terminal.ansiBrightCyan#6AA4AA
terminal.ansiBrightGreen#87B585
terminal.ansiBrightMagenta#9A81A8
terminal.ansiBrightRed#D8847A
terminal.ansiBrightWhite#F7F7F5
terminal.ansiBrightYellow#D1AE5A
terminal.ansiCyan#4E858A
terminal.ansiGreen#6E9C6E
terminal.ansiMagenta#7D668C
terminal.ansiRed#C46C63
terminal.ansiWhite#55585D
terminal.ansiYellow#B8943D
terminal.background#F7F7F5
terminal.foreground#242526
titleBar.activeBackground#1B1C1D
titleBar.activeForeground#F7F7F5
titleBar.inactiveBackground#1B1C1D
titleBar.inactiveForeground#8A8E93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#242526	—
comment, punctuation.definition.comment	#A3A6AB	italic
keyword, keyword.control, storage.type, storage.modifier	#3F4A57	bold
string, string.quoted	#5E7FA8	—
constant.numeric, constant.language, constant.character	#B8943D	—
entity.name.function, support.function, meta.function-call	#242526	bold
variable, variable.parameter	#242526	—
entity.name.type, entity.name.class, support.class, support.type	#55585D	italic
entity.name.tag	#3F4A57	—
entity.other.attribute-name	#5E7FA8	—
keyword.operator, punctuation	#7B8088	—
variable.other.property, meta.object-literal.key	#4E858A	—
markup.heading	#242526	bold
markup.bold	—	bold
markup.italic	—	italic
invalid, invalid.illegal	#F7F7F5	—