Xcode 10

Name: Xcode 10
Author: Ashish Shekar

Publisher: Ashish ShekarThemes in package: 2

Xcode 10 theme port with a subliminal vibe. Also new coffee version is available.

GitHub

Color themes

VS Code preview

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

Xcode 10 — Xcode 10 Coffee

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeFocusBorder#ffd866
activityBar.background#19181a
activityBar.border#19181a
activityBar.foreground#c1c0c0
activityBar.inactiveForeground#5b595c
activityBarBadge.background#ffd866
activityBarBadge.foreground#2d2a2e
badge.background#ffd866
badge.foreground#2d2a2e
banner.background#403e41
banner.foreground#c1c0c0
banner.iconForeground#c1c0c0
breadcrumb.activeSelectionForeground#fcfcfa
breadcrumb.focusForeground#c1c0c0
breadcrumb.foreground#939293
button.background#403e41
button.foreground#c1c0c0
button.hoverBackground#5b595c
button.secondaryBackground#403e41
button.secondaryForeground#c1c0c0
button.secondaryHoverBackground#5b595c
button.separator#2d2a2e
charts.blue#78dce8
charts.foreground#fcfcfa
charts.green#a9dc76
charts.lines#727072
charts.orange#fc9867
charts.purple#ab9df2
charts.red#ff6188
charts.yellow#ffd866
checkbox.background#403e41
checkbox.border#403e41
checkbox.foreground#fcfcfa
commandCenter.activeBackground#2d2a2e
commandCenter.activeForeground#c1c0c0
commandCenter.background#221f22
commandCenter.border#2d2a2e
commandCenter.foreground#939293
debugConsole.errorForeground#ff6188
debugConsole.infoForeground#78dce8
debugConsole.sourceForeground#fcfcfa
debugConsole.warningForeground#fc9867
debugConsoleInputIcon.foreground#ffd866
debugExceptionWidget.background#403e41
debugExceptionWidget.border#2d2a2e
debugIcon.breakpointCurrentStackframeForeground#ffd866
debugIcon.breakpointDisabledForeground#c1c0c0
debugIcon.breakpointForeground#ff6188
debugIcon.breakpointStackframeForeground#fcfcfa
debugIcon.breakpointUnverifiedForeground#fc9867
debugIcon.continueForeground#fcfcfa
debugIcon.disconnectForeground#fcfcfa
debugIcon.pauseForeground#fcfcfa
debugIcon.restartForeground#a9dc76
debugIcon.startForeground#a9dc76
debugIcon.stepBackForeground#fcfcfa
debugIcon.stepIntoForeground#fcfcfa
debugIcon.stepOutForeground#fcfcfa
debugIcon.stepOverForeground#fcfcfa
debugIcon.stopForeground#ff6188
debugTokenExpression.boolean#fc9867
debugTokenExpression.error#ff6188
debugTokenExpression.name#78dce8
debugTokenExpression.number#ab9df2
debugTokenExpression.string#ffd866
debugTokenExpression.value#fcfcfa
debugToolBar.background#403e41
debugView.exceptionLabelBackground#ff6188
debugView.exceptionLabelForeground#2d2a2e
debugView.stateLabelBackground#a9dc76
debugView.stateLabelForeground#2d2a2e
debugView.valueChangedHighlight#ffd866
descriptionForeground#939293
diffEditor.diagonalFill#403e41
diffEditor.insertedLineBackground#a9dc7619
diffEditor.insertedTextBackground#a9dc7619
diffEditor.removedLineBackground#ff618819
diffEditor.removedTextBackground#ff618819
diffEditorGutter.insertedLineBackground#a9dc7619
diffEditorGutter.removedLineBackground#ff618819
diffEditorOverview.insertedForeground#a9dc76a5
diffEditorOverview.removedForeground#ff6188a5
dropdown.background#2d2a2e
dropdown.border#2d2a2e
dropdown.foreground#939293
dropdown.listBackground#403e41
editor.background#2a2a2e
editor.findMatchBackground#fcfcfa26
editor.findMatchBorder#f4e2aa
editor.findMatchHighlightBackground#fcfcfa26
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#fcfcfa0c
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#c1c0c026
editor.foldBackground#fcfcfa0c
editor.foreground#ddddbd
editor.hoverHighlightBackground#fcfcfa0c
editor.inactiveSelectionBackground#fcfcfa0c
editor.inlineValuesBackground#5b595c
editor.inlineValuesForeground#c1c0c0
editor.lineHighlightBackground#fcfcfa0c
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#403e41
editor.rangeHighlightBackground#403e41
editor.rangeHighlightBorder#403e41
editor.selectionBackground#c1c0c026
editor.selectionHighlightBackground#fcfcfa26
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#c1c0c026
editor.wordHighlightBackground#fcfcfa26
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#fcfcfa26
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#ff6188
editorBracketHighlight.foreground2#fc9867
editorBracketHighlight.foreground3#ffd866
editorBracketHighlight.foreground4#a9dc76
editorBracketHighlight.foreground5#78dce8
editorBracketHighlight.foreground6#ab9df2
editorBracketMatch.background#2d2a2e
editorBracketMatch.border#727072
editorCodeLens.foreground#727072
editorCursor.background#2d2a2e
editorCursor.foreground#fcfcfa
editorError.background#00000000
editorError.border#00000000
editorError.foreground#00000000
editorGroup.border#221f22
editorGroup.dropBackground#221f22bf
editorGroup.emptyBackground#19181a
editorGroup.focusedEmptyBorder#221f22
editorGroupHeader.noTabsBackground#2d2a2e
editorGroupHeader.tabsBackground#2d2a2e
editorGroupHeader.tabsBorder#2d2a2e
editorGutter.addedBackground#82d589
editorGutter.background#2d2a2e
editorGutter.deletedBackground#eb7996
editorGutter.foldingControlForeground#c1c0c0
editorGutter.modifiedBackground#efa47f
editorHint.border#2d2a2e
editorHint.foreground#ab9df2
editorHoverWidget.background#403e41
editorHoverWidget.border#2d2a2e
editorIndentGuide.activeBackground#a89984
editorIndentGuide.background#403e41
editorInfo.background#00000000
editorInfo.border#2d2a2e
editorInfo.foreground#00000000
editorLightBulb.foreground#ffd866
editorLightBulbAutoFix.foreground#a9dc76
editorLineNumber.activeForeground#c1c0c0
editorLineNumber.foreground#5b595c
editorLink.activeForeground#78dce8
editorMarkerNavigation.background#403e41
editorMarkerNavigationError.background#ff6188
editorMarkerNavigationInfo.background#78dce8
editorMarkerNavigationWarning.background#fc9867
editorOverviewRuler.addedForeground#a9dc76
editorOverviewRuler.border#2d2a2e
editorOverviewRuler.currentContentForeground#403e41
editorOverviewRuler.deletedForeground#ff6188
editorOverviewRuler.errorForeground#ff6188
editorOverviewRuler.findMatchForeground#fcfcfa26
editorOverviewRuler.incomingContentForeground#403e41
editorOverviewRuler.infoForeground#78dce8
editorOverviewRuler.modifiedForeground#fc9867
editorOverviewRuler.rangeHighlightForeground#fcfcfa26
editorOverviewRuler.selectionHighlightForeground#fcfcfa26
editorOverviewRuler.warningForeground#fc9867
editorOverviewRuler.wordHighlightForeground#fcfcfa26
editorOverviewRuler.wordHighlightStrongForeground#fcfcfa26
editorPane.background#2d2a2e
editorRuler.foreground#5b595c
editorSuggestWidget.background#403e41
editorSuggestWidget.border#403e41
editorSuggestWidget.foreground#c1c0c0
editorSuggestWidget.highlightForeground#fcfcfa
editorSuggestWidget.selectedBackground#727072
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#00000000
editorWhitespace.foreground#5b595c
editorWidget.background#403e41
editorWidget.border#403e41
errorForeground#ff6188
errorLens.errorBackground#f9bb8b13
errorLens.errorForeground#f9bb8bde
errorLens.infoBackground#8bf9cd13
errorLens.infoForeground#8bf9cdde
errorLens.warningBackground#eb99e00c
errorLens.warningForeground#eb99e0de
extensionBadge.remoteForeground#a9dc76
extensionButton.prominentBackground#403e41
extensionButton.prominentForeground#fcfcfa
extensionButton.prominentHoverBackground#5b595c
extensionIcon.preReleaseForeground#ab9df2
extensionIcon.sponsorForeground#78dce8
extensionIcon.starForeground#ffd866
extensionIcon.verifiedForeground#a9dc76
focusBorder#727072
foreground#fcfcfa
gitDecoration.addedResourceForeground#82d589
gitDecoration.conflictingResourceForeground#fc9867
gitDecoration.deletedResourceForeground#ff6188
gitDecoration.ignoredResourceForeground#5b595c
gitDecoration.modifiedResourceForeground#f4e2aa
gitDecoration.stageDeletedResourceForeground#ff6188
gitDecoration.stageModifiedResourceForeground#ffd866
gitDecoration.untrackedResourceForeground#c1c0c0
icon.foreground#939293
input.background#403e41
input.border#403e41
input.foreground#fcfcfa
input.placeholderForeground#727072
inputOption.activeBackground#5b595c
inputOption.activeBorder#5b595c
inputOption.activeForeground#fcfcfa
inputOption.hoverBackground#5b595c
inputValidation.errorBackground#403e41
inputValidation.errorBorder#ff6188
inputValidation.errorForeground#ff6188
inputValidation.infoBackground#403e41
inputValidation.infoBorder#78dce8
inputValidation.infoForeground#78dce8
inputValidation.warningBackground#403e41
inputValidation.warningBorder#fc9867
inputValidation.warningForeground#fc9867
keybindingLabel.background#5b595c
keybindingLabel.border#5b595c
keybindingLabel.bottomBorder#403e41
keybindingLabel.foreground#c1c0c0
list.activeSelectionBackground#fcfcfa0c
list.activeSelectionForeground#81cada
list.dropBackground#221f22bf
list.errorForeground#ff6188
list.focusBackground#2d2a2e
list.focusForeground#fcfcfa
list.highlightForeground#fcfcfa
list.hoverBackground#fcfcfa0c
list.hoverForeground#fcfcfa
list.inactiveFocusBackground#2d2a2e
list.inactiveSelectionBackground#c1c0c00c
list.inactiveSelectionForeground#81cada
list.invalidItemForeground#ff6188
list.warningForeground#fc9867
listFilterWidget.background#2d2a2e
listFilterWidget.noMatchesOutline#ff6188
listFilterWidget.outline#2d2a2e
menu.background#2d2a2e
menu.border#221f22
menu.foreground#fcfcfa
menu.selectionForeground#ffd866
menu.separatorBackground#403e41
menubar.selectionForeground#fcfcfa
merge.border#2d2a2e
merge.commonContentBackground#fcfcfa19
merge.commonHeaderBackground#fcfcfa26
merge.currentContentBackground#ff618819
merge.currentHeaderBackground#ff618826
merge.incomingContentBackground#a9dc7619
merge.incomingHeaderBackground#a9dc7626
mergeEditor.change.background#fcfcfa19
mergeEditor.change.word.background#fcfcfa19
mergeEditor.conflict.handled.minimapOverViewRuler#a9dc76
mergeEditor.conflict.handledFocused.border#a9dc76
mergeEditor.conflict.handledUnfocused.border#a9dc76
mergeEditor.conflict.unhandled.minimapOverViewRuler#ff6188
mergeEditor.conflict.unhandledFocused.border#ff6188
mergeEditor.conflict.unhandledUnfocused.border#ff6188
minimap.errorHighlight#ff6188a5
minimap.findMatchHighlight#939293a5
minimap.selectionHighlight#c1c0c026
minimap.selectionOccurrenceHighlight#727072a5
minimap.warningHighlight#fc9867a5
minimapGutter.addedBackground#a9dc76
minimapGutter.deletedBackground#ff6188
minimapGutter.modifiedBackground#ffd866
notebook.cellBorderColor#403e41
notebook.cellEditorBackground#221f227f
notebook.cellInsertionIndicator#fcfcfa
notebook.cellStatusBarItemHoverBackground#727072
notebook.cellToolbarSeparator#403e41
notebook.editorBackground#2d2a2e
notebook.focusedEditorBorder#727072
notebookStatusErrorIcon.foreground#ff6188
notebookStatusRunningIcon.foreground#fcfcfa
notebookStatusSuccessIcon.foreground#a9dc76
notificationCenter.border#403e41
notificationCenterHeader.background#403e41
notificationCenterHeader.foreground#939293
notificationLink.foreground#ffd866
notifications.background#403e41
notifications.border#403e41
notifications.foreground#c1c0c0
notificationsErrorIcon.foreground#ff6188
notificationsInfoIcon.foreground#78dce8
notificationsWarningIcon.foreground#fc9867
notificationToast.border#403e41
panel.background#252527
panel.border#2d2a2e
panelTitle.activeBorder#9dc7c0
panelTitle.activeForeground#9dc7c0
panelTitle.inactiveForeground#939293
peekView.border#2d2a2e
peekViewEditor.background#403e41
peekViewEditor.matchHighlightBackground#5b595c
peekViewEditorGutter.background#403e41
peekViewResult.background#403e41
peekViewResult.fileForeground#939293
peekViewResult.lineForeground#939293
peekViewResult.matchHighlightBackground#5b595c
peekViewResult.selectionBackground#403e41
peekViewResult.selectionForeground#fcfcfa
peekViewTitle.background#403e41
peekViewTitleDescription.foreground#939293
peekViewTitleLabel.foreground#fcfcfa
pickerGroup.border#2d2a2e
pickerGroup.foreground#5b595c
ports.iconRunningProcessForeground#a9dc76
problemsErrorIcon.foreground#ff6188
problemsInfoIcon.foreground#78dce8
problemsWarningIcon.foreground#fc9867
progressBar.background#403e41
sash.hoverBorder#727072
scrollbar.shadow#2d2a2e
scrollbarSlider.activeBackground#727072
scrollbarSlider.background#c1c0c026
scrollbarSlider.hoverBackground#fcfcfa26
selection.background#c1c0c026
settings.checkboxBackground#403e41
settings.checkboxBorder#403e41
settings.checkboxForeground#fcfcfa
settings.dropdownBackground#403e41
settings.dropdownBorder#403e41
settings.dropdownForeground#fcfcfa
settings.dropdownListBorder#939293
settings.headerForeground#f4e2aa
settings.modifiedItemIndicator#f4e2aa
settings.numberInputBackground#403e41
settings.numberInputBorder#403e41
settings.numberInputForeground#fcfcfa
settings.rowHoverBackground#7270720c
settings.textInputBackground#403e41
settings.textInputBorder#403e41
settings.textInputForeground#fcfcfa
sideBar.background#252527
sideBar.border#181a1c
sideBar.dropBackground#221f22bf
sideBar.foreground#939293
sideBarSectionHeader.background#252527
sideBarSectionHeader.border#1d1d1d
sideBarSectionHeader.foreground#7f7f7f
sideBarTitle.foreground#5b595c
statusBar.background#26262b
statusBar.border#19181a
statusBar.debuggingBackground#727072
statusBar.debuggingBorder#221f22
statusBar.debuggingForeground#fcfcfa
statusBar.focusBorder#403e41
statusBar.foreground#727072
statusBar.noFolderBackground#221f22
statusBar.noFolderBorder#19181a
statusBar.noFolderForeground#727072
statusBarItem.activeBackground#2d2a2e
statusBarItem.errorBackground#2d2a2e
statusBarItem.errorForeground#ff6188
statusBarItem.focusBorder#727072
statusBarItem.hoverBackground#fcfcfa0c
statusBarItem.prominentBackground#403e41
statusBarItem.prominentHoverBackground#403e41
statusBarItem.remoteBackground#221f22
statusBarItem.remoteForeground#a9dc76
statusBarItem.warningBackground#2d2a2e
statusBarItem.warningForeground#fc9867
symbolIcon.arrayForeground#ff6188
symbolIcon.booleanForeground#ff6188
symbolIcon.classForeground#78dce8
symbolIcon.colorForeground#ab9df2
symbolIcon.constantForeground#ab9df2
symbolIcon.constructorForeground#a9dc76
symbolIcon.enumeratorForeground#fc9867
symbolIcon.enumeratorMemberForeground#fc9867
symbolIcon.eventForeground#fc9867
symbolIcon.fieldForeground#fc9867
symbolIcon.fileForeground#c1c0c0
symbolIcon.folderForeground#c1c0c0
symbolIcon.functionForeground#a9dc76
symbolIcon.interfaceForeground#78dce8
symbolIcon.keyForeground#fc9867
symbolIcon.keywordForeground#ff6188
symbolIcon.methodForeground#a9dc76
symbolIcon.moduleForeground#78dce8
symbolIcon.namespaceForeground#78dce8
symbolIcon.nullForeground#ab9df2
symbolIcon.numberForeground#ab9df2
symbolIcon.objectForeground#78dce8
symbolIcon.operatorForeground#ff6188
symbolIcon.packageForeground#ab9df2
symbolIcon.propertyForeground#fc9867
symbolIcon.referenceForeground#ab9df2
symbolIcon.snippetForeground#a9dc76
symbolIcon.stringForeground#ffd866
symbolIcon.structForeground#ff6188
symbolIcon.textForeground#ffd866
symbolIcon.typeParameterForeground#fc9867
symbolIcon.unitForeground#ab9df2
symbolIcon.variableForeground#78dce8
tab.activeBackground#2d2a2e
tab.activeBorder#f4e2aa
tab.activeForeground#f4e2aa
tab.activeModifiedBorder#5b595c
tab.border#2e2b2f
tab.hoverBackground#2d2a2e
tab.hoverBorder#5b595c
tab.hoverForeground#fcfcfa
tab.inactiveBackground#343134
tab.inactiveForeground#939293
tab.inactiveModifiedBorder#5b595c
tab.lastPinnedBorder#5b595c
tab.unfocusedActiveBorder#939293
tab.unfocusedActiveForeground#c1c0c0
tab.unfocusedActiveModifiedBorder#403e41
tab.unfocusedHoverBackground#2d2a2e
tab.unfocusedHoverBorder#2d2a2e
tab.unfocusedHoverForeground#c1c0c0
tab.unfocusedInactiveForeground#939293
tab.unfocusedInactiveModifiedBorder#403e41
terminal.ansiBlack#403e41
terminal.ansiBlue#fc9867
terminal.ansiBrightBlack#727072
terminal.ansiBrightBlue#fc9867
terminal.ansiBrightCyan#78dce8
terminal.ansiBrightGreen#a9dc76
terminal.ansiBrightMagenta#ab9df2
terminal.ansiBrightRed#ff6188
terminal.ansiBrightWhite#fcfcfa
terminal.ansiBrightYellow#f4e2aa
terminal.ansiCyan#78dce8
terminal.ansiGreen#a9dc76
terminal.ansiMagenta#ab9df2
terminal.ansiRed#ff6188
terminal.ansiWhite#fcfcfa
terminal.ansiYellow#f4e2aa
terminal.background#252527
terminal.foreground#fcfcfa
terminal.selectionBackground#fcfcfa26
terminalCommandDecoration.defaultBackground#fcfcfa
terminalCommandDecoration.errorBackground#ff6188
terminalCommandDecoration.successBackground#a9dc76
terminalCursor.background#00000000
terminalCursor.foreground#fcfcfa
testing.iconErrored#ff6188
testing.iconFailed#ff6188
testing.iconPassed#a9dc76
testing.iconQueued#fcfcfa
testing.iconSkipped#fc9867
testing.iconUnset#939293
testing.message.error.decorationForeground#ff6188
testing.message.error.lineBackground#ff618819
testing.message.info.decorationForeground#fcfcfa
testing.message.info.lineBackground#fcfcfa19
testing.runAction#ffd866
textBlockQuote.background#403e41
textBlockQuote.border#403e41
textCodeBlock.background#403e41
textLink.activeForeground#fcfcfa
textLink.foreground#ffd866
textPreformat.foreground#fcfcfa
textSeparator.foreground#727072
titleBar.activeBackground#26262b
titleBar.activeForeground#9fa2a3
titleBar.border#19181a
titleBar.inactiveBackground#1f1f22
titleBar.inactiveForeground#5b595c
walkThrough.embeddedEditorBackground#221f22
welcomePage.progress.background#727072
welcomePage.progress.foreground#939293
welcomePage.tileBackground#403e41
welcomePage.tileHoverBackground#5b595c
widget.shadow#19181a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.tag	#83A598
punctuation.definition.entity	#D3869B
constant	#D4B483
constant.character.escape	#B8BB26
constant.other	#FAF5DAD6
entity	#F0E4AD	—
keyword.operator.comparison, keyword.operator, keyword.operator.symbolic, keyword.operator.string, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.class, keyword.operator.key, keyword.operator.logical	#CCA585
keyword, keyword.operator.new, keyword.other, keyword.control	#F59489
storage	#86D4CF	italic
string -string.unquoted.old-plist -string.unquoted.heredoc, string.unquoted.heredoc string	#B8BB26
comment	#928374	italic
string.regexp constant.character.escape	#B8BB26	—
support	#C8999C
variable	#FAF5DAD6
variable.language	#FAF5DAD6
meta.function-call	#FAF5DAD6	—
invalid	#F0F0F0	—
text source, string.unquoted.heredoc, source source	#FAF5DAD6
string.quoted source	#B8BB26
string	#85BF9C	—
support.constant	#FABD2F
support.class	#8EC07C
entity.name.tag	#D3869B	—
meta.tag, meta.tag entity	#8EC07C	—
constant.other.color.rgb-value	#83A598	—
meta.selector.css entity.name.tag	#FA5C4B	—
meta.selector.css, entity.other.attribute-name.id	#B8BB26	—
meta.selector.css entity.other.attribute-name.class	#B8BB26	—
support.type.property-name.css	#8EC07C	—
meta.preprocessor.at-rule keyword.control.at-rule	#FABD2F	—
meta.property-value constant	#FABD2F	—
meta.property-value support.constant.named-color.css	#FE8019	—
meta.constructor.argument.css	#FABD2F	—
meta.diff, meta.diff.header	#83A598	—
markup.deleted	#FA5C4B	—
markup.changed	#FABD2F	—
markup.inserted	#8EC07C	—
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#8EC07C	—
entity.name.type.class.php	#8EC07C	—
keyword.other.phpdoc	#928374
constant.numeric.css, keyword.other.unit.css	#D3869B	—
punctuation.definition.entity.css	#B8BB26	—
variable.language.js	#FABD2F	—
string.unquoted.label.js	#FDF4C1	—
constant.other.table-name.sql	#B8BB26
constant.other.database-name.sql	#B8BB26
storage.type.dired.item.directory, dired.item.directory	#8EC07C	—
orgmode.link	#FABD2F	underline
orgmode.page	#B8BB26	—
orgmode.break	#D3869B	—
orgmode.headline	#8EC07C	—
orgmode.tack	#FABD2F	—
orgmode.follow_up	#FABD2F	—
orgmode.checkbox	#FABD2F	—
orgmode.checkbox.summary	#FABD2F	—
orgmode.tags	#FA5C4B	—
punctuation.definition.list	#86D4CF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
entity.name.type	#C9EEAD	—
storage.type	—	bold
storage.type	—
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#E0B4B4	—
entity.name.type	#9DC7C0	—
meta.selector.css, entity.other.attribute-name.id	#FAF5DAD6	—
meta.selector.css entity.other.attribute-name.class	#FAF5DAD6	—
entity.other.attribute-name	#FAF5DAD6	—

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