XCode Modern

Name: XCode Modern
Author: wenbopan

Publisher: wenbopanThemes in package: 2

Modern XCode-inspired theme with native macOS aesthetics, semantic highlighting, and clean UI design for both light and dark modes

Open in VS Code GitHub

Color themes

VS Code preview

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

XCode Modern — XCode Modern Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#dddddd
activityBar.activeBorder#005fb8
activityBar.background#f8f8f8
activityBar.foreground#005fb8
activityBar.inactiveForeground#616161
activityBarBadge.background#005fb8
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#ffffff00
activityBarTop.foreground#005fb8
activityBarTop.inactiveForeground#616161
badge.background#cccccc
badge.foreground#2b2b2b
button.background#005fb8
button.border#0000001a
button.foreground#ffffff
button.hoverBackground#0258a8
button.secondaryBackground#e5e5e5
button.secondaryForeground#2b2b2b
button.secondaryHoverBackground#cccccc
chat.editedFileForeground#895503
chat.slashCommandBackground#d2ecff
chat.slashCommandForeground#306ca2
checkbox.background#f8f8f8
checkbox.border#cecece
commandCenter.border#ffffff00
commandCenter.inactiveBorder#ffffff00
descriptionForeground#2b2b2b
diffEditor.unchangedRegionBackground#f8f8f8
dropdown.background#ffffff
dropdown.border#cecece
dropdown.foreground#2b2b2b
dropdown.listBackground#ffffff
editor.background#ffffff
editor.foreground#2b2b2b
editor.inactiveSelectionBackground#e5ebf180
editor.lineHighlightBackground#edf5fe
editor.lineHighlightBorder#edf5fe
editor.selectionHighlightBackground#add6ff80
editorGroup.border#e5e5e5
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#e5e5e5
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#005fb8
editorIndentGuide.activeBackground1#939393
editorIndentGuide.background1#d3d3d3
editorLineNumber.activeForeground#171184
editorLineNumber.foreground#9098a4
editorOverviewRuler.border#e5e5e5
editorStickyScroll.border#e5e5e5
editorStickyScroll.shadow#00000000
editorSuggestWidget.background#f8f8f8
editorWidget.background#f8f8f8
errorForeground#f85149
focusBorder#238bec
foreground#2b2b2b
icon.foreground#2b2b2b
input.background#ffffff
input.border#cecece
input.foreground#2b2b2b
input.placeholderForeground#767676
inputOption.activeBackground#bed6ed
inputOption.activeBorder#005fb8
inputOption.activeForeground#000000
keybindingLabel.foreground#2b2b2b
list.activeSelectionBackground#e8e8e8
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.focusAndSelectionOutline#005fb8
list.hoverBackground#f2f2f2
menu.border#cecece
menu.selectionBackground#005fb8
menu.selectionForeground#ffffff
notebook.cellBorderColor#e5e5e5
notebook.selectedCellBackground#c8ddf150
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#2b2b2b
notifications.background#ffffff
notifications.border#e5e5e5
notifications.foreground#2b2b2b
panel.background#ffffff
panel.border#e5e5e5
panelInput.border#e5e5e5
panelTitle.activeBorder#00000000
panelTitle.activeForeground#005fb8
panelTitle.inactiveForeground#2b2b2b
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#ffffff
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#e5e5e5
pickerGroup.foreground#8b949e
ports.iconRunningProcessForeground#369432
progressBar.background#005fb8
quickInput.background#f8f8f8
quickInput.foreground#2b2b2b
scrollbar.shadow#00000000
searchEditor.textInputBorder#cecece
settings.dropdownBackground#ffffff
settings.dropdownBorder#cecece
settings.headerForeground#1f1f1f
settings.modifiedItemIndicator#bb800966
settings.numberInputBorder#cecece
settings.textInputBorder#cecece
sideBar.background#f8f8f8
sideBar.border#e5e5e5
sideBar.foreground#2b2b2b
sideBarSectionHeader.background#f8f8f8
sideBarSectionHeader.border#e5e5e5
sideBarSectionHeader.foreground#2b2b2b
sideBarTitle.foreground#2b2b2b
statusBar.background#f8f8f8
statusBar.border#e5e5e5
statusBar.debuggingBackground#fd716c
statusBar.debuggingForeground#000000
statusBar.focusBorder#005fb8
statusBar.foreground#2b2b2b
statusBar.noFolderBackground#f8f8f8
statusBarItem.errorBackground#c72e0f
statusBarItem.focusBorder#005fb8
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#f8f8f8
statusBarItem.remoteForeground#005fb8
tab.activeBackground#d9ebff
tab.activeBorder#f8f8f8
tab.activeBorderTop#d9ebff
tab.activeForeground#005fb8
tab.border#e5e5e5
tab.hoverBackground#d9ebff
tab.hoverForeground#238bec
tab.inactiveBackground#ffffff
tab.inactiveForeground#868686
tab.lastPinnedBorder#d4d4d4
tab.selectedBackground#f8f8f8
tab.selectedBorderTop#d9ebff
tab.selectedForeground#333333b3
tab.unfocusedActiveBorder#f8f8f8
tab.unfocusedActiveBorderTop#ffffff00
tab.unfocusedHoverBackground#d9ebff
terminal.foreground#2b2b2b
terminal.inactiveSelectionBackground#e5ebf1
terminal.tab.activeBorder#005fb8
terminalCursor.foreground#005fb8
textBlockQuote.background#f8f8f8
textBlockQuote.border#e5e5e5
textCodeBlock.background#f8f8f8
textLink.activeForeground#005fb8
textLink.foreground#005fb8
textPreformat.background#0000001f
textPreformat.foreground#2b2b2b
textSeparator.foreground#21262d
titleBar.activeBackground#f8f8f8
titleBar.activeForeground#5b5b5b
titleBar.border#e5e5e5
titleBar.inactiveBackground#f8f8f8
titleBar.inactiveForeground#8b949e
welcomePage.tileBackground#f3f3f3
widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f7c8f	—
string, punctuation.definition.string	#d0402d	—
constant.numeric	#272AD8	—
constant.other.placeholder, constant.character.escape	#000000	—
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, storage, variable.language, constant.language	#AD3DA4	bold
keyword.control.directive, punctuation.definition.directive	#78492A
variable.parameter	#057CB0	—
entity.name.type, entity.other.inherited-class, storage.type.haskell	#23575C	—
keyword.type.cs, 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	#4B21B0
entity.name.function, support.function	#3E8087	—
support.function.builtin	#804FB8	—
variable.other.property, variable.other.object.property, entity.name.variable.field	#3E8087	—
entity.name.function.preprocessor	#78492A	—
entity.name.tag	#4B21B0	—
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css	#804FB8	—
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit	#272AD8	—
support.constant.property-value, support.constant.font-name	#AD3DA4	bold
support.constant.media.css	#3E8087	—
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc	#3E8087	—
markup.heading	—	bold
markup.bold	—	bold
markup.italic	—	italic
magit.header	#4B21B0	—
magit.subheader	#804FB8	—
magit.entity	#272AD8	—
meta.diff.range.unified, punctuation.definition.range.diff	#707F8C	—
markup.inserted, punctuation.definition.inserted	#3E8087	—
markup.deleted, punctuation.definition.deleted	#D12F1B	—
keyword.operator, punctuation, storage.modifier.pointer	#000000
support.type.primitive, meta.type.annotation, meta.var-single-variable.expr, meta.var.expr, meta.block, meta.method.declaration	#6C36A9	—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#0451A5	—

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