GitHub Plus Theme Elixir Adapted

Name: GitHub Plus Theme Elixir Adapted
Author: fimars

Publisher: fimarsThemes in package: 1

A GitHub inspired color theme for VSCode code and interface!

Open in VS Code GitHub

VS Code preview

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

GitHub Plus Theme Elixir Adapted — GitHub Plus Elixir Adapted

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.

activityBar.background#24292e
activityBar.foreground#fafbfc
activityBarBadge.background#54a3ff
editor.background#ffffff
editor.foreground#24292e
editor.lineHighlightBackground#fffbdd
editorBracketMatch.background#f1f8ff
editorBracketMatch.border#c8e1ff
editorGroupHeader.tabsBackground#fafbfc
editorGroupHeader.tabsBorder#e1e4e8
editorIndentGuide.background#eeeeee
editorLineNumber.foreground#cccccc
focusBorder#fafbfc
notification.background#54a3ff
scrollbar.shadow#00000000
sideBar.background#fafbfc
sideBar.border#e1e4e8
sideBar.foreground#586069
sideBarSectionHeader.background#F1F2F3
sideBarSectionHeader.foreground#24292e
sideBarTitle.foreground#24292e
statusBar.background#fafbfc
statusBar.border#e1e4e8
statusBar.debuggingBackground#fafbfc
statusBar.debuggingForeground#24292e
statusBar.foreground#24292e
statusBar.noFolderBackground#fafbfc
statusBar.noFolderForeground#24292e
tab.activeBackground#ffffff
tab.activeBorder#e36209
tab.border#e1e4e8
tab.inactiveBackground#fafbfc
tab.inactiveForeground#586069
titleBar.activeBackground#fafbfc
titleBar.border#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#24292eff	—
emphasis	—	italic
strong, markup.heading.markdown, markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
source	#24292eff	—
meta.link.inline.markdown	#005cc5	underline
comment, markup.fenced_code, markup.inline	#6a737d	—
string	#032f62	—
constant, constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support	#005cc5	—
keyword, storage.modifier, storage.type, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression	#d73a49	—
variable.parameter.function	#E27F2D	—
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression	#24292eff	—
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function	#6f42c1	—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template	#22863a	—
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}!`;
}