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 Default (Dark Customized Version)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#2a2c2f
activityBar.border#000000
activityBar.foreground#dfdfdf
breadcrumb.background#1c1f21
breadcrumb.focusForeground#dcdddd
breadcrumb.foreground#dcdddd
debugIcon.breakpointCurrentStackframeForeground#007aff
debugIcon.breakpointForeground#007aff
diffEditor.insertedTextBackground#3cff5518
diffEditor.removedTextBackground#ff504418
editor.background#1F1F24
editor.findMatchBackground#fffb00
editor.findMatchHighlightBackground#545558
editor.foreground#dfdfe0
editor.hoverHighlightBackground#2c5392
editor.lineHighlightBackground#2f3239
editor.selectionBackground#646f8366
editor.snippetTabstopHighlightBackground#007aff
editor.stackFrameHighlightBackground#007aff22
editorCodeLens.foreground#dfdfdf77
editorCursor.foreground#ffffff
editorError.foreground#e21514
editorGroupHeader.noTabsBackground#383a3d
editorGroupHeader.tabsBackground#26282b
editorGutter.addedBackground#4f82ce
editorGutter.deletedBackground#4f82ce
editorGutter.modifiedBackground#4f82ce
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorLineNumber.activeForeground#dfdfdf
editorLineNumber.foreground#dfdfdf55
editorLink.activeForeground#6699ff
editorOverviewRuler.addedForeground#4f82ce
editorOverviewRuler.deletedForeground#4f82ce
editorOverviewRuler.errorForeground#e21514
editorOverviewRuler.findMatchForeground#fffb00
editorOverviewRuler.modifiedForeground#4f82ce
editorOverviewRuler.warningForeground#f5c443
editorWarning.foreground#f5c443
editorWhitespace.foreground#53606e
editorWidget.background#303030
errorForeground#e21514
focusBorder#35628b
foreground#dfdfdf
gitDecoration.conflictingResourceForeground#e21514
gitDecoration.ignoredResourceForeground#dfdfdf55
list.activeSelectionBackground#3071db
list.activeSelectionForeground#dfdfdf
list.focusBackground#3071db
list.focusForeground#dfdfdf
list.highlightForeground#f5c443
list.hoverBackground#00000000
list.inactiveSelectionBackground#4f5153
meta.type.annotation#D0A8FF
minimap.errorHighlight#e21514
minimap.findMatchHighlight#fffb00
minimap.selectionHighlight#646f83
minimap.warningHighlight#f5c443
minimapGutter.addedBackground#4f82ce
minimapGutter.deletedBackground#4f82ce
minimapGutter.modifiedBackground#4f82ce
panel.border#000000
peekView.border#3071db
peekViewEditor.background#292a30
peekViewEditor.matchHighlightBackground#545558
peekViewResult.background#2a2c2f
peekViewResult.fileForeground#dfdfdf
peekViewResult.lineForeground#dfdfdf99
peekViewResult.matchHighlightBackground#545558
peekViewResult.selectionBackground#3071db
peekViewResult.selectionForeground#dfdfdf
peekViewTitle.background#2a2c2f
peekViewTitleDescription.foreground#6699ff
peekViewTitleLabel.foreground#dfdfdf
searchEditor.findMatchBackground#fffb00
sideBar.background#2a2c2f
sideBar.border#000000
sideBarSectionHeader.background#00000000
statusBar.background#1c1f21
statusBar.border#000000
statusBar.debuggingBackground#1c1f21
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#dcdddd
statusBar.foreground#dcdddd
statusBar.noFolderBackground#1c1f21
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#dcdddd
tab.activeBackground#1F1F24
tab.activeForeground#ffffff
tab.border#26282b
tab.inactiveBackground#26282b
tab.inactiveForeground#9a9c9d
textLink.activeForeground#6699ff
textLink.foreground#6699ff
titleBar.activeBackground#383a3d
titleBar.activeForeground#b7b8bb
titleBar.border#26282b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6C7986	—
punctuation.definition.string, string	#FC6A5D	—
constant.numeric, keyword.other.unit, support.constant	#D0BF69	—
constant.language, entity.name.tag, keyword, storage.modifier, storage.type, support.type.primitive, variable.language	#FF7AB2	bold
entity.name.function.macro, keyword.control.directive, keyword.control.preprocessor, punctuation.definition.preprocessor	#FFA14F	—
markup.underline.link	#6699FF	—
entity.name.type.class.std.rust, storage.type.cs, support.type, meta.object-literal.key	#ACF2E4	—
meta.object-literal.key	#72BFAE	—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, support.type.property-name, variable	#67B7A4	—
meta.function-call, source.css	#C08AFF	—
meta.definition.function, meta.definition.method, meta.method.declaration	#41A1C0	—
constant.language.boolean.false.ts, constant.language.boolean.true.ts, meta.object.member.ts, meta.objectliteral.ts	#D6C455	—
entity.name.type, entity.other.inherited-class	#5DD8FF	—
support.class.error.ts, meta.class.ts, source.ts	#5DD8FF	—
keyword.operator	#A167E6	—
meta.return.type, meta.function, entity.name.function, support.type.primitive, meta.field.declaration, meta.interface	#D0A8FF	—
entity.name.function.definition, entity.name.function.go, entity.name.type.namespace, entity.name.variable, variable.other.assignment	#67B7A4	—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#72BFAE	—
string.other.link.title.markdown	#DFDFE0	—
entity.name.section	#DFDFE0	bold
variable.other.property	#C08AFF	—
markup.bold	#DFDFE0	bold
markup.italic	#DFDFE0	italic
punctuation	#DFDFE0	—
punctuation.decorator, meta.brace.round	#FFFFFF	—
entity.other.attribute-name.js	#D0A8FF	—
meta.tag.without-attributes.js, meta.jsx.children.js	#FFFFFF	—
punctuation.terminator.statement	#ffffff	—
punctuation.accessor.optional	#A167E6	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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