Xcode Default Theme

Name: Xcode Default Theme
Author: smockle

Publisher: smockleThemes in package: 4

Brings the colors of the Xcode 'Default (Dark)' and 'Default (Light)' themes to Visual Studio Code

Color themes

VS Code preview

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

Xcode Default Theme — Xcode Default (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
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#FFFFFF
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
new.expr entity.name	#713DA9	—
comment, comment storage.type	#536579	italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, support.function.calc.css, support.function.calc.scss, support.type.property-name.css, support.type.property-name.scss, support.type.vendored.property-name.css, support.type.vendored.property-name.scss, meta.property-value.css support.constant, meta.property-value.scss support.constant, meta.property-value.css support.constant.property-value, meta.property-value.scss support.constant.property-value, support.function.transform.css, support.function.transform.scss	#AA0D91	—
meta.decorator, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator meta.function-call entity.name.function	#643820	—
meta.tag.sgml.html	#A6A6A6	—
entity.name.function, support.function	#4B22B0	—
meta.property-list meta.property-name, support.type.property-name, support.type.map.key, entity.name.tag.yaml	#4B22B0	—
keyword.control, keyword.declaration, keyword.expressions-and-types, keyword.operator.new, keyword.reserved, keyword.statement, storage.type, storage.modifier, constant.language, variable.language.super, variable.language.this, text.html entity.name.tag, meta.tag entity.name.tag, meta.tag support.class, string.regexp keyword.other	#AD3DA4	bold
storage.type.function.arrow, meta.template.expression punctuation, punctuation.separator.key-value, meta.object-literal.key meta.brace.square, meta.template.expression keyword.operator, keyword.operator.or.regexp, keyword.operator.quantifier, punctuation.definition.group.regexp, punctuation.definition.character-class	#000000	—
meta.tag entity.other.attribute-name, constant.character.escape.backslash	#816927	—
constant.numeric, keyword.other.unit, constant.other.color	#272AD8	—
string, variable.parameter.url.scss, markup.heading.markdown, beginning.punctuation.definition.list.markdown, meta.template.expression meta.embedded punctuation.definition.string.begin, meta.template.expression meta.embedded punctuation.definition.string.end	#D12F1B	—
meta.type, meta.return.type, entity.name.type, support.type.primitive	#713DA9	—
meta.objectliteral variable.other.object, entity.name.type.module, entity.other.inherited-class, variable.scss, variable.other.bracket.shell, entity.name.function.scss	#3F6E74	—
keyword.control.at-rule, meta.import variable.other.readwrite, meta.definition.variable variable.other.readwrite, meta.definition.variable variable.other.constant, meta.template.expression variable.other.readwrite, meta.template.expression variable.other.constant, support.constant.property-value	#000000	—
variable.other.property, variable.other.object.property, support.variable.property	#713DA9	—

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