Light Weight

Name: Light Weight
Author: Lets-A-Code

Publisher: Lets-A-CodeThemes in package: 1

A light weight theme for vcode

GitHub

VS Code preview

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

Light Weight — Light Weight

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.

activityBarBadge.background#59504b
button.background#59504b
button.foreground#c2b5ae
button.hoverBackground#7c6f68
checkbox.background#302c2a
checkbox.border#59504b
checkbox.foreground#c2b5ae
descriptionForeground#c2b5ae
dropdown.background#302c2a
dropdown.border#59504b
dropdown.foreground#c2b5ae
editor.background#302c2a
editor.foreground#c2b5ae
focusBorder#c2b5ae
sideBarTitle.foreground#c2b5ae
symbolIcon.arrayForeground#c2b5ae
symbolIcon.booleanForeground#c2b5ae
symbolIcon.classForeground#c2b5ae
symbolIcon.colorForeground#c2b5ae
symbolIcon.constantForeground#c2b5ae
symbolIcon.constructorForeground#c2b5ae
symbolIcon.enumeratorForeground#c2b5ae
symbolIcon.enumeratorMemberForeground#c2b5ae
symbolIcon.eventForeground#c2b5ae
symbolIcon.fieldForeground#c2b5ae
symbolIcon.fileForeground#c2b5ae
symbolIcon.folderForeground#c2b5ae
symbolIcon.functionForeground#c2b5ae
symbolIcon.interfaceForeground#c2b5ae
symbolIcon.keyForeground#c2b5ae
symbolIcon.keywordForeground#c2b5ae
symbolIcon.methodForeground#c2b5ae
symbolIcon.moduleForeground#c2b5ae
symbolIcon.namespaceForeground#c2b5ae
symbolIcon.nullForeground#c2b5ae
symbolIcon.numberForeground#c2b5ae
symbolIcon.objectForeground#c2b5ae
symbolIcon.operatorForeground#c2b5ae
symbolIcon.packageForeground#c2b5ae
symbolIcon.propertyForeground#c2b5ae
symbolIcon.referenceForeground#c2b5ae
symbolIcon.snippetForeground#c2b5ae
symbolIcon.stringForeground#c2b5ae
symbolIcon.structForeground#c2b5ae
symbolIcon.textForeground#c2b5ae
symbolIcon.typeParameterForeground#c2b5ae
symbolIcon.unitForeground#c2b5ae
symbolIcon.variableForeground#c2b5ae
textLink.foreground#e8ceac

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.list, punctuation.definition.dict, punctuation.definition.parameters, punctuation.definition.paranthesis, Punctuation.bracket	#c2b5ae	—
comment	#deb49e	italic
keyword.control, keyword.operator	#9cbf9b	—
constant.numeric	#a58db5	—
constant	#bf9c56	—
keyword	#a58db5	—
entity.name.type.class, entity.name.class, meta.preprocessor	#dda0dd	—
entity.name.function, meta.function-call.generic, meta.function	#6b9696	—
string	#8382c2	italic
storage.type	#7c94cc	—
storage.modifier, support.type	#d1ab5a	—
support.function.builtin	#5ab1d1	—
variable.parameter.function.language.special	#42bcf5	—
variable.parameter	#d69238	—

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