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 Civic (Dark)

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#282831
activityBar.border#282831
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#292b36
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#ff0000
editorGroupHeader.noTabsBackground#383a3d
editorGroupHeader.tabsBackground#282831
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#ff0000
editorOverviewRuler.findMatchForeground#fffb00
editorOverviewRuler.modifiedForeground#4f82ce
editorOverviewRuler.warningForeground#f5c443
editorWarning.foreground#f5c443
editorWhitespace.foreground#53606e
editorWidget.background#303030
errorForeground#ff0000
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#ff0000
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#32323B
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#32323B
tab.activeForeground#ffffff
tab.border#282831
tab.inactiveBackground#282831
tab.inactiveForeground#9a9c9d
textLink.activeForeground#6699ff
textLink.foreground#6699ff
titleBar.activeBackground#282831
titleBar.activeForeground#b7b8bb
titleBar.border#282831

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#51C34F	—
punctuation.definition.string, string	#DE3A3C	—
constant.numeric, keyword.other.unit, support.constant	#D0BF69	—
constant.language, entity.name.tag, keyword, storage.modifier, storage.type, support.type.primitive, variable.language	#E12DA0	bold
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.other.property	#83C9BC	—
meta.definition.function, meta.definition.method, meta.method.declaration	#1da9a2	—
meta.definition.function.swift, source.swift	#4daeca	—
variable.parameter.function.swift, source.swift	#FFFFFF	—
variable.other.constant, meta.definition.variable	#FFFFFF	—
variable.parameter, meta.parameters, meta.method.declaration, meta.object.member	#4eb1cc	—
variable.other.object, meta.var.expr, meta.definition.variable, meta.block	#29A09F	—
constant.language.boolean.false, constant.language.boolean.true, meta.objectliteral	#D6C455	—
entity.name.type	#5DD8FF	—
entity.name.type.class, entity.other.inherited-class	#5DD8FF	—
keyword.operator	#A167E6	—
meta.return.type, meta.function, support.type.primitive, meta.field.declaration, meta.interface	#E12DA0	—
meta.function-call	#17B6B2	—
entity.name.type.namespace, entity.name.variable, variable.other.assignment	#49B7D7	—
variable.object.property, meta.definition.property, meta.field.declaration, meta.class	#18B5B1	—
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.object.property, support.variable.property, variable.other.constant.property	#83C9BC	—
markup.bold	#DFDFE0	bold
markup.italic	#DFDFE0	italic
punctuation	#fff	—
punctuation.decorator, meta.brace.round	#FFFFFF	—
entity.other.attribute-name	#D0A8FF	—
meta.tag.without-attributes, metax.children	#FFFFFF	—
variable.other.readwrite.alias	#FFFFFF	—
punctuation.terminator.statement	#505050	—
punctuation.accessor.optional	#A167E6	—
case-clause.expr, switch-block.expr, switch-statement.expr	#41A1C0	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#ff0000	—
token.debug-token	#B267E6	—
support.class.dart, other.source.dart	#E5CFFF	—
entity.name.function.dart	#5DD8FF	—
source.dart	#49B7D7	—
variable.parameter.dart	#83C9BC	—
entity.name.type.class.flutter, source.flutter	#E5CFFF	—
entity.name.function.flutter	#5DD8FF	—
source.flutter	#49B7D7	—
variable.parameter.flutter	#83C9BC	—
meta.inheritance-clause.swift, source.swift	#29A09F	—
meta.definition.type.class.swift	#4daeca	—

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