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 Water

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#08101A
activityBar.border#1A2C3E
activityBar.foreground#C8DFF0
activityBar.inactiveForeground#4D6878
activityBarBadge.background#45C9E0
activityBarBadge.foreground#0C1420
badge.background#45C9E0
badge.foreground#0C1420
breadcrumb.activeSelectionForeground#C8DFF0
breadcrumb.focusForeground#C8DFF0
breadcrumb.foreground#4D6878
button.background#45C9E0
button.foreground#0C1420
button.hoverBackground#7ADCEC
descriptionForeground#4D6878
diffEditor.insertedLineBackground#0E2A1A
diffEditor.insertedTextBackground#5EC48A33
diffEditor.modifiedTextBackground#0E2038
diffEditor.removedLineBackground#2A0E18
diffEditor.removedTextBackground#FF6B7833
dropdown.background#111C2A
dropdown.border#1A2C3E
dropdown.foreground#C8DFF0
editor.background#0C1420
editor.findMatchBackground#D8A05055
editor.findMatchBorder#D8A050
editor.findMatchHighlightBackground#D8A05033
editor.foreground#C8DFF0
editor.hoverHighlightBackground#1A355055
editor.inactiveSelectionBackground#142840
editor.lineHighlightBackground#111C2A
editor.selectionBackground#1A3550
editor.selectionHighlightBackground#1A355055
editor.wordHighlightBackground#1A355066
editor.wordHighlightStrongBackground#1A355099
editorBracketHighlight.foreground1#45C9E0
editorBracketHighlight.foreground2#D8A050
editorBracketHighlight.foreground3#3EB8D8
editorBracketHighlight.foreground4#62E8F5
editorBracketMatch.background#45C9E033
editorBracketMatch.border#45C9E0
editorCursor.foreground#45C9E0
editorError.foreground#FF6B78
editorGroup.border#1A2C3E
editorGroupHeader.tabsBackground#0A111B
editorGroupHeader.tabsBorder#1A2C3E
editorGutter.addedBackground#5EC48A
editorGutter.deletedBackground#FF6B78
editorGutter.modifiedBackground#D8A050
editorHint.foreground#5EC48A
editorIndentGuide.activeBackground1#2E4A60
editorIndentGuide.background1#1A2C3E
editorInfo.foreground#45C9E0
editorLineNumber.activeForeground#C8DFF0
editorLineNumber.foreground#4D6878
editorLink.activeForeground#62E8F5
editorWarning.foreground#D8A050
errorForeground#FF6B78
focusBorder#45C9E0
foreground#C8DFF0
gitDecoration.addedResourceForeground#5EC48A
gitDecoration.deletedResourceForeground#FF6B78
gitDecoration.ignoredResourceForeground#4D6878
gitDecoration.modifiedResourceForeground#D8A050
gitDecoration.untrackedResourceForeground#6888A0
icon.foreground#C8DFF0
input.background#111C2A
input.border#1A2C3E
input.foreground#C8DFF0
input.placeholderForeground#4D6878
list.activeSelectionBackground#1A3550
list.activeSelectionForeground#C8DFF0
list.deemphasizedForeground#7A98B0
list.focusOutline#45C9E0
list.hoverBackground#111C2A
list.hoverForeground#C8DFF0
list.inactiveSelectionBackground#142840
list.inactiveSelectionForeground#C8DFF0
minimap.findMatchHighlight#D8A05055
minimap.selectionHighlight#1A3550
notificationCenterHeader.background#0C1420
notifications.background#0A111B
notifications.border#1A2C3E
notifications.foreground#C8DFF0
panel.background#0A111B
panel.border#1A2C3E
panelTitle.activeForeground#C8DFF0
panelTitle.inactiveForeground#4D6878
peekView.border#45C9E0
peekViewEditor.background#0A111B
peekViewResult.background#0A111B
peekViewTitle.background#0C1420
progressBar.background#45C9E0
scrollbarSlider.activeBackground#4A6878
scrollbarSlider.background#2A4050
scrollbarSlider.hoverBackground#3A5868
sideBar.background#0A111B
sideBar.border#1A2C3E
sideBar.foreground#C8DFF0
sideBarSectionHeader.background#0C1420
sideBarSectionHeader.foreground#C8DFF0
sideBarTitle.foreground#C8DFF0
statusBar.background#0A111B
statusBar.border#1A2C3E
statusBar.debuggingBackground#45C9E0
statusBar.foreground#C8DFF0
statusBar.noFolderBackground#0A111B
tab.activeBackground#0C1420
tab.activeBorder#45C9E0
tab.activeForeground#C8DFF0
tab.border#1A2C3E
tab.inactiveBackground#0A111B
tab.inactiveForeground#7A98B0
terminal.ansiBlack#0C1420
terminal.ansiBlue#3EB8D8
terminal.ansiBrightBlack#4D6878
terminal.ansiBrightBlue#58C8E8
terminal.ansiBrightCyan#80F0F8
terminal.ansiBrightGreen#78D8A0
terminal.ansiBrightMagenta#88A8D0
terminal.ansiBrightRed#FF8898
terminal.ansiBrightWhite#E0EFFA
terminal.ansiBrightYellow#E8B870
terminal.ansiCyan#45C9E0
terminal.ansiGreen#5EC48A
terminal.ansiMagenta#6888B8
terminal.ansiRed#FF6B78
terminal.ansiWhite#C8DFF0
terminal.ansiYellow#D8A050
terminal.background#0C1420
terminal.foreground#C8DFF0
titleBar.activeBackground#0A1420
titleBar.activeForeground#C8DFF0
titleBar.border#1A2C3E
titleBar.inactiveBackground#0A1420
titleBar.inactiveForeground#7A98B0
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4D6878	italic
string, string.quoted, string.template	#5EC48A	—
constant.numeric	#E07878	—
constant.language, constant.language.null	#E07878	—
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator	#3EB8D8	—
keyword.operator	#7A98B0	—
storage.type	#6EB8D8	—
constant.language.boolean	#E07878	—
string.regexp	#E06878	—
entity.name.function, support.function, meta.function-call	#45C9E0	—
entity.name.type, entity.name.class, support.type, support.class	#6EB8D8	—
variable, variable.other, variable.parameter	#B8D8EE	—
entity.name.tag, meta.tag	#3EB8D8	—
entity.other.attribute-name	#7EC0D8	—
constant.character.escape	#45C9E0	—
invalid, invalid.illegal	#FF6B78	—
markup.heading	#45C9E0	bold
markup.bold	#C8DFF0	bold
markup.italic	#3EB8D8	italic
markup.underline.link, string.other.link	#62E8F5	—
markup.inline.raw, markup.fenced_code	#E07878	—
markup.fenced_code	—	—
markup.quote	#4D6878	italic
markup.list, punctuation.definition.list	#D8A050	—
markup.inserted	#5EC48A	—
markup.deleted	#FF6B78	—
punctuation, meta.brace	#7A98B0	—