macOS Terminal Theme

Name: macOS Terminal Theme
Author: guyowen

Publisher: guyowenThemes in package: 1

The colors macOS Terminal.app's Pro profile actually renders, measured from the renderer and mapped onto VS Code.

Open in VS Code GitHub

VS Code preview

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

macOS Terminal Theme — macOS Terminal (Pro)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#000000
activityBar.border#2B2B2B
activityBar.foreground#F4F4F4
activityBar.inactiveForeground#4D4D4D
activityBarBadge.background#666666
activityBarBadge.foreground#000000
badge.background#666666
badge.foreground#000000
breadcrumb.background#000000
breadcrumb.focusForeground#F4F4F4
breadcrumb.foreground#5C5C5C
button.background#666666
button.foreground#000000
button.hoverBackground#BFBFBF
button.secondaryBackground#1A1A1A
button.secondaryForeground#F4F4F4
checkbox.background#1A1A1A
checkbox.border#3D3D3D
contrastBorder#00000000
diffEditor.insertedTextBackground#00A60022
diffEditor.removedTextBackground#99000033
dropdown.background#0D0D0D
dropdown.border#2B2B2B
dropdown.foreground#F4F4F4
editor.background#000000
editor.findMatchBackground#99990088
editor.findMatchHighlightBackground#99990044
editor.foreground#F4F4F4
editor.inactiveSelectionBackground#52525244
editor.lineHighlightBackground#0D0D0D
editor.lineHighlightBorder#00000000
editor.selectionBackground#525252
editor.selectionHighlightBackground#52525266
editor.wordHighlightBackground#52525244
editor.wordHighlightStrongBackground#52525266
editorBracketHighlight.foreground1#E6E600
editorBracketHighlight.foreground2#E600E6
editorBracketHighlight.foreground3#00E6E6
editorBracketHighlight.foreground4#00D900
editorBracketHighlight.foreground5#BFBFBF
editorBracketHighlight.foreground6#999900
editorBracketMatch.background#52525255
editorBracketMatch.border#666666
editorCursor.foreground#606060
editorError.foreground#E60000
editorGroup.border#2B2B2B
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#2B2B2B
editorGutter.addedBackground#00A600
editorGutter.deletedBackground#990000
editorGutter.modifiedBackground#00A6B3
editorHoverWidget.background#0D0D0D
editorHoverWidget.border#2B2B2B
editorIndentGuide.activeBackground1#3D3D3D
editorIndentGuide.background1#1F1F1F
editorInfo.foreground#00A6B3
editorLineNumber.activeForeground#BFBFBF
editorLineNumber.foreground#4D4D4D
editorOverviewRuler.border#2B2B2B
editorRuler.foreground#1F1F1F
editorSuggestWidget.background#0D0D0D
editorSuggestWidget.highlightForeground#00E6E6
editorSuggestWidget.selectedBackground#252525
editorWarning.foreground#999900
editorWhitespace.foreground#2B2B2B
editorWidget.background#0D0D0D
editorWidget.border#2B2B2B
focusBorder#666666
foreground#F4F4F4
gitDecoration.conflictingResourceForeground#E600E6
gitDecoration.deletedResourceForeground#E60000
gitDecoration.ignoredResourceForeground#4D4D4D
gitDecoration.modifiedResourceForeground#999900
gitDecoration.untrackedResourceForeground#00A600
input.background#1A1A1A
input.border#2B2B2B
input.foreground#F4F4F4
inputOption.activeBorder#666666
list.activeSelectionBackground#252525
list.activeSelectionForeground#F4F4F4
list.errorForeground#E60000
list.highlightForeground#00E6E6
list.hoverBackground#151515
list.inactiveSelectionBackground#1A1A1A
list.warningForeground#999900
menu.background#0D0D0D
menu.border#2B2B2B
menu.foreground#F4F4F4
menu.selectionBackground#252525
menubar.selectionBackground#1A1A1A
minimap.background#000000
minimapSlider.background#3D3D3D44
notificationCenterHeader.background#1A1A1A
notifications.background#0D0D0D
notifications.border#2B2B2B
panel.background#000000
panel.border#2B2B2B
panelTitle.activeBorder#00D900
panelTitle.activeForeground#F4F4F4
panelTitle.inactiveForeground#5C5C5C
peekView.border#666666
peekViewEditor.background#0D0D0D
peekViewResult.background#0D0D0D
peekViewTitle.background#1A1A1A
progressBar.background#00D900
quickInput.background#0D0D0D
quickInputList.focusBackground#252525
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#666666AA
scrollbarSlider.background#3D3D3D66
scrollbarSlider.hoverBackground#5252528A
sideBar.background#000000
sideBar.border#2B2B2B
sideBar.foreground#BFBFBF
sideBarSectionHeader.background#0D0D0D
sideBarSectionHeader.border#2B2B2B
sideBarTitle.foreground#666666
statusBar.background#000000
statusBar.border#2B2B2B
statusBar.debuggingBackground#999900
statusBar.debuggingForeground#000000
statusBar.foreground#BFBFBF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#1A1A1A
statusBarItem.remoteBackground#1A1A1A
statusBarItem.remoteForeground#F4F4F4
tab.activeBackground#000000
tab.activeBorderTop#00D900
tab.activeForeground#F4F4F4
tab.border#2B2B2B
tab.hoverBackground#1A1A1A
tab.inactiveBackground#000000
tab.inactiveForeground#5C5C5C
tab.unfocusedActiveForeground#BFBFBF
terminal.ansiBlack#000000
terminal.ansiBlue#0000B3
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0000FF
terminal.ansiBrightCyan#00E6E6
terminal.ansiBrightGreen#00D900
terminal.ansiBrightMagenta#E600E6
terminal.ansiBrightRed#E60000
terminal.ansiBrightWhite#E6E6E6
terminal.ansiBrightYellow#E6E600
terminal.ansiCyan#00A6B3
terminal.ansiGreen#00A600
terminal.ansiMagenta#B300B3
terminal.ansiRed#990000
terminal.ansiWhite#BFBFBF
terminal.ansiYellow#999900
terminal.background#000000
terminal.border#2B2B2B
terminal.foreground#F4F4F4
terminal.selectionBackground#525252
terminalCursor.background#F4F4F4
terminalCursor.foreground#606060
textLink.activeForeground#00A6B3
textLink.foreground#00E6E6
titleBar.activeBackground#000000
titleBar.activeForeground#BFBFBF
titleBar.border#2B2B2B
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#4D4D4D
widget.border#2B2B2B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#666666	italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc	#666666	italic
string, string.quoted, string.template, punctuation.definition.string	#00A600	—
constant.character.escape, string.regexp, constant.other.placeholder	#00D900	—
punctuation.definition.template-expression, punctuation.section.embedded	#E600E6	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, keyword.other.unit	#00E6E6	—
constant.other, variable.other.constant, support.constant	#00E6E6	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier	#E600E6	—
keyword.control.import, keyword.control.export, keyword.control.from	#E600E6	—
entity.name.function, support.function, meta.function-call.generic, variable.function	#E6E600	—
entity.name.method, meta.method entity.name.function	#E6E600	—
meta.decorator, entity.name.function.decorator, punctuation.decorator	#E6E600	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, entity.other.inherited-class, meta.type.annotation	#00A6B3	—
support.type.primitive, keyword.type	#00A6B3	—
variable, variable.other.readwrite, meta.definition.variable	#F4F4F4	—
variable.parameter, meta.parameter	#BFBFBF	—
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property	#E6E6E6	—
variable.language, variable.language.this, variable.language.super	#E600E6	italic
keyword.operator, punctuation, punctuation.separator, punctuation.terminator, meta.brace	#BFBFBF	—
entity.name.tag, punctuation.definition.tag	#E600E6	—
entity.other.attribute-name	#E6E600	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#E6E600	—
support.type.property-name.css, meta.property-name.css	#00A6B3	—
support.constant.property-value.css, constant.numeric.css	#00E6E6	—
support.type.property-name.json	#E6E6E6	—
markup.heading, entity.name.section	#E6E600	bold
markup.bold	#FFFFFF	bold
markup.italic	#F4F4F4	italic
markup.underline.link, string.other.link	#00A6B3	underline
markup.inline.raw, markup.fenced_code, markup.raw	#00A600	—
punctuation.definition.list.begin.markdown, markup.list	#BFBFBF	—
markup.quote	#666666	italic
markup.inserted	#00A600	—
markup.deleted	#E60000	—
markup.changed	#999900	—
support.function.builtin.shell, keyword.command	#E6E600	—
variable.other.normal.shell, punctuation.definition.variable.shell	#00E6E6	—
constant.other.character-class.regexp, keyword.operator.quantifier.regexp	#00D900	—
invalid, invalid.illegal	#E60000	—
invalid.deprecated	#666666	strikethrough