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 Midnight (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#0A0D14
activityBar.border#000000
activityBar.foreground#E8E9F0
breadcrumb.background#0A0D14
breadcrumb.focusForeground#E8E9F0
breadcrumb.foreground#A8ADBF
debugIcon.breakpointCurrentStackframeForeground#3A6FC2
debugIcon.breakpointForeground#3A6FC2
diffEditor.insertedTextBackground#3CFF5518
diffEditor.removedTextBackground#FF504418
editor.background#10131A
editor.findMatchBackground#FFD23F
editor.findMatchHighlightBackground#3A405A
editor.foreground#E8E9F0
editor.hoverHighlightBackground#1F3057
editor.lineHighlightBackground#1B2030
editor.selectionBackground#2B3A5C66
editor.snippetTabstopHighlightBackground#3A6FC2
editor.stackFrameHighlightBackground#3A6FC222
editorCodeLens.foreground#A8ADBF77
editorCursor.foreground#FFFFFF
editorError.foreground#F25A5A
editorGroupHeader.noTabsBackground#1A1F2A
editorGroupHeader.tabsBackground#161A22
editorGutter.addedBackground#4F82CE
editorGutter.deletedBackground#4F82CE
editorGutter.modifiedBackground#4F82CE
editorIndentGuide.activeBackground#5A6478
editorIndentGuide.background#2A3142
editorLineNumber.activeForeground#E8E9F0
editorLineNumber.foreground#5A6478
editorLink.activeForeground#7AA9FF
editorOverviewRuler.addedForeground#4F82CE
editorOverviewRuler.deletedForeground#4F82CE
editorOverviewRuler.errorForeground#F25A5A
editorOverviewRuler.findMatchForeground#FFD23F
editorOverviewRuler.modifiedForeground#4F82CE
editorOverviewRuler.warningForeground#F5C443
editorWarning.foreground#F5C443
editorWhitespace.foreground#3B4459
editorWidget.background#1A1F2A
errorForeground#F25A5A
focusBorder#3A6FC2
foreground#E8E9F0
gitDecoration.conflictingResourceForeground#F25A5A
gitDecoration.ignoredResourceForeground#A8ADBF55
list.activeSelectionBackground#2B4FAA
list.activeSelectionForeground#FFFFFF
list.focusBackground#2B4FAA
list.focusForeground#FFFFFF
list.highlightForeground#F5C443
list.hoverBackground#00000000
list.inactiveSelectionBackground#2A3142
meta.type.annotation#D0A8FF
minimap.errorHighlight#F25A5A
minimap.findMatchHighlight#FFD23F
minimap.selectionHighlight#2B3A5C
minimap.warningHighlight#F5C443
minimapGutter.addedBackground#4F82CE
minimapGutter.deletedBackground#4F82CE
minimapGutter.modifiedBackground#4F82CE
panel.border#000000
peekView.border#3A6FC2
peekViewEditor.background#161B26
peekViewEditor.matchHighlightBackground#3A405A
peekViewResult.background#0A0D14
peekViewResult.fileForeground#E8E9F0
peekViewResult.lineForeground#A8ADBF
peekViewResult.matchHighlightBackground#3A405A
peekViewResult.selectionBackground#2B4FAA
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#0A0D14
peekViewTitleDescription.foreground#7AA9FF
peekViewTitleLabel.foreground#E8E9F0
searchEditor.findMatchBackground#FFD23F
sideBar.background#0A0D14
sideBar.border#000000
sideBarSectionHeader.background#00000000
statusBar.background#0A0D14
statusBar.border#000000
statusBar.debuggingBackground#0A0D14
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#E8E9F0
statusBar.foreground#A8ADBF
statusBar.noFolderBackground#0A0D14
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#A8ADBF
tab.activeBackground#10131A
tab.activeForeground#FFFFFF
tab.border#161A22
tab.inactiveBackground#161A22
tab.inactiveForeground#7C829A
textLink.activeForeground#7AA9FF
textLink.foreground#7AA9FF
titleBar.activeBackground#1A1F2A
titleBar.activeForeground#E8E9F0
titleBar.border#161A22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A9F66	—
punctuation.definition.string, string	#FF6E62	—
constant.numeric, keyword.other.unit, support.constant	#D4BF6B	—
constant.language, entity.name.tag, keyword, storage.modifier, storage.type, support.type.primitive, variable.language	#FF7AB2	bold
keyword.control.directive, keyword.control.preprocessor, punctuation.definition.preprocessor	#FFA14F	—
markup.underline.link	#7AA9FF	—
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	#5DD8FF	—
variable.other.constant, meta.definition.variable	#FFFFFF	—
variable.parameter, meta.parameters, meta.method.declaration, meta.object.member	#48B7DB	—
variable.other.object, meta.var.expr, meta.definition.variable, meta.block	#48B7DB	—
constant.language.boolean.false, constant.language.boolean.true, meta.objectliteral	#D6C455	—
entity.name.type	#E5CFFF	—
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	#D0A8FF	—
meta.function-call	#CDA1FF	—
entity.name.type.namespace, entity.name.variable, variable.other.assignment	#49B7D7	—
variable.object.property, meta.definition.property, meta.field.declaration, meta.class	#49B7D7	—
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	#E8E9F0	—
entity.name.section	#E8E9F0	bold
variable.other.object.property, support.variable.property, variable.other.constant.property	#83C9BC	—
markup.bold	#E8E9F0	bold
markup.italic	#E8E9F0	italic
punctuation	#E8E9F0	—
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	#FFFFFF	—
punctuation.accessor.optional	#A167E6	—
case-clause.expr, switch-block.expr, switch-statement.expr	#48B7DB	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F25A5A	—
token.debug-token	#B267E6	—
support.class.dart, other.source.dart	#E5CFFF	—
entity.name.function.dart	#5DD8FF	—
source.dart	#49B7D7	—
variable.parameter.dart	#83C9BC	—

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