Umbra Kitty Theme

Name: Umbra Kitty Theme
Author: Andrew Robbins

Publisher: Andrew RobbinsThemes in package: 2

A refined purple, obsidian, and amber theme suite featuring dark and light variants.

Open in VS Code

Color themes

VS Code preview

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

Umbra Kitty Theme — Umbra Kitty Theme 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.background#1A1528
activityBar.foreground#FBD561
activityBar.inactiveForeground#6B6282
activityBarBadge.background#FBD561
activityBarBadge.foreground#120E1C
badge.background#FBD561
badge.foreground#120E1C
breadcrumb.background#120E1C
breadcrumb.focusForeground#FBD561
breadcrumb.foreground#6B6282
button.background#FBD561
button.foreground#120E1C
button.hoverBackground#FFB74D
diffEditor.insertedTextBackground#80CBC433
diffEditor.removedTextBackground#E5737333
dropdown.background#241C38
dropdown.foreground#E6E1F0
editor.background#120E1C
editor.foreground#E6E1F0
editor.inactiveSelectionBackground#3D2E5C99
editor.lineHighlightBackground#1E1730
editor.selectionBackground#3D2E5C
editorBracketMatch.background#3D2E5C
editorBracketMatch.border#FBD561
editorCursor.foreground#FBD561
editorGutter.background#120E1C
editorHoverWidget.background#241C38
editorHoverWidget.border#493B64
editorIndentGuide.activeBackground1#B388FF
editorIndentGuide.background1#493B64
editorLineNumber.activeForeground#FBD561
editorLineNumber.foreground#6B6282
editorOverviewRuler.border#493B64
editorSuggestWidget.background#241C38
editorSuggestWidget.border#493B64
editorSuggestWidget.selectedBackground#3D2E5C
editorWhitespace.foreground#493B64
editorWidget.background#241C38
editorWidget.border#493B64
focusBorder#FBD561
gitDecoration.addedResourceForeground#80CBC4
gitDecoration.deletedResourceForeground#E57373
gitDecoration.modifiedResourceForeground#FFB74D
gitDecoration.untrackedResourceForeground#80CBC4
input.background#161122
input.border#493B64
input.foreground#E6E1F0
inputOption.activeBorder#FBD561
inputValidation.errorBorder#E57373
inputValidation.infoBorder#80CBC4
inputValidation.warningBorder#FFB74D
list.activeSelectionBackground#3D2E5C
list.focusBackground#3D2E5C
list.highlightForeground#FBD561
list.hoverBackground#3D2E5C99
menubar.selectionBackground#3D2E5C
minimap.background#1A1528
notifications.background#241C38
notifications.foreground#E6E1F0
notificationsErrorIcon.foreground#E57373
notificationsInfoIcon.foreground#80CBC4
notificationsWarningIcon.foreground#FFB74D
progressBar.background#FBD561
quickInput.background#241C38
quickInput.foreground#E6E1F0
quickInputTitle.background#1A1528
scrollbarSlider.background#493B6499
scrollbarSlider.hoverBackground#B388FF99
sideBar.background#1A1528
sideBar.border#493B64
sideBar.foreground#E6E1F0
sideBarSectionHeader.background#241C38
sideBarSectionHeader.foreground#E6E1F0
statusBar.background#241C38
statusBar.foreground#E6E1F0
statusBarItem.hoverBackground#3D2E5C
tab.activeBackground#120E1C
tab.activeBorderTop#FBD561
tab.activeForeground#E6E1F0
tab.inactiveBackground#1A1528
tab.inactiveForeground#6B6282
terminal.ansiBlack#120E1C
terminal.ansiBlue#B388FF
terminal.ansiCyan#80CBC4
terminal.ansiGreen#81C784
terminal.ansiMagenta#B388FF
terminal.ansiRed#E57373
terminal.ansiWhite#E6E1F0
terminal.ansiYellow#FFB74D
terminal.background#120E1C
terminal.foreground#E6E1F0
titleBar.activeBackground#1A1528
titleBar.activeForeground#E6E1F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B6282	italic
keyword, storage, storage.type, storage.modifier, keyword.operator	#B388FF	—
string, constant.character, constant.other.symbol	#80CBC4	—
constant.numeric, constant.language, support.constant	#FFB74D	—
entity.name.function, support.function, meta.function-call	#FBD561	—
entity.name.type, support.type, support.class, entity.name.class	#FFB74D	—
variable, variable.other, variable.other.property, meta.definition.variable	#E6E1F0	—
entity.name.tag, entity.other.attribute-name	#E57373	—
string.regexp, constant.character.escape	#FF8A80	—
markup.heading, markup.bold	#FBD561	bold
markup.italic	#80CBC4	italic
markup.inline.raw, markup.fenced_code	#80CBC4	—