Anchorage

Name: Anchorage
Author: 39digits

Publisher: 39digitsThemes in package: 1

A Light color theme optimised for JavaScript development

Open in VS Code GitHub

VS Code preview

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

Anchorage — Anchorage

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#f7f8f9
editor.foreground#606060
editor.lineHighlightBackground#f2f3f5
editor.selectionBackground#c2ccd7
editorCursor.foreground#4c555a
editorIndentGuide.background#363331
editorUnnecessaryCode.opacity#000000c0
editorWhitespace.foreground#574f49

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#606060ff	—
constant	#9C7D38
constant.numeric	#9C7D38
constant.numeric.css keyword.other.unit	#9C7D38
support.function, variable.function	#DD4A76	italic
meta.function-call entity.name.function, meta.method-call entity.name.function	#DD4A76	italic
entity.name.function	#005094	bold
meta.function.json entity.name.function, meta.object-literal.key.js, meta.object-literal.key.js entity.name.function.js	#dd4a76
constant.other.object.key string.unquoted	#dd1144
punctuation.separator.key-value	#4c555a
meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	#59646A
meta.brace.square	#4c555a
keyword, keyword.operator.new, keyword.other, keyword.control	#006DC7	italic
keyword.operator	#4c555a
keyword.control.conditional, source.php keyword.control	#606060	italic bold
keyword.control.trycatch	#606060	italic bold
keyword.control.flow	#606060	bold
storage, storage.type.js, storage.type.ts, storage.var.type.js, storage.var.type.ts	#006dc7
variable.language.this	#006dc7
variable.language.this.php	#606060
keyword.other.phpdoc.php	#606060
comment.block.documentation.phpdoc.php keyword.other.type.php	#91a2b0	italic
string.quoted, string, punctuation.tag.definition.string, tag.string	#4ba144
comment	#91a2b0	italic
variable, variable.other, variable.parameter, support.variable	#606060
variable.other.property.static, meta.property.object	#4c555a
punctuation.definition.tag.begin, punctuation.definition.tag.end	#4c555a	italic
entity.other.attribute-name	#dd4a76	italic
entity.name.tag	#4384A0	—
text.html.mt meta.tag.structure.any.html string.quoted.double.html	#779e69	—
meta.selector.css entity.name.tag	#DD4A76
meta.selector.css entity.other.attribute-name.class	#DD4A76	—
meta.property-name.css	#4384A0
meta.property-value.css	#606060
entity.other.attribute-name.id	#dd1144	—
keyword.other.important.css	#cc4f42	bold
support.type.property-name.json	#606060
meta.tag string.quoted	#59646A
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#59646A	bold
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—

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