MacOS Modern Theme

Name: MacOS Modern Theme
Author: davidbwaters

Publisher: davidbwatersThemes in package: 11

MacOS Modern is a theme pack styled to match native MacOS as closely as possible. Use recommended settings in the README.md for best results.

GitHub

Color themes

VS Code preview

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

MacOS Modern Theme — MacOS Modern Dark - Ventura Xcode

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#45464a57
activityBar.activeBorder#128cff
activityBar.activeFocusBorder#128cff
activityBar.background#353333
activityBar.border#101010
activityBar.dropBorder#128cff
activityBar.foreground#128cff
activityBar.inactiveForeground#c2c0c0
activityBarBadge.background#128cff
badge.background#128cff
badge.foreground#ffffff
button.background#128cff
button.foreground#ffffff
button.hoverBackground#128cff
descriptionForeground#777777
dropdown.background#403e3e
dropdown.border#bfbfbf
dropdown.foreground#dedede
dropdown.listBackground#ffffff
editor.background#232222
editor.foreground#ffffffd8
editor.inactiveSelectionBackground#6e6e6e
editor.lineHighlightBackground#403e3e
editor.selectionBackground#6e6e6e
editor.selectionHighlightBackground#6e6e6e80
editor.wordHighlightBackground#6e6e6e80
editor.wordHighlightStrongBackground#6e6e6e80
editorError.border#ff000000
editorError.foreground#e21515
editorGroup.border#3e3c3c
editorGroup.dropBackground#555555
editorGroup.emptyBackground#403e3e
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.border#3e3c3c
editorGroupHeader.noTabsBackground#2c2c2b
editorGroupHeader.tabsBackground#2c2c2b
editorGroupHeader.tabsBorder#3e3c3c
editorGutter.addedBackground#4dbf57
editorGutter.background#ff000000
editorGutter.deletedBackground#e21515
editorGutter.modifiedBackground#128cff
editorHint.border#ff000000
editorHint.foreground#128cff
editorInfo.border#ff000000
editorInfo.foreground#4dbf57
editorLineNumber.activeForeground#ffffffd8
editorLineNumber.foreground#747478
editorOverviewRuler.addedForeground#4dbf57
editorOverviewRuler.border#ff000000
editorOverviewRuler.bracketMatchForeground#6e6e6e80
editorOverviewRuler.deletedForeground#e21515
editorOverviewRuler.errorForeground#e21515
editorOverviewRuler.findMatchForeground#6e6e6e80
editorOverviewRuler.infoForeground#128cff
editorOverviewRuler.modifiedForeground#128cff
editorOverviewRuler.rangeHighlightForeground#6e6e6e80
editorOverviewRuler.selectionHighlightForeground#6e6e6e80
editorOverviewRuler.warningForeground#ffc501
editorOverviewRuler.wordHighlightForeground#6e6e6e80
editorOverviewRuler.wordHighlightStrongForeground#6e6e6e80
editorPane.background#1e1e1e
editorUnnecessaryCode.opacity#000000c0
editorWarning.border#ff000000
editorWarning.foreground#ffc501
editorWidget.background#2c2c2b
focusBorder#3675a2
foreground#a3a2a2
input.background#403e3e
input.border#515151
input.foreground#dedede
inputOption.activeBackground#4f4d4d
list.activeSelectionBackground#464646
list.focusBackground#464646
list.focusOutline#464646
list.hoverBackground#464646
list.inactiveFocusBackground#464646
list.inactiveSelectionBackground#464646
minimap.background#00000079
panel.background#2c2c2b
panelInput.border#101010
panelSection.border#101010
panelSectionHeader.border#101010
quickInput.background#101010
quickInput.foreground#dedede
selection.background#4f4d4d
sideBar.background#353333
sideBar.border#101010
sideBar.dropBackground#353333
sideBar.foreground#dedede
sideBarSectionHeader.background#35333350
sideBarSectionHeader.border#f9f5f500
sideBarSectionHeader.foreground#b4b3b3
sideBarTitle.foreground#7d7c7c
statusBar.background#403e3e
statusBar.border#101010
statusBar.debuggingBackground#403e3e
statusBar.foreground#b4b3b3
statusBar.noFolderBackground#403e3e
tab.activeBackground#403e3e
tab.activeBorder#101010
tab.activeBorderTop#403e3e
tab.activeForeground#ebebeb
tab.border#474646
tab.inactiveBackground#2c2c2b
tab.inactiveForeground#9f9f9e
tab.unfocusedActiveBackground#403e3e
tab.unfocusedActiveBorder#101010
tab.unfocusedActiveForeground#ebebeb
tab.unfocusedInactiveBackground#2c2c2b
tab.unfocusedInactiveForeground#9f9f9e
textBlockQuote.background#ff000000
textBlockQuote.border#ff000000
textCodeBlock.background#ff000000
titleBar.activeBackground#403e3e
titleBar.activeForeground#dedede
titleBar.border#101010
titleBar.inactiveBackground#403e3e
titleBar.inactiveForeground#acacab
widget.shadow#403e3e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f8c98	—
string	#fe8170	—
storage.type.function.arrow	#ffffffd8	—
storage.type, storage.modifier, keyword, variable.language.this, variable.language.super, keyword.other.typedef, constant.language	#fe7ab2	—
entity.name.type.class	#6bdfff	—
variable.other.property, variable.other.object.property	#b181ec	—
entity.name.function, entity.name.function.method	#4db1cb	—
entity.name.type.module, entity.other.inherited-class, entity.name.class	#d9baff	—
markup.bold, markdown.bold	#6bdfff
markup.heading, markdown.heading	#6bdfff
markup.italic, markdown.italic	#d9baff
markup.quote, markdown.quote	#d9baff
meta.type.annotation	#6bdfff	—
punctuation.definition.tag, entity.name.tag, punctuation.separator.key-value	#fe7ab2	—
punctuation.separator.key-value.js	#ffffffd9	—
meta.attribute, entity.other.attribute-name	#cc9767	—
constant.numeric	#d8c87c	—
variable.other.property	#abf2e4	—
keyword.operator	#ffffffd9	—
variable.parameter	#ffffffd9	—
support.type	#d9baff	—
keyword.operator.assignment	#ffffffd9	—
entity.name.fragment.graphql, variable.fragment.graphql	#6bdfff	—
punctuation.quasi.element	#ffffffd9	—
variable.other.readwrite	#ffffffd9	—
meta.brace	#ffffffd9	—
keyword.operator.arithmetic	#b281eb	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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