Skip to main content
Home Theme VS Code Mountain Sunset A beautiful dark theme for VS Code created by Jon Jampen
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #303030ff activityBar.foreground #fb8500ff activityBar.inactiveForeground #7a7a7aff activityBarBadge.background #fb8500ff activityBarBadge.foreground #202020ff badge.background #fb8500ff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #ffb159 — variable.other.generic-type.haskell #b478db — storage.type.haskell #f7716f — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Mountain Sunset — Mountain Sunset
badge.foreground #202020ff
breadcrumb.activeSelectionForeground #ccccccff
breadcrumb.focusForeground #ccccccff
breadcrumb.foreground #fb8500ff
breadcrumbPicker.background #252526ff
button.background #07405dff
button.foreground #ccccccff
button.hoverBackground #0c5d86ff
debugExceptionWidget.background #252526ff
debugExceptionWidget.border #fb850039
debugToolBar.background #07405dff
diffEditor.insertedTextBackground #99b76d23
diffEditor.insertedTextBorder #8ccf40ff
diffEditor.removedTextBackground #ef535033
diffEditor.removedTextBorder #e55b59ff
disabledForeground #7a7a7aff
dropdown.background #303030ff
dropdown.foreground #ccccccff
editor.background #202020ff
editor.findMatchBackground #fb850039
editor.findMatchHighlightBackground #fb850039
editor.foreground #d6deeb
editor.hoverHighlightBackground #252526ff
editor.inactiveSelectionBackground #07405dff
editor.rangeHighlightBackground #07405d39
editor.selectionBackground #07405dff
editor.selectionHighlightBackground #303030ff
editor.wordHighlightBackground #fb850039
editor.wordHighlightStrongBackground #fb850039
editorBracketMatch.background #fb850039
editorBracketMatch.border #fb850039
editorCodeLens.foreground #7a7a7aff
editorCursor.background #ccccccff
editorCursor.foreground #fb8500ff
editorError.foreground #e55b59
editorGroup.dropBackground #fb850039
editorGroup.emptyBackground #202020ff
editorGroupHeader.noTabsBackground #252526ff
editorGroupHeader.tabsBackground #252526ff
editorGutter.addedBackground #8ccf40ff
editorGutter.background #202020ff
editorGutter.deletedBackground #e55b59ff
editorGutter.modifiedBackground #fb8500ff
editorHoverWidget.background #252526ff
editorHoverWidget.border #fb850039
editorIndentGuide.activeBackground #0c5d86ff
editorIndentGuide.background #07405d39
editorLineNumber.activeForeground #fb8500ff
editorLineNumber.foreground #0c5d86ff
editorMarkerNavigation.background #252526ff
editorMarkerNavigationError.background #e55b59
editorMarkerNavigationWarning.background #fb8500ff
editorOverviewRuler.commonContentForeground #0c5d86ff
editorOverviewRuler.currentContentForeground #0c5d86ff
editorOverviewRuler.incomingContentForeground #0c5d86ff
editorRuler.foreground #0c5d86ff
editorSuggestWidget.background #252526ff
editorSuggestWidget.border #252526ff
editorSuggestWidget.foreground #ccccccff
editorSuggestWidget.highlightForeground #0c5d86ff
editorSuggestWidget.selectedBackground #07405d39
editorWarning.foreground #fb8500ff
editorWidget.background #252526ff
editorWidget.border #0c5d86ff
errorForeground #e55b59
extensionButton.prominentBackground #fb8500ff
extensionButton.prominentForeground #ccccccff
extensionButton.prominentHoverBackground #fb850039
focusBorder #fb8500ff
foreground #ccccccff
gitDecoration.conflictingResourceForeground #dde478
gitDecoration.deletedResourceForeground #e55b59
gitDecoration.ignoredResourceForeground #666666ff
gitDecoration.modifiedResourceForeground #fb8500ff
gitDecoration.untrackedResourceForeground #8ccf40ff
icon.foreground #fb8500ff
input.background #303030ff
input.border #303030ff
input.foreground #ccccccff
input.placeholderForeground #7a7a7aff
inputOption.activeBackground #fb850039
inputOption.activeBorder #fb850039
inputValidation.errorBackground #d00502f2
inputValidation.errorBorder #e55b59
inputValidation.infoBackground #07405dff
inputValidation.infoBorder #0c5d86ff
inputValidation.warningBackground #fb850039
inputValidation.warningBorder #fb8500ff
list.activeSelectionBackground #fb850039
list.activeSelectionForeground #ccccccff
list.dropBackground #202020ff
list.focusBackground #202020ff
list.focusForeground #ccccccff
list.highlightForeground #ccccccff
list.hoverBackground #252526ff
list.hoverForeground #ccccccff
list.inactiveSelectionBackground #fb850039
list.inactiveSelectionForeground #ccccccff
list.invalidItemForeground #e55b59
merge.currentHeaderBackground #fb850039
merge.incomingHeaderBackground #07405d39
notificationCenter.border #fb8500ff
notificationLink.foreground #0c5d86ff
notifications.background #303030ff
notifications.border #fb8500ff
notifications.foreground #ccccccff
notificationToast.border #fb8500ff
panel.background #252526ff
panel.border #fb850039
panelTitle.activeBorder #fb8500ff
panelTitle.activeForeground #ccccccff
panelTitle.inactiveForeground #7a7a7aff
peekView.border #fb850039
peekViewEditor.background #252526ff
peekViewEditor.matchHighlightBackground #07405d39
peekViewResult.background #252526ff
peekViewResult.fileForeground #ccccccff
peekViewResult.lineForeground #ccccccff
peekViewResult.matchHighlightBackground #ccccccff
peekViewResult.selectionBackground #252526ff
peekViewResult.selectionForeground #ccccccff
peekViewTitle.background #252526ff
peekViewTitleDescription.foreground #ccccccff
peekViewTitleLabel.foreground #ccccccff
pickerGroup.border #07405dff
pickerGroup.foreground #f9b474
progressBar.background #fb8500ff
scrollbar.shadow #fb850039
scrollbarSlider.activeBackground #07405dff
scrollbarSlider.background #07405d39
scrollbarSlider.hoverBackground #07405dff
selection.background #fb850039
sideBar.background #252526ff
sideBar.foreground #ccccccff
sideBarSectionHeader.background #252526ff
sideBarSectionHeader.foreground #0c5d86ff
sideBarTitle.foreground #fb8500ff
statusBar.background #fb850039
statusBar.debuggingBackground #fb850039
statusBar.foreground #ccccccff
statusBar.noFolderBackground #07405d39
statusBarItem.activeBackground #07405d39
statusBarItem.hoverBackground #07405d39
statusBarItem.prominentBackground #07405dff
statusBarItem.prominentHoverBackground #07405dff
statusBarItem.remoteBackground #07405dff
statusBarItem.remoteForeground #ccccccff
tab.activeBackground #202020ff
tab.activeBorder #fb8500ff
tab.activeForeground #ccccccff
tab.unfocusedActiveBorder #fb850039
terminal.ansiBlack #202020ff
terminal.ansiBlue #0c5d86ff
terminal.ansiBrightBlack #303030ff
terminal.ansiBrightBlue #3fa1d3
terminal.ansiBrightCyan #82f2e8
terminal.ansiBrightGreen #1ede6e
terminal.ansiBrightMagenta #ce9dee
terminal.ansiBrightRed #ea5c59
terminal.ansiBrightWhite #ccccccff
terminal.ansiBrightYellow #efe09c
terminal.ansiCyan #21c1c7
terminal.ansiGreen #8ccf40ff
terminal.ansiMagenta #b478db
terminal.ansiRed #e55b59
terminal.ansiWhite #ccccccff
terminal.ansiYellow #dde478
terminal.selectionBackground #07405dff
terminalCursor.background #fb8500ff
textCodeBlock.background #7a7a7aff
titleBar.activeBackground #07405d39
titleBar.activeForeground #ccccccff
titleBar.inactiveBackground #252526ff
titleBar.inactiveForeground #ccccccff
toolbar.activeBackground #252526ff
toolbar.hoverBackground #252526ff
walkThrough.embeddedEditorBackground #252526ff
widget.shadow #fb850039 #ffb159
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ccccccff —
variable.parameter.function.language.special.self.python #ffd659 —
storage.modifier.lifetime.rust #ccccccff —
support.function.std.rust #59a2ff —
entity.name.lifetime.rust #ffd659 —
variable.language.rust #ffb159 —
support.constant.edge #b478db —
constant.other.character-class.regexp #ffb159 —
keyword.operator.quantifier.regexp #f7716f —
punctuation.definition.string.begin,punctuation.definition.string.end #81c251 —
variable.parameter.function #ccccccff —
comment markup.link #666666 —
markup.changed.diff #ffd659 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #59a2ff —
markup.inserted.diff #81c251 —
markup.deleted.diff #ffb159 —
meta.function.c,meta.function.cpp #ffb159 —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #ccccccff —
punctuation.separator.key-value #ccccccff —
keyword.operator.expression.import #59a2ff —
support.constant.math #ffd659 —
support.constant.property.math #f7716f —
variable.other.constant #ffd659 —
storage.type.annotation.java, storage.type.object.array.java #ffd659 —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #ccccccff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ffd659 —
keyword.operator.instanceof.java #b478db —
meta.definition.variable.name.java #ffb159 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #f7716f —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #f7716f —
punctuation.separator.list.comma.css #ccccccff —
support.constant.color.w3c-standard-color-name.css #f7716f —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #ffd659 —
entity.name.type.module #ffd659 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ffb159 —
support.constant.json #f7716f —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #b478db —
support.type.object.console #ffb159 —
support.variable.property.process #f7716f —
entity.name.function,support.function.console #59a2ff —
keyword.operator.misc.rust #ccccccff —
keyword.operator.sigil.rust #b478db —
keyword.operator.delete #b478db —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #ffb159 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #b478db —
punctuation.separator.delimiter #ccccccff —
punctuation.separator.c,punctuation.separator.cpp #b478db —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #b478db —
variable.parameter.function.language.python #f7716f —
support.type.python #56b6c2 —
keyword.operator.logical.python #b478db —
variable.parameter.function.python #f7716f —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ccccccff —
meta.function-call.generic.python #59a2ff —
constant.character.format.placeholder.other.python #f7716f —
keyword.operator #ccccccff —
keyword.operator.assignment.compound #b478db —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #ffd659 —
variable.language #ffd659 —
token.variable.parameter.java #ccccccff —
import.storage.java #ffd659 —
token.package.keyword #b478db —
entity.name.function, meta.require, support.function.any-method, variable.function #59a2ff —
entity.name.type.namespace #ffd659 —
support.class, entity.name.type.class #ffd659 —
entity.name.class.identifier.namespace.type #ffd659 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ffd659 —
variable.other.class.php #ffb159 —
control.elements, keyword.operator.less #f7716f —
keyword.other.special-method #59a2ff —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #b478db —
token.storage.type.java #ffd659 —
support.type.property-name #ccccccff —
support.constant.property-value #ccccccff —
support.constant.font-name #f7716f —
entity.other.inherited-class #ffd659 —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #f7716f —
entity.other.attribute-name #f7716f —
entity.other.attribute-name.id #59a2ff normal
entity.other.attribute-name.class.css #f7716f normal
markup.heading punctuation.definition.heading, entity.name.section #59a2ff —
keyword.other.unit #ffb159 —
markup.bold,todo.bold #f7716f —
punctuation.definition.bold #ffd659 —
markup.italic, punctuation.definition.italic,todo.emphasis #b478db —
entity.name.section.markdown #ffb159 —
punctuation.definition.heading.markdown #ffb159 —
punctuation.definition.list.begin.markdown #ffb159 —
markup.heading.setext #ccccccff —
punctuation.definition.bold.markdown #f7716f —
markup.inline.raw.markdown #81c251 —
markup.inline.raw.string.markdown #81c251 —
punctuation.definition.list.markdown #ffb159 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ffb159 —
beginning.punctuation.definition.list.markdown #ffb159 —
punctuation.definition.metadata.markdown #ffb159 —
markup.underline.link.markdown,markup.underline.link.image.markdown #b478db —
string.other.link.title.markdown,string.other.link.description.markdown #59a2ff —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #ffb159 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #b478db —
invalid.illegal.bad-ampersand.html #ccccccff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ffb159 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ffb159 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #81c251 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #ffb159 —
support.type.property-name.json punctuation #ffb159 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #b478db —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #b478db —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ffd659 —
keyword.operator.error-control.php #b478db —
keyword.operator.type.php #b478db —
punctuation.section.array.begin.php #ccccccff —
punctuation.section.array.end.php #ccccccff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ffd659 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #59a2ff —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #ccccccff —
support.constant.core.rust #f7716f —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #f7716f —
entity.name.goto-label.php,support.other.php #59a2ff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #b478db —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #b478db —
meta.function.decorator.python #59a2ff —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #ccccccff —
function.parameter.ruby, function.parameter.cs #ccccccff —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #f7716f —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ffd659 —
block.scope.end,block.scope.begin #ccccccff —
entity.name.variable.local.cs #ffb159 —
token.error-token #f44747 —
token.debug-token #b478db —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #b478db —
meta.template.expression #ccccccff —
keyword.operator.module #b478db —
support.type.type.flowtype #59a2ff —
support.type.primitive #ffd659 —
meta.property.object #ffb159 —
variable.parameter.function.js #ffb159 —
keyword.other.template.begin #81c251 —
keyword.other.template.end #81c251 —
keyword.other.substitution.begin #81c251 —
keyword.other.substitution.end #81c251 —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #ffd659 —
keyword.operator.arithmetic.go, keyword.operator.address.go #b478db —
entity.name.package.go #ffd659 —
support.type.prelude.elm #56b6c2 —
support.constant.elm #f7716f —
punctuation.quasi.element #b478db —
constant.character.entity #ffb159 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #ffd659 —
meta.symbol.clojure #ffb159 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #ffb159 —
meta.scope.prerequisites.makefile #ffb159 —
storage.modifier.import.groovy #ffd659 —
meta.method.groovy #59a2ff —
meta.definition.variable.name.groovy #ffb159 —
meta.definition.class.inherited.classes.groovy #81c251 —
support.variable.semantic.hlsl #ffd659 —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #b478db —
text.variable, text.bracketed #ffb159 —
support.type.swift, support.type.vb.asp #ffd659 —
entity.name.function.xi #ffd659 —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #ffb159 —
constant.regexp.xi #b478db —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #81c251 —
beginning.punctuation.definition.list.markdown.xi #666666 —
constant.character.xi #59a2ff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #666666 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ffd659 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ffb159 —
meta.brace.square #ccccccff —
comment, punctuation.definition.comment #666666 italic
markup.quote.markdown #666666 —
punctuation.definition.block.sequence.item.yaml #ccccccff —
constant.language.symbol.elixir #56b6c2 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 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
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*
Button.tsx
31
~/my-project
$
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 } !` ;
}
Mountain Sunset | Coding Theme