TextPad Theme

Name: TextPad Theme
Author: damc

Publisher: damcThemes in package: 1

A minimalist theme

Open in VS Code GitHub

VS Code preview

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

TextPad Theme — TextPad

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#f3f3f3
activityBar.foreground#171414
activityBarBadge.background#6929c4
editor.background#ffffff
editor.findMatchBackground#FFBC5D
editor.findMatchHighlightBackground#FFD86381
editor.foreground#000000
editor.lineHighlightBackground#fffbf0
editor.lineHighlightBorder#faf9d7
editor.selectionBackground#dde1e6
editor.selectionHighlightBackground#CFCFCF81
editorBracketHighlight.foreground1#ff0000
editorBracketHighlight.foreground2#ff0000
editorBracketHighlight.foreground3#ff0000
editorBracketHighlight.foreground4#ff0000
editorBracketHighlight.foreground5#ff0000
editorBracketHighlight.foreground6#ff0000
editorCursor.foreground#171414
editorGroupHeader.tabsBackground#F0F0F0
editorLineNumber.activeForeground#0043ce
editorLineNumber.foreground#c1c7cd
editorSuggestWidget.focusHighlightForeground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#DDDDDD
editorSuggestWidget.selectedForeground#000000
focusBorder#CCCCCC
list.activeSelectionBackground#DDDDDD
list.activeSelectionForeground#000000
list.focusHighlightForeground#007ACC
list.inactiveSelectionBackground#E6E6E6
panel.background#f4f4f4
quickInputList.focusBackground#DDDDDD
quickInputList.focusForeground#000000
sideBar.background#f4f4f4
sideBar.border#cac5c4
sideBar.foreground#171414
statusBar.background#DDDDDD
statusBar.debuggingBackground#FFBC5D
statusBar.debuggingForeground#000
statusBar.foreground#474747
statusBar.noFolderBackground#7A3E9D
statusBar.noFolderForeground#fff
terminal.ansiBlack#000000
terminal.ansiBlue#325CC0
terminal.ansiBrightBlack#777777
terminal.ansiBrightBlue#007ACC
terminal.ansiBrightCyan#00AACB
terminal.ansiBrightGreen#60CB00
terminal.ansiBrightMagenta#E64CE6
terminal.ansiBrightRed#F05050
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFBC5D
terminal.ansiCyan#0083B2
terminal.ansiGreen#448C27
terminal.ansiMagenta#7A3E9D
terminal.ansiRed#AA3731
terminal.ansiWhite#BBBBBB
terminal.ansiYellow#CB9000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#008000	italic
entity.name	#000080	—
string, string.regexp, constant.other.symbol	#008080	—
constant.character.escape	#8d8d8d	—
constant.numeric, constant.character, constant.keyword, constant	#a82ad6	—
entity.name.function, meta.function-call.rust, meta.function-call.generic, support.function, meta.method-call	#000080	—
keyword, storage.modifier, storage.type, variable.language.self, variable.language.this	#0000ff	—
keyword.operator	#000000	—
punctuation	#8d8d8d	—
invalid	#660000	—
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—

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