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 Civic

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	#51C34F	—
string constant.other.placeholder	#e7e8eB	—
constant.other.color	#53b3b1	—
constant.numeric	#34c9c6
invalid, invalid.illegal	#FF5370	—
storage.type, storage.modifier	#E12DA0	—
keyword	#e7e8eB	—
constant.other.color, meta.tag, meta.brace.round, meta.parameters, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#e7e8eB	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#E12DA0	—
markup.bold	#5124e3
markup.italic	#E12DA0
markup.quote	#E12DA0
meta.function-call, variable.function, support.function, keyword.other.special-method	#53b3b1	—
support.other.variable	#5124e3	—
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#53b3b1	—
variable.parameter	#e7e8eB	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ec3d37
support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#53b3b1	—
support.type	#55747C	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#E12DA0	—
entity.name.module.js, variable.import.parameter.js	#53b3b1	—
variable.language	#E12DA0
entity.name.method.js	#53b3b1
meta.class-method.js entity.name.function.js, variable.function.constructor	#e7e8eB	—
entity.other.attribute-name	#55747C	—
entity.other.attribute-name.class	#55747C	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#53b3b1	—
constant.character.escape	#8486ba	—
url, link, uri	#5124e3	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#53b3b1	—
text.html.markdown, punctuation.definition.list_item.markdown	#e7e8eB	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737e	—
text.html.markdown meta.dummy.line-break	#ffffff	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#53b3b1	—
markup.italic, punctuation.definition.italic.markdown	#53b3b1	italic
markup.underline	#8f84ec	underline
markup.strike	#ff0000
markup.quote punctuation.definition.blockquote.markdown	#5124e3	—
markup.quote	#e7e8eB	italic
string.other.link.title.markdown	#45BB3E	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#ffffff	—
markup.raw.block	#5124e3	—
markup.raw.block.fenced.markdown	#5124e3	—
punctuation.definition.fenced.markdown	#5124e3	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#45BB3E	—
variable.language.fenced.markdown	#5124e3	—
meta.separator	#65737e	—
markup.table	#EEFFFF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
constant.numeric.angular-directive, expression.angular-interpolation	#F44336	—
entity.other.attribute-name.html	#53b3b1
meta.attribute.href.html	#e7e8eB
punctuation.definition.tag	#bdbdbd62
constant.numeric	#e7e8eB
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#ec3d37
entity.name.tag.html	#34c9c6
string.quoted.double.html	#ec3d37
punctuation.definition.entity.html, constant.character.entity.named.copy.html	#8f84ec
support.type.property-name.css	#e7e8eB
support.type, entity.other.attribute-name	#8f84ec
entity.other.attribute-name.class.css, entity.other.keyframe-offset.percentage.css	#34c9c6
entity.other.attribute-name.pseudo-class.css	#53b3b1
entity.other.attribute-name.pseudo-element.css	#25908D
keyword.other.unit.vh.css, keyword.other.unit.deg.css, keyword.other.unit.rem.css	#53b3b1
keyword.control.at-rule.css	#E12DA0
string.quoted.single.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css	#ec3d37
entity.name.type.class.swift	#ffffff	—
meta.inheritance-clause.swift	#53B1B3	—
keyword.other.declaration-specifier.swift	#E12DA0	—
meta.definition.type.body.swift	#ffffff	—
meta.function-call.swift	#53b3b1	—
support.variable.swift	#53b3b1	—
variable.other.swift	#53b3b1	—
entity.name.function.swift	#ffffff	—
meta.function-call.swift	#ffffff	—
variable.language.swift	#E12DA0
constant.language.boolean.swift	#E12DA0
meta.definition.function.body.swift	#53b3b1
meta.function-call.swift	#53b3b1
support.function.any-method.swift	#53b3b1
keyword.operator.type.swift	#E12DA0
punctuation.definition.string.begin.swift, punctuation.definition.string.end.swift	#ec3d37
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.single.js	#ec3d37
constant.language.json	#E12DA0
meta.definition.variable.js, keyword.operator.assignment.js, meta.var.expr.js, support.class, meta.function.expression.js, meta.objectliteral.js, keyword.operator.arithmetic.js, keyword.operator.comparison.js, keyword.operator.relational.js, variable.other.readwrite.js, variable.other.object.js, punctuation.accessor.js, punctuation.separator.comma.js, punctuation.terminator.statement.js, punctuation.separator.parameter.js	#e7e8eB
constant.language.boolean.true.js, constant.language.boolean.false.js	#E12DA0	—
support.class.builtin.js	#18B5B1	—
keyword.operator.logical.js	#e7e8eB	—
variable.other.property.js, meta.function.expression.js, meta.var.expr.js, meta.function.expression.js, meta.var.expr.js, meta.function-call.js, meta.array.literal.js, meta.object.member.js	#53b3b1
support.constant.math.js, meta.var.expr.js, support.class.console.js	#34c9c6
keyword, keyword.control.conditional.js	#E12DA0
punctuation.definition.string.begin.js, punctuation.definition.string.end.js, string.quoted.single.js	#ec3d37
entity.name.section.markdown, punctuation.definition.heading.markdown	#34c9c6	—
markup.bold.markdown	#E12DA0	—
markup.bold.italic	#E12DA0	italic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#bdbdbd62
punctuation.definition.link.markdown	#8f84ec	underline
string.other.link.description.markdown	#51C34F
punctuation.definition.list.begin.markdown	#E12DA0	—
markup.fenced_code.block.markdown	#bdbdbd62	—
keyword.operator.assignment.go	#e7e8eB	—
entity.other.inherited-class.js	#53b3b1	—
entity.other.attribute-name.js	#53b3b1	—
entity.name.tag.js	#53b3b1	—
entity.name.type.class.js	#e7e7e7	—
entity.name.function.js	#34c9c6	—
support.class.component.js	#34c9c6	—
support.constant.js	#34c9c6	—

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