Aperture

Name: Aperture
Author: Fatih Kalifa

Publisher: Fatih KalifaThemes in package: 2

Color theme for VSCode to help you focus

Open in VS Code GitHub

Color themes

VS Code preview

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

Aperture — Large Aperture

fetchUser.ts

index.ts

README.md

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#141418
activityBar.foreground#F2F7F2
activityBar.inactiveForeground#575757
activityBarBadge.background#0091cd
badge.background#0091cd
badge.foreground#F2F7F2
descriptionForeground#F2F7F2
dropdown.background#141418
editor.background#141418
editor.foreground#F2F7F2
editorGutter.addedBackground#C3E88D
editorGutter.deletedBackground#E75A7C
editorGutter.modifiedBackground#F8DDA4
editorLineNumber.activeForeground#F2F7F2
editorLineNumber.foreground#575757
focusBorder#141418
foreground#F2F7F2
input.background#242428
input.border#343438
input.foreground#F2F7F2
list.activeSelectionBackground#0091cdbb
list.focusBackground#E75A7C55
list.hoverBackground#242428
panel.background#141418
sideBar.background#141418
sideBar.border#202024
sideBar.foreground#F2F7F2
sideBarSectionHeader.background#242428
sideBarTitle.foreground#bbbbbb
statusBar.background#141418
statusBar.foreground#f2f7f2
tab.activeBackground#141418
tab.inactiveBackground#242428
tab.inactiveForeground#696969
titleBar.activeBackground#141418
widget.shadow#141418

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, meta.block variable.other, string constant.other.placeholder, support.variable.object.node, entity.other.attribute-name.class, source.css variable.interpolation variable, punctuation.accessor, punctuation.definition.dictionary, punctuation.definition.array	#F2F7F2	—
comment, punctuation.definition.comment	#575757	italic
constant.other.color, punctuation, meta.tag, punctuation.separator.inheritance.php, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.function.expression, meta.brace	#575757	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, support.type.primitive, support.type.builtin, source.css variable, constant.character.entity punctuation, storage.type.core.rust	#F9A03F	—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, meta.jsx.children, entity.name.import, string.regexp, string.regexp punctuation	#C3E88D	—
keyword, keyword.control, storage.type, storage.modifier, entity.name.tag.reference, entity.other.attribute-name, entity.other.attribute-name punctuation, keyword.control.at-rule.media punctuation, meta.assertion, keyword.other, entity.name.lifetime.rust	#DBB9F1	—
support.type.object.module, support.class.builtin, support.class.console, support.class.node, support.constant.math, support.constant.json, support.variable, support.function.builtin	#A67DB8	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, entity.other.inherited-class, support.type.sys-types, variable.language, storage.class	#E75A7C	—
entity.name.function, meta.function-call, variable.function, keyword.other.special-method, support.function	#9BE2FF	—
entity.name.tag, support.class.component, punctuation.definition.tag, meta.tag.sgml, markup.deleted.git_gutter	#D05353	—
meta.array.literal meta.brace.square, meta.objectliteral punctuation.definition.block	#F2F7F2	—
meta.object-literal.key, meta.object-literal.key string, meta.object-literal.key punctuation.definition.string, meta.type.tuple punctuation.definition.string, meta.type.tuple string, meta.tag.attributes entity.other.attribute-name, meta.tag, meta.attribute entity.other.attribute-name, variable.object.property, meta.embedded.block.frontmatter entity.name.tag.yaml, support.type.property-name	#F8DDA4	—
url, link, uri	—	underline
text.html.markdown punctuation	#F2F7F2	—
punctuation.definition.heading, markup.heading punctuation, markup.heading entity.name	#E75A7C	—
markup.bold, punctuation.definition.bold	#DBB9F1	bold
markup.italic, punctuation.definition.italic	#DBB9F1	italic
markup.inline.raw, punctuation.definition.raw	#DBB9F1	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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