Arch Simple

Name: Arch Simple
Author: paulohenriquex

Publisher: paulohenriquexThemes in package: 1

Um tema inspirado no Arch Linux com cores simples.

Open in VS Code GitHub

VS Code preview

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

Arch Simple — Arch Simple

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#1e1e2e
activityBarBadge.background#fa7c9a
activityBarBadge.foreground#1e1e2e
badge.background#3b3b52
badge.foreground#f8f7f2
breadcrumb.background#1e1e2e
button.background#3b3b52
button.foreground#f8f7f2
button.hoverBackground#45455f
checkbox.background#2a2a3c
checkbox.border#3b3b52
diffEditor.insertedLineBackground#69ffb41a
diffEditor.insertedTextBackground#69ffb433
diffEditor.removedLineBackground#fa7c9a1a
diffEditor.removedTextBackground#fa7c9a33
dropdown.background#2a2a3c
dropdown.border#3b3b52
dropdown.foreground#f8f7f2
editor.background#1e1e2e
editor.findMatchBackground#45455f
editor.findMatchHighlightBackground#3b3b52
editor.findRangeHighlightBackground#2a2a3c66
editor.foreground#f8f7f2
editor.hoverHighlightBackground#2a2a3c66
editor.lineHighlightBackground#3b2a4969
editor.selectionBackground#3b3b5299
editor.selectionHighlightBackground#2a2a3c66
editor.wordHighlightBackground#2a2a3c99
editor.wordHighlightStrongBackground#3b3b5299
editorCursor.foreground#fa7c9a
editorGroupHeader.tabsBackground#1e1e2e
editorGutter.addedBackground#69ffb4
editorGutter.deletedBackground#fa7c9a
editorGutter.modifiedBackground#f8f2a0
editorHoverWidget.background#2a2a3c
editorHoverWidget.border#3b3b52
editorLineNumber.activeForeground#fa7c9a
editorLineNumber.foreground#999999
editorSuggestWidget.background#2a2a3c
editorSuggestWidget.border#3b3b52
editorSuggestWidget.foreground#f8f7f2
editorSuggestWidget.highlightForeground#69ffb4
editorSuggestWidget.selectedBackground#3b3b52
editorWhitespace.foreground#3b3b5280
editorWidget.background#2a2a3c
editorWidget.border#3b3b52
focusBorder#3b3b52
gitDecoration.addedResourceForeground#69ffb4
gitDecoration.conflictingResourceForeground#bf00ff
gitDecoration.deletedResourceForeground#fa7c9a
gitDecoration.ignoredResourceForeground#999999
gitDecoration.modifiedResourceForeground#f8f2a0
gitDecoration.untrackedResourceForeground#87ceeb
input.background#2a2a3c
input.border#3b3b52
input.foreground#f8f7f2
input.placeholderForeground#999999
list.activeSelectionBackground#3b3b52
list.activeSelectionForeground#f8f7f2
list.focusBackground#2a2a3c
list.focusForeground#f8f7f2
list.highlightForeground#69ffb4
list.hoverBackground#2a2a3c
list.inactiveSelectionBackground#2a2a3c
list.inactiveSelectionForeground#f8f7f2
listFilterWidget.background#2a2a3c
menu.background#2a2a3c
menu.foreground#f8f7f2
menu.selectionBackground#3b3b52
menu.selectionForeground#f8f7f2
menu.separatorBackground#3b3b52
notificationCenterHeader.background#2a2a3c
notifications.background#2a2a3c
notificationToast.background#2a2a3c
panel.background#1e1e2e
peekView.border#3b3b52
peekViewEditor.background#1e1e2e
peekViewEditorGutter.background#1e1e2e
peekViewResult.background#2a2a3c
peekViewResult.selectionBackground#3b3b52
scrollbarSlider.activeBackground#45455fb3
scrollbarSlider.background#3b3b5280
scrollbarSlider.hoverBackground#3b3b52b3
sideBar.background#1e1e2e
sideBarSectionHeader.background#1e1e2e
statusBar.background#1e1e2e
statusBar.noFolderBackground#1e1e2e
tab.activeBackground#1e1e2e
tab.activeForeground#f8f7f2
tab.inactiveBackground#1e1e2e
tab.inactiveForeground#999999
terminal.ansiBlack#1e1e2e
terminal.ansiBlue#87ceeb
terminal.ansiBrightBlack#B5B5B5
terminal.ansiBrightBlue#a0dcf5
terminal.ansiBrightCyan#9ce8dd
terminal.ansiBrightGreen#8affc9
terminal.ansiBrightMagenta#e0b8f0
terminal.ansiBrightRed#fa7c9a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#faf5b8
terminal.ansiCyan#7fd6c9
terminal.ansiGreen#69ffb4
terminal.ansiMagenta#d5a0e8
terminal.ansiRed#f28fad
terminal.ansiWhite#f8f7f2
terminal.ansiYellow#f8f2a0
terminal.background#1e1e2e
terminal.foreground#f8f7f2
terminalCursor.foreground#fa7c9a
titleBar.activeBackground#1e1e2e
titleBar.inactiveBackground#1e1e2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
*	#f7f6ef	—
comment, comment.line, comment.block, comment.block.documentation	#999999	italic
string, string.quoted, string.template, string.unquoted, punctuation.definition.string	#f8f2a0	—
constant.numeric, constant.language, constant.language.boolean	#ffffff	—
keyword, keyword.control, storage, storage.type, storage.modifier	#fa7c9a	—
entity.name.function, support.function, meta.function-call, meta.function-call entity.name.function, variable.function	#69ffb4	—
meta.paren.js, punctuation.parenthesis	#bf00ff	—
meta.brackets, punctuation.definition.array, punctuation.section.array.begin, punctuation.section.array.end	#87ceeb	—
meta.brace, punctuation.section.block, punctuation.definition.block	#98fb98	—
punctuation.terminator, punctuation.separator, punctuation.accessor	#f8f7f3	—
meta.import, keyword.control.import, keyword.control.export, keyword.control.from	#B5B5B5	—
entity.name.tag.html, punctuation.definition.tag	#fa7c9a	—
entity.other.attribute-name.html	#69ffb4	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#fa7c9a	italic
support.type.property-name.css	#69ffb4	—
support.type.property-name.json, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#69ffb4	—
punctuation.separator.dictionary.key-value.json	#fa7c9a	—
source.java keyword.other.package, source.java storage.modifier.package, source.java keyword.other.import, source.java storage.modifier.import, source.java storage.type.annotation	#FFFFFF	—
heading.markup, markup.heading, punctuation.definition.heading.markdown	#fa7c9a	bold
markup.bold	#69ffb4	bold
markup.italic	#f7f6ef	italic
string.other.link.description.markdown, markup.underline.link	#87ceeb	underline
string.other.link.title.markdown, markup.link	#999999	—
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#B5B5B5	—
markup.quote, punctuation.definition.quote.begin	#999999	italic
punctuation.definition.list.begin.markdown	#bf00ff	—