Angkor Pine

Publisher: Angkor PineThemes in package: 1

A refined pine-toned dark theme with balanced contrast and elegant syntax highlighting.

Open in VS Code GitHub

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#2B2D30
activityBar.border#1E1F22
activityBar.foreground#BDBDBD
breadcrumb.background#1E1F22
breadcrumb.foreground#BDBDBD
button.background#3474F0
editor.background#262626
editor.foreground#BDBDBD
editor.selectionBackground#09335E
editorGroup.border#393B41
editorGroup.emptyBackground#2B2D30
editorGroupHeader.tabsBackground#1E1F22
editorGroupHeader.tabsBorder#393B41
editorWidget.background#2B2D30
editorWidget.border#2B2D30
editorWidget.foreground#BDBDBD
list.activeSelectionBackground#2E436E
list.hoverBackground#2E436B
list.inactiveSelectionBackground#43454A
panel.background#262626
panel.border#1E1F22
panelTitle.activeBorder#3474F0
panelTitle.activeForeground#DFE1E5
panelTitle.inactiveForeground#9FA1A5
scrollbar.shadow#262626
sideBar.background#2B2D30
sideBar.border#1E1F22
sideBar.foreground#BDBDBD
sideBarSectionHeader.background#2B2D30
sideBarSectionHeader.border#1E1F22
sideBarSectionHeader.foreground#BDBDBD
sideBarTitle.foreground#BDBDBD
statusBar.background#2B2D30
statusBar.debuggingBackground#3474F0
statusBar.debuggingForeground#ffffff
statusBar.foreground#BDBDBD
statusBar.noFolderBackground#2B2D30
statusBar.noFolderForeground#BDBDBD
tab.activeBackground#1E1F22
tab.activeBorder#3474F0
tab.activeForeground#82ACFC
tab.border#1E1F22
tab.inactiveBackground#1E1F22
tab.inactiveForeground#9FA1A5
titleBar.activeBackground#2B2D30
titleBar.activeForeground#BDBDBD
titleBar.inactiveBackground#2B2D30
titleBar.inactiveForeground#BDBDBD
toolbar.activeBackground#1E1F22
widget.shadow#00000075

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage.type, storage.modifier, constant.language, keyword.operator.expression	#6C95EB	—
entity.name.type, entity.name.class, support.class, entity.name.tag	#C191FF	—
entity.name.function, support.function	#3ACC9B	—
constant.numeric	#FFD700	—
string.quoted.double, string.quoted.single, string.quoted.triple, string.template, string.interpolated	#85C46C	—
variable.other, variable.parameter, variable.declaration, variable.other.php, variable.other.property	#ff638a	—
comment, punctuation.definition.comment	#8d8d8d	—
storage.type.annotation, meta.decorator, meta.attribute.php	#DCDCAA	—
variable.other.object.property, support.type.property-name	#65C3CC	—

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}!`;
}

Angkor Pine by Angkor Pine - VS Code Theme