Skip to main content
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 #161613 activityBar.border #161613 activityBar.dropBackground #1d1e19bf activityBar.foreground #c0c1b5 activityBar.inactiveForeground #57584f activityBarBadge.background #f4ea91 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text #6e7066 italic comment storage.type #6e7066 — comment entity.name.type #c0c1b5 — comment variable, comment variable.other #c0c1b5 — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Medusa Theme — Medusa Theme
activityBarBadge.foreground
#21221e
badge.background #f4ea91
badge.foreground #21221e
breadcrumb.activeSelectionForeground #fdfff1
breadcrumb.focusForeground #c0c1b5
breadcrumb.foreground #919288
button.background #3b3c35
button.foreground #919288
button.hoverBackground #21221e
button.secondaryBackground #3b3c35
button.secondaryForeground #919288
button.secondaryHoverBackground #21221e
charts.blue #9be5f7
charts.foreground #fdfff1
charts.green #aefaa8
charts.lines #6e7066
charts.orange #fdbc7f
charts.purple #c87cd8
charts.red #a496ec
charts.yellow #f4ea91
debugExceptionWidget.background #3b3c35
debugExceptionWidget.border #21221e
debugIcon.breakpointCurrentStackframeForeground #f4ea91
debugIcon.breakpointDisabledForeground #c0c1b5
debugIcon.breakpointForeground #a496ec
debugIcon.breakpointStackframeForeground #fdfff1
debugIcon.breakpointUnverifiedForeground #fdbc7f
debugIcon.continueForeground #fdfff1
debugIcon.disconnectForeground #fdfff1
debugIcon.pauseForeground #fdfff1
debugIcon.restartForeground #aefaa8
debugIcon.startForeground #aefaa8
debugIcon.stepBackForeground #fdfff1
debugIcon.stepIntoForeground #fdfff1
debugIcon.stepOutForeground #fdfff1
debugIcon.stepOverForeground #fdfff1
debugIcon.stopForeground #a496ec
debugToolBar.background #3b3c35
descriptionForeground #919288
diffEditor.insertedTextBackground #aefaa819
diffEditor.removedTextBackground #a496ec19
dropdown.background #21221e
dropdown.border #21221e
dropdown.foreground #919288
dropdown.listBackground #3b3c35
editor.background #21221e
editor.findMatchBackground #fdfff126
editor.findMatchBorder #f4ea91
editor.findMatchHighlightBackground #fdfff126
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #fdfff10c
editor.findRangeHighlightBorder #00000000
editor.foreground #fdfff1
editor.hoverHighlightBackground #fdfff10c
editor.inactiveSelectionBackground #fdfff10c
editor.lineHighlightBackground #fdfff10c
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #3b3c35
editor.rangeHighlightBorder #3b3c35
editor.selectionBackground #c0c1b526
editor.selectionHighlightBackground #fdfff126
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #fdfff126
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #fdfff126
editor.wordHighlightStrongBorder #00000000
editorBracketHighlight.foreground1 #a496ec
editorBracketHighlight.foreground2 #fdbc7f
editorBracketHighlight.foreground3 #f4ea91
editorBracketHighlight.foreground4 #aefaa8
editorBracketHighlight.foreground5 #9be5f7
editorBracketHighlight.foreground6 #c87cd8
editorBracketMatch.background #21221e
editorBracketMatch.border #6e7066
editorCodeLens.foreground #6e7066
editorCursor.background #21221e
editorCursor.foreground #fdfff1
editorError.background #00000000
editorError.border #00000000
editorError.foreground #f97583
editorGroup.border #1d1e19
editorGroup.dropBackground #1d1e19bf
editorGroup.emptyBackground #161613
editorGroup.focusedEmptyBorder #1d1e19
editorGroupHeader.noTabsBackground #21221e
editorGroupHeader.tabsBackground #21221e
editorGroupHeader.tabsBorder #21221e
editorGutter.addedBackground #aefaa8
editorGutter.background #21221e
editorGutter.deletedBackground #a496ec
editorGutter.modifiedBackground #fdbc7f
editorHint.border #21221e
editorHint.foreground #c87cd8
editorHoverWidget.background #3b3c35
editorHoverWidget.border #21221e
editorIndentGuide.background #3b3c35
editorInfo.background #00000000
editorInfo.border #21221e
editorInfo.foreground #9be5f7
editorLightBulb.foreground #f4ea91
editorLightBulbAutoFix.foreground #aefaa8
editorLineNumber.activeForeground #c0c1b5
editorLineNumber.foreground #57584f
editorLink.activeForeground #9be5f7
editorMarkerNavigation.background #3b3c35
editorMarkerNavigationError.background #f97583
editorMarkerNavigationInfo.background #9be5f7
editorMarkerNavigationWarning.background #fdbc7f
editorOverviewRuler.addedForeground #aefaa8
editorOverviewRuler.border #21221e
editorOverviewRuler.currentContentForeground #3b3c35
editorOverviewRuler.deletedForeground #f97583
editorOverviewRuler.errorForeground #f97583
editorOverviewRuler.findMatchForeground #fdfff126
editorOverviewRuler.incomingContentForeground #3b3c35
editorOverviewRuler.infoForeground #9be5f7
editorOverviewRuler.modifiedForeground #fdbc7f
editorOverviewRuler.rangeHighlightForeground #fdfff126
editorOverviewRuler.selectionHighlightForeground #fdfff126
editorOverviewRuler.warningForeground #fdbc7f
editorOverviewRuler.wordHighlightForeground #fdfff126
editorOverviewRuler.wordHighlightStrongForeground #fdfff126
editorPane.background #1e1f1b
editorRuler.foreground #57584f
editorSuggestWidget.background #3b3c35
editorSuggestWidget.border #3b3c35
editorSuggestWidget.foreground #c0c1b5
editorSuggestWidget.highlightForeground #fdfff1
editorSuggestWidget.selectedBackground #6e7066
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #fdbc7f
editorWhitespace.foreground #57584f
editorWidget.background #3b3c35
editorWidget.border #3b3c35
errorForeground #f97583
extensionButton.prominentBackground #3b3c35
extensionButton.prominentForeground #fdfff1
extensionButton.prominentHoverBackground #57584f
focusBorder #6e7066
foreground #fdfff1
gitDecoration.addedResourceForeground #aefaa8
gitDecoration.conflictingResourceForeground #fdbc7f
gitDecoration.deletedResourceForeground #a496ec
gitDecoration.ignoredResourceForeground #57584f
gitDecoration.modifiedResourceForeground #f4ea91
gitDecoration.stageDeletedResourceForeground #a496ec
gitDecoration.stageModifiedResourceForeground #f4ea91
gitDecoration.untrackedResourceForeground #fdbc7f
input.background #3b3c35
input.border #3b3c35
input.foreground #fdfff1
input.placeholderForeground #6e7066
inputOption.activeBackground #57584f
inputOption.activeBorder #57584f
inputValidation.errorBackground #3b3c35
inputValidation.errorBorder #f97583
inputValidation.errorForeground #f97583
inputValidation.infoBackground #3b3c35
inputValidation.infoBorder #9be5f7
inputValidation.infoForeground #9be5f7
inputValidation.warningBackground #3b3c35
inputValidation.warningBorder #fdbc7f
inputValidation.warningForeground #fdbc7f
list.activeSelectionBackground #fdfff10c
list.activeSelectionForeground #f4ea91
list.dropBackground #1d1e19bf
list.errorForeground #f97583
list.focusBackground #21221e
list.focusForeground #fdfff1
list.highlightForeground #fdfff1
list.hoverBackground #fdfff10c
list.hoverForeground #fdfff1
list.inactiveFocusBackground #21221e
list.inactiveSelectionBackground #c0c1b50c
list.inactiveSelectionForeground #f4ea91
list.invalidItemForeground #f97583
list.warningForeground #fdbc7f
listFilterWidget.background #21221e
listFilterWidget.noMatchesOutline #f97583
listFilterWidget.outline #21221e
merge.border #21221e
merge.commonContentBackground #fdfff119
merge.commonHeaderBackground #fdfff126
merge.currentContentBackground #a496ec19
merge.currentHeaderBackground #a496ec26
merge.incomingContentBackground #aefaa819
merge.incomingHeaderBackground #aefaa826
minimap.errorHighlight #f97583
minimap.warningHighlight #fdbc7f
minimapGutter.addedBackground #aefaa8
minimapGutter.deletedBackground #a496ec
minimapGutter.modifiedBackground #f4ea91
notificationCenter.border #3b3c35
notificationCenterHeader.background #3b3c35
notificationCenterHeader.foreground #919288
notificationLink.foreground #f4ea91
notifications.background #3b3c35
notifications.border #3b3c35
notifications.foreground #c0c1b5
notificationsErrorIcon.foreground #f97583
notificationsInfoIcon.foreground #9be5f7
notificationsWarningIcon.foreground #fdbc7f
notificationToast.border #3b3c35
panel.background #3b3c35
panel.border #21221e
panel.dropBackground #1d1e19bf
panelTitle.activeBorder #f4ea91
panelTitle.activeForeground #f4ea91
panelTitle.inactiveForeground #919288
peekView.border #21221e
peekViewEditor.background #3b3c35
peekViewEditor.matchHighlightBackground #57584f
peekViewEditorGutter.background #3b3c35
peekViewResult.background #3b3c35
peekViewResult.fileForeground #919288
peekViewResult.lineForeground #919288
peekViewResult.matchHighlightBackground #57584f
peekViewResult.selectionBackground #3b3c35
peekViewResult.selectionForeground #fdfff1
peekViewTitle.background #3b3c35
peekViewTitleDescription.foreground #919288
peekViewTitleLabel.foreground #fdfff1
pickerGroup.border #21221e
pickerGroup.foreground #57584f
problemsErrorIcon.foreground #f97583
problemsInfoIcon.foreground #9be5f7
problemsWarningIcon.foreground #fdbc7f
progressBar.background #3b3c35
sash.hoverBorder #6e7066
scrollbar.shadow #21221e
scrollbarSlider.activeBackground #fdfff112
scrollbarSlider.background #fdfff112
scrollbarSlider.hoverBackground #fdfff112
selection.background #c0c1b526
settings.checkboxBackground #3b3c35
settings.checkboxBorder #3b3c35
settings.checkboxForeground #fdfff1
settings.dropdownBackground #3b3c35
settings.dropdownBorder #3b3c35
settings.dropdownForeground #fdfff1
settings.dropdownListBorder #919288
settings.headerForeground #f4ea91
settings.modifiedItemForeground #f4ea91
settings.modifiedItemIndicator #f4ea91
settings.numberInputBackground #3b3c35
settings.numberInputBorder #3b3c35
settings.numberInputForeground #fdfff1
settings.textInputBackground #3b3c35
settings.textInputBorder #3b3c35
settings.textInputForeground #fdfff1
sideBar.background #1d1e19
sideBar.border #161613
sideBar.dropBackground #1d1e19bf
sideBar.foreground #919288
sideBarSectionHeader.background #1d1e19
sideBarSectionHeader.foreground #6e7066
sideBarTitle.foreground #57584f
statusBar.background #1d1e19
statusBar.border #161613
statusBar.debuggingBackground #6e7066
statusBar.debuggingBorder #1d1e19
statusBar.debuggingForeground #fdfff1
statusBar.foreground #6e7066
statusBar.noFolderBackground #1d1e19
statusBar.noFolderBorder #161613
statusBar.noFolderForeground #6e7066
statusBarItem.activeBackground #21221e
statusBarItem.errorBackground #21221e
statusBarItem.errorForeground #f97583
statusBarItem.hoverBackground #fdfff10c
statusBarItem.prominentBackground #3b3c35
statusBarItem.prominentHoverBackground #3b3c35
statusBarItem.remoteBackground #1d1e19
statusBarItem.remoteForeground #aefaa8
symbolIcon.arrayForeground #a496ec
symbolIcon.booleanForeground #a496ec
symbolIcon.classForeground #9be5f7
symbolIcon.colorForeground #c87cd8
symbolIcon.constantForeground #c87cd8
symbolIcon.constructorForeground #aefaa8
symbolIcon.enumeratorForeground #fdbc7f
symbolIcon.enumeratorMemberForeground #fdbc7f
symbolIcon.eventForeground #fdbc7f
symbolIcon.fieldForeground #fdbc7f
symbolIcon.fileForeground #c0c1b5
symbolIcon.folderForeground #c0c1b5
symbolIcon.functionForeground #aefaa8
symbolIcon.interfaceForeground #9be5f7
symbolIcon.keyForeground #fdbc7f
symbolIcon.keywordForeground #a496ec
symbolIcon.methodForeground #aefaa8
symbolIcon.moduleForeground #9be5f7
symbolIcon.namespaceForeground #9be5f7
symbolIcon.nullForeground #c87cd8
symbolIcon.numberForeground #c87cd8
symbolIcon.objectForeground #9be5f7
symbolIcon.operatorForeground #a496ec
symbolIcon.packageForeground #c87cd8
symbolIcon.propertyForeground #fdbc7f
symbolIcon.referenceForeground #c87cd8
symbolIcon.snippetForeground #aefaa8
symbolIcon.stringForeground #f4ea91
symbolIcon.structForeground #a496ec
symbolIcon.textForeground #f4ea91
symbolIcon.typeParameterForeground #fdbc7f
symbolIcon.unitForeground #c87cd8
symbolIcon.variableForeground #9be5f7
tab.activeBackground #21221e
tab.activeBorder #f4ea91
tab.activeForeground #f4ea91
tab.activeModifiedBorder #57584f
tab.border #21221e
tab.hoverBackground #21221e
tab.hoverBorder #57584f
tab.inactiveBackground #21221e
tab.inactiveForeground #919288
tab.inactiveModifiedBorder #57584f
tab.lastPinnedBorder #57584f
tab.unfocusedActiveBorder #919288
tab.unfocusedActiveForeground #c0c1b5
tab.unfocusedActiveModifiedBorder #3b3c35
tab.unfocusedHoverBackground #21221e
tab.unfocusedHoverBorder #21221e
tab.unfocusedInactiveForeground #919288
tab.unfocusedInactiveModifiedBorder #3b3c35
terminal.ansiBlack #3b3c35
terminal.ansiBlue #fdbc7f
terminal.ansiBrightBlack #6e7066
terminal.ansiBrightBlue #fdbc7f
terminal.ansiBrightCyan #9be5f7
terminal.ansiBrightGreen #aefaa8
terminal.ansiBrightMagenta #c87cd8
terminal.ansiBrightRed #a496ec
terminal.ansiBrightWhite #fdfff1
terminal.ansiBrightYellow #f4ea91
terminal.ansiCyan #9be5f7
terminal.ansiGreen #aefaa8
terminal.ansiMagenta #c87cd8
terminal.ansiRed #a496ec
terminal.ansiWhite #fdfff1
terminal.ansiYellow #f4ea91
terminal.background #3b3c35
terminal.foreground #fdfff1
terminal.selectionBackground #fdfff126
terminalCursor.background #00000000
terminalCursor.foreground #fdfff1
textBlockQuote.background #3b3c35
textBlockQuote.border #3b3c35
textCodeBlock.background #3b3c35
textLink.activeForeground #fdfff1
textLink.foreground #f7efab
textPreformat.foreground #fdfff1
textSeparator.foreground #6e7066
titleBar.activeBackground #1d1e19
titleBar.activeForeground #919288
titleBar.border #161613
titleBar.inactiveBackground #1d1e19
titleBar.inactiveForeground #57584f
walkThrough.embeddedEditorBackground #1d1e19
welcomePage.buttonBackground #3b3c35
welcomePage.buttonHoverBackground #57584f
widget.shadow #161613 comment.git-status.header.remote #a496ec —
comment.git-status.header.local #9be5f7 —
comment.other.git-status.head #fdfff1 —
string.quoted.docstring, string.quoted.docstring punctuation.definition #6e7066 —
constant.other.caps #c87cd8 —
constant.other.placeholder.c #fdbc7f —
constant.other.property #c87cd8 —
constant.other.citation.latex #c87cd8 —
constant.other.color #c87cd8 —
constant.other.character-class.escape #c87cd8 —
constant.other.key #c87cd8 —
constant.other.symbol #fdbc7f —
constant.other.elm #9be5f7 —
constant.language #c87cd8 —
constant.character.escape #c87cd8 —
constant.numeric.line-number.find-in-files #57584f —
constant.numeric.line-number.match.find-in-files #f4ea91 —
entity.name.section #f4ea91 —
entity.name.function, entity.name.function.templated #aefaa8 —
entity.name.function.member.static #fdfff1 —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #9be5f7 —
entity.name.label #c87cd8 —
entity.name.function.preprocessor #9be5f7 —
entity.name.class #9be5f7 —
entity.name.constant #c87cd8 —
entity.name.namespace #fdfff1 —
entity.other.inherited-class #9be5f7 italic
entity.name.function #aefaa8 —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #a496ec —
entity.name.function.operator #a496ec —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #9be5f7 —
entity.other.attribute-name #9be5f7 italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css #aefaa8 —
entity.other.attribute-name.id.css #fdbc7f —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #9be5f7 italic
entity.name.function, support.function #aefaa8 —
entity.other.git-status.hex #c87cd8 —
entity.other.jinja2.delimiter #919288 —
entity.name.operator.custom-literal #fdfff1 —
entity.name.operator.custom-literal.string #f4ea91 —
entity.name.operator.custom-literal.number #c87cd8 —
entity.name.type.rust #9be5f7 —
entity.name.lifetime.rust #a496ec —
keyword.control.directive #a496ec —
keyword.operator, keyword.operator.member, keyword.operator.new #a496ec —
keyword.other.substitution #919288 —
keyword.other.template.begin, keyword.other.template.end #a496ec —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #919288 —
keyword.other.parenthesis.elm #919288 —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #9be5f7 —
keyword.control.rust, keyword.operator.misc.rust #a496ec —
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby #a496ec —
markup.underline — underline
markup.underline.link #aefaa8 —
markup.inserted, markup.inserted punctuation.definition.inserted #aefaa8 —
markup.deleted, markup.deleted punctuation.definition.deleted #a496ec —
markup.changed, markup.changed punctuation.definition.changed #f4ea91 —
markup.ignored, markup.ignored punctuation.definition.ignored #919288 —
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js #919288 —
meta.function-call.generic.python, support.function.builtin.python #aefaa8 —
meta.function-call.python meta.function-call.arguments.python #fdfff1 —
meta.instance.constructor #aefaa8 —
meta.attribute-with-value.class string, meta.attribute.class.html string #aefaa8 —
meta.attribute-with-value.id string, meta.attribute.id.html string #fdbc7f —
source.json meta.mapping.key string #fdfff1 —
meta.object.member #fdfff1 —
meta.property-list.css variable.other #fdbc7f —
entity.name.constant.preprocessor, meta.preprocessor #c87cd8 —
meta.diff.git-diff.header #f4ea91 —
meta.type_params.rust #fdfff1 —
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string #c0c1b5 —
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css #919288 —
punctuation.definition.group #fdfff1 —
punctuation.definition.comment #6e7066 —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #c0c1b5 —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #fdbc7f —
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #a496ec —
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown — —
source.scss, source.sass #919288 —
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less #fdbc7f italic
source.git-show.commit.sha #c87cd8 —
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file #919288 —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #c87cd8 —
source.git-show meta.diff.range.unified #fdbc7f —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #919288 —
storage.type #a496ec italic
storage.type.extends #a496ec normal
storage.type.function.arrow #a496ec normal
storage.modifier, storage.type.modifier #a496ec italic
storage.class.restructuredtext.ref #c87cd8 —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #a496ec —
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust #9be5f7 —
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust #a496ec —
string.unquoted.label #fdfff1 —
string source punctuation.section.embedded, string punctuation.definition.string source #919288 —
string.other.link.title, string.other.link.description #a496ec —
string.other.link.description.title #9be5f7 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #a496ec —
string.other.ref, string.other.restructuredtext.ref #aefaa8 —
string.other.git-status.help.key #c0c1b5 —
string.other.git-status.remote #a496ec —
support.constant.handlebars #919288 —
support.type.vendor-prefix.css #c0c1b5 —
support.function.delimiter.elm #919288 —
support.type, entity.name.type.object.console #9be5f7 italic
support.type.property-name #fdfff1 normal
support.constant.core.rust #c87cd8 —
text.find-in-files #fdfff1 —
variable, variable.other #fdfff1 —
variable.parameter, parameters variable.function #fdbc7f italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #c0c1b5 italic
variable.language.arguments #c87cd8 —
variable.other.class #9be5f7 —
variable.other.constant #c87cd8 —
variable.other.readwrite #fdfff1 —
variable.other.member #fdfff1 —
variable.other.enummember #c87cd8 —
variable.other.property, variable.other.property.static, variable.other.event #fdfff1 —
variable.function #aefaa8 —
variable.other.substitution #fdbc7f —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #c87cd8 —
source.jinja2 variable.other.jinja2.block #aefaa8 —
source.jinja2 variable.other.jinja2 #fdbc7f —
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...
~/my-project
main*
Button.tsx
31
$
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 } ! ` ;
}
Medusa Theme | Coding Theme