Xcode Theme

Name: Xcode Theme
Author: Mateo Cerquetella

Publisher: Mateo CerquetellaThemes in package: 8

Xcode Theme, ported to VS Code

GitHub

Color themes

VS Code preview

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

Xcode Theme — Xcode Classic (Light)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#ECECEC
activityBar.border#D9D7D5
activityBar.foreground#282828
activityBarBadge.background#282828
button.background#3C93FD
editor.lineHighlightBackground#EEF5FE
editorGroup.border#D9D7D5
editorGroupHeader.tabsBackground#F5F5F5
editorGroupHeader.tabsBorder#D9D7D5
editorIndentGuide.activeBackground#A0A0A0
editorIndentGuide.background#D8D8D8
editorLineNumber.activeForeground#282828
editorLineNumber.foreground#A6A6A6
editorWidget.background#F5F5F5
editorWidget.border#D9D7D5
editorWidget.resizeBorder#D9D7D5
focusBorder#82ADF3
foreground#282828
input.border#D9D7D5
input.placeholderForeground#C7C6C5
list.activeSelectionBackground#3C93FD
list.focusBackground#3C93FD
list.focusForeground#000000
list.highlightForeground#242424
list.inactiveSelectionBackground#CECECE
notificationCenter.border#D9D7D5
notifications.border#D9D7D5
panel.border#D9D7D5
panelTitle.activeForeground#282828
panelTitle.inactiveForeground#242424
scrollbar.shadow#ffffff00
selection.background#B3D7FF
sideBar.background#F5F5F5
sideBar.border#D9D7D5
sideBarSectionHeader.background#F5F5F5
sideBarSectionHeader.foreground#282828
sideBarTitle.foreground#282828
statusBar.background#ECECEC
statusBar.border#D9D7D5
statusBar.debuggingBackground#ECECEC
statusBar.foreground#565456
statusBar.noFolderBackground#ECECEC
tab.activeBorder#ffffff
tab.border#D9D7D5
tab.inactiveBackground#F5F5F5
tab.inactiveForeground#242424
terminal.ansiBlack#000000
terminal.ansiBlue#272AD8
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#272AD8
terminal.ansiBrightCyan#3F6E74
terminal.ansiBrightGreen#007400
terminal.ansiBrightMagenta#AA0D91
terminal.ansiBrightRed#C41A16
terminal.ansiBrightYellow#643820
terminal.ansiCyan#3F6E74
terminal.ansiGreen#007400
terminal.ansiMagenta#AA0D91
terminal.ansiRed#C41A16
terminal.ansiYellow#643820
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#309409	—
string, punctuation.definition.string, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#D12F1B	—
constant.numeric	#272AD8	—
constant.other.placeholder, constant.character.escape	#000000	—
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, storage, variable.language, constant.language	#AD3DA4	bold
keyword.control.directive, punctuation.definition.directive	#78492A
variable.parameter	#057CB0	—
entity.name.type, entity.other.inherited-class, storage.type.haskell	#23575C	—
keyword.type.cs, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go	#4B21B0
entity.name.function, support.function	#3E8087	—
support.function.builtin	#804FB8	—
variable.other.property, variable.other.object.property, entity.name.variable.field	#3E8087	—
entity.name.function.preprocessor	#78492A	—
entity.name.tag	#4B21B0	—
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css	#804FB8	—
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit	#272AD8	—
support.constant.property-value, support.constant.font-name	#AD3DA4	bold
support.constant.media.css	#3E8087	—
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc	#3E8087	—
markup.heading	—	bold
markup.bold	—	bold
markup.italic	—	italic
magit.header	#4B21B0	—
magit.subheader	#804FB8	—
magit.entity	#272AD8	—
meta.diff.range.unified, punctuation.definition.range.diff	#707F8C	—
markup.inserted, punctuation.definition.inserted	#3E8087	—
markup.deleted, punctuation.definition.deleted	#D12F1B	—
keyword.operator, punctuation, storage.modifier.pointer	#000000
support.type.primitive, meta.type.annotation, meta.var-single-variable.expr, meta.var.expr, meta.block, meta.method.declaration	#6C36A9	—

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