Shadow Theme — VS Code Color & Icon Themes

Name: Shadow Theme — VS Code Color & Icon Themes
Author: Raza Raheem

Publisher: Raza RaheemThemes in package: 30

30 hand-crafted VS Code color themes — dark, light & OLED — plus 450+ file icons. Anime, minimal & pro styles with a built-in theme switcher.

Open in VS Code GitHub

Color themes

VS Code preview

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

Shadow Theme — VS Code Color & Icon Themes — Shadow Theme Focus 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#EFEBE6
activityBar.border#D8D2CA
activityBar.foreground#2E3440
activityBar.inactiveForeground#7B8794
activityBarBadge.background#2A6DB0
activityBarBadge.foreground#FFFFFF
badge.background#2A6DB0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#2E3440
breadcrumb.focusForeground#2E3440
breadcrumb.foreground#7B8794
button.background#2A6DB0
button.foreground#FFFFFF
button.hoverBackground#3A7DC0
descriptionForeground#7B8794
diffEditor.insertedLineBackground#0D737733
diffEditor.insertedTextBackground#0D737733
diffEditor.modifiedTextBackground#E8D4F5
diffEditor.removedLineBackground#C44B4B33
diffEditor.removedTextBackground#C44B4B33
dropdown.background#FFFFFF
dropdown.border#D8D2CA
dropdown.foreground#2E3440
editor.background#F7F5F2
editor.findMatchBackground#E5850D50
editor.findMatchBorder#B86818
editor.findMatchHighlightBackground#E5850D28
editor.foreground#2E3440
editor.hoverHighlightBackground#8B4CBA40
editor.inactiveSelectionBackground#F3E8FA
editor.lineHighlightBackground#EFEBE6
editor.selectionBackground#E8D4F5
editor.selectionHighlightBackground#8B4CBA40
editor.wordHighlightBackground#F9E4C8
editor.wordHighlightStrongBackground#E5850D50
editorBracketHighlight.foreground1#2A6DB0
editorBracketHighlight.foreground2#7B5EA7
editorBracketHighlight.foreground3#3D8B7A
editorBracketHighlight.foreground4#C47A20
editorBracketMatch.background#2A6DB033
editorBracketMatch.border#2A6DB0
editorCursor.foreground#2A6DB0
editorError.foreground#C44B4B
editorGroup.border#D8D2CA
editorGroupHeader.tabsBackground#EFEBE6
editorGroupHeader.tabsBorder#D8D2CA
editorGutter.addedBackground#0D7377
editorGutter.deletedBackground#C44B4B
editorGutter.modifiedBackground#B86818
editorHint.foreground#0D7377
editorIndentGuide.activeBackground1#A8A29E
editorIndentGuide.background1#D8D2CA
editorInfo.foreground#2A6DB0
editorLineNumber.activeForeground#2E3440
editorLineNumber.foreground#7B8794
editorLink.activeForeground#2A6DB0
editorWarning.foreground#B86818
errorForeground#C44B4B
focusBorder#2A6DB0
foreground#2E3440
gitDecoration.addedResourceForeground#0D7377
gitDecoration.deletedResourceForeground#C44B4B
gitDecoration.ignoredResourceForeground#7B8794
gitDecoration.modifiedResourceForeground#B86818
gitDecoration.untrackedResourceForeground#7B8794
icon.foreground#2E3440
input.background#FFFFFF
input.border#D8D2CA
input.foreground#2E3440
input.placeholderForeground#7B8794
list.activeSelectionBackground#E8D4F5
list.activeSelectionForeground#2E3440
list.deemphasizedForeground#5C6773
list.focusOutline#2A6DB0
list.hoverBackground#EFEBE6
list.hoverForeground#2E3440
list.inactiveSelectionBackground#F3E8FA
list.inactiveSelectionForeground#2E3440
minimap.findMatchHighlight#E5850D50
minimap.selectionHighlight#E8D4F5
notificationCenterHeader.background#E8E4DE
notifications.background#EFEBE6
notifications.border#D8D2CA
notifications.foreground#2E3440
panel.background#EFEBE6
panel.border#D8D2CA
panelTitle.activeForeground#2E3440
panelTitle.inactiveForeground#7B8794
peekView.border#2A6DB0
peekViewEditor.background#EFEBE6
peekViewResult.background#EFEBE6
peekViewTitle.background#E8E4DE
progressBar.background#2A6DB0
scrollbarSlider.activeBackground#00000044
scrollbarSlider.background#00000022
scrollbarSlider.hoverBackground#00000033
sideBar.background#EFEBE6
sideBar.border#D8D2CA
sideBar.foreground#2E3440
sideBarSectionHeader.background#E8E4DE
sideBarSectionHeader.foreground#2E3440
sideBarTitle.foreground#2E3440
statusBar.background#E8E4DE
statusBar.border#D8D2CA
statusBar.debuggingBackground#2A6DB0
statusBar.foreground#2E3440
statusBar.noFolderBackground#E8E4DE
tab.activeBackground#F7F5F2
tab.activeBorder#2A6DB0
tab.activeForeground#2E3440
tab.border#D8D2CA
tab.inactiveBackground#EFEBE6
tab.inactiveForeground#7B8794
terminal.ansiBlack#2E3440
terminal.ansiBlue#2A6DB0
terminal.ansiBrightBlack#7B8794
terminal.ansiBrightBlue#3A7DC0
terminal.ansiBrightCyan#209090
terminal.ansiBrightGreen#4DA894
terminal.ansiBrightMagenta#9070B8
terminal.ansiBrightRed#D86060
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D89040
terminal.ansiCyan#0D7377
terminal.ansiGreen#3D8B7A
terminal.ansiMagenta#7B5EA7
terminal.ansiRed#C44B4B
terminal.ansiWhite#F7F5F2
terminal.ansiYellow#C47A20
terminal.background#F7F5F2
terminal.foreground#2E3440
titleBar.activeBackground#EFEBE6
titleBar.activeForeground#2E3440
titleBar.border#D8D2CA
titleBar.inactiveBackground#EFEBE6
titleBar.inactiveForeground#7B8794
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7B8794	italic
string, string.quoted, string.template	#3D8B7A	—
constant.numeric	#C47A20	—
constant.language, constant.language.null	#4A7A9A	—
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator	#7B5EA7	—
keyword.operator	#5C6773	—
storage.type	#9E6B00	—
constant.language.boolean	#4A7A9A	—
string.regexp	#2A6DB0	—
entity.name.function, support.function, meta.function-call	#2A6DB0	—
entity.name.type, entity.name.class, support.type, support.class	#9E6B00	—
variable, variable.other, variable.parameter	#3D4654	—
entity.name.tag, meta.tag	#7B5EA7	—
entity.other.attribute-name	#C47A20	—
constant.character.escape	#2A6DB0	—
invalid, invalid.illegal	#C44B4B	—
markup.heading	#2A6DB0	bold
markup.bold	#2E3440	bold
markup.italic	#7B5EA7	italic
markup.underline.link, string.other.link	#2A6DB0	—
markup.inline.raw, markup.fenced_code	#C47A20	—
markup.fenced_code	—	—
markup.quote	#7B8794	italic
markup.list, punctuation.definition.list	#9E6B00	—
markup.inserted	#0D7377	—
markup.deleted	#C44B4B	—
punctuation, meta.brace	#5C6773	—