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 Partial (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#1C1D20
activityBar.border#16171A
activityBar.foreground#DFDFE0
activityBarBadge.background#DFDFE0
activityBarBadge.foreground#1C1D20
badge.foreground#1C1D20
button.background#3C93FD
editor.background#292A30
editor.lineHighlightBackground#2F3239
editor.selectionBackground#3D4752
editorGroup.border#16171A
editorGroupHeader.tabsBackground#252629
editorGroupHeader.tabsBorder#16171A
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#747478
editorWidget.background#252629
editorWidget.border#16171A
editorWidget.resizeBorder#16171A
focusBorder#82ADF3
foreground#FFFFFF
input.background#252629
input.border#16171A
input.placeholderForeground#8A8C8D
list.activeSelectionBackground#3C93FD
list.focusBackground#3C93FD
list.focusForeground#000000
list.highlightForeground#FFFFFF
list.hoverBackground#252629
list.inactiveSelectionBackground#515253
notificationCenter.border#16171A
notifications.border#16171A
panel.border#16171A
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#FFFFFF
scrollbar.shadow#00000000
selection.background#B3D7FF
sideBar.background#252629
sideBar.border#16171A
sideBarSectionHeader.background#252629
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#252629
statusBar.border#16171A
statusBar.debuggingBackground#252629
statusBar.foreground#A6A7A8
statusBar.noFolderBackground#252629
tab.activeBorder#292A30
tab.activeForeground#FFFFFF
tab.border#16171A
tab.inactiveBackground#252629
tab.inactiveForeground#A6A7A8
terminal.ansiBlack#000000
terminal.ansiBlue#0001B2
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0001B2
terminal.ansiBrightCyan#01A6B2
terminal.ansiBrightGreen#00A600
terminal.ansiBrightMagenta#B301B2
terminal.ansiBrightRed#990001
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#999900
terminal.ansiCyan#01A6B2
terminal.ansiGreen#00A600
terminal.ansiMagenta#B301B2
terminal.ansiRed#990001
terminal.ansiWhite#BFBFBF
terminal.ansiYellow#999900
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#0000A6	—
comment	#62AD41	—
constant.language	#30A0FC	—
constant.numeric	#B1D99D	—
constant.regexp	#5559A4	—
entity.name.tag	#30A0FC	—
entity.name.tag.css	#F2C462	—
entity.other.attribute-name	#7FE5FF	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#F2C462	—
invalid	#FF1313	—
markup.underline	—	underline
markup.bold	#30A0FC	bold
markup.heading	#30A0FC	bold
markup.italic	—	italic
markup.inserted	#B1D99D	—
markup.deleted	#E8865E	—
markup.changed	#30A0FC	—
punctuation.definition.quote.begin.markdown	#62AD41	—
punctuation.definition.list.begin.markdown	#418CFF	—
markup.inline.raw	#E8865E	—
punctuation.definition.tag	#808080	—
meta.preprocessor	#30A0FC	—
meta.preprocessor.string	#E8865E	—
meta.preprocessor.numeric	#B1D99D	—
meta.structure.dictionary.key.python	#7FE5FF	—
meta.diff.header	#30A0FC	—
storage	#30A0FC	—
storage.type	#30A0FC	—
storage.modifier	#30A0FC	—
string	#E8865E	—
string.tag	#E8865E	—
string.value	#E8865E	—
string.regexp	#F04A4A	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#30A0FC	—
meta.template.expression	#D4D4D4	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#7FE5FF	—
keyword	#30A0FC	—
keyword.control	#30A0FC	—
keyword.operator	#D4D4D4	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python	#30A0FC	—
keyword.other.unit	#B1D99D	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#30A0FC	—
support.function.git-rebase	#7FE5FF	—
constant.sha.git-rebase	#B1D99D	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#D4D4D4	—
variable.language	#30A0FC	—
entity.name.function, support.function, support.constant.handlebars	#EBEB9B	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, 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, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#29EEC6	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#29EEC6	—
keyword.control	#D873D0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#7FE5FF	—
meta.object-literal.key	#7FE5FF	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#E8865E	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#E8865E	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#F04A4A	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#EBEB9B	—
keyword.operator.quantifier.regexp	#F2C462	—
constant.character	#30A0FC	—
constant.character.escape	#F2C462	—

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