Skip to main content
Home Theme VS Code Foundyn Dev Warm feeling Monokai inspired theme, goes best with Material Icons.
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 #0A0908 activityBar.border #0A0908 activityBar.dropBackground #151412bf activityBar.foreground #BFB5AF activityBar.inactiveForeground #746961 activityBarBadge.background #F9A931 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 #79838f italic comment storage.type #9A918C — comment entity.name.type #BFB5AF — comment variable, comment variable.other #BFB5AF — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Foundyn Dev — Foundyn Dev
activityBarBadge.foreground
#1C1917
badge.background #F9A931
badge.foreground #1C1917
breadcrumb.activeSelectionForeground #D9CBBE
breadcrumb.focusForeground #BFB5AF
breadcrumb.foreground #94887e
button.background #110F0E
button.foreground #94887e
button.hoverBackground #1C1917
button.secondaryBackground #110F0E
button.secondaryForeground #94887e
button.secondaryHoverBackground #1C1917
charts.blue #4C9DF3
charts.foreground #D9CBBE
charts.green #ADDA5E
charts.lines #9A918C
charts.orange #FF8566
charts.purple #C653AD
charts.red #E73D13
charts.yellow #F9A931
debugExceptionWidget.background #110F0E
debugExceptionWidget.border #1C1917
debugIcon.breakpointCurrentStackframeForeground #F9A931
debugIcon.breakpointDisabledForeground #BFB5AF
debugIcon.breakpointForeground #E73D13
debugIcon.breakpointStackframeForeground #D9CBBE
debugIcon.breakpointUnverifiedForeground #FF8566
debugIcon.continueForeground #D9CBBE
debugIcon.disconnectForeground #D9CBBE
debugIcon.pauseForeground #D9CBBE
debugIcon.restartForeground #ADDA5E
debugIcon.startForeground #ADDA5E
debugIcon.stepBackForeground #D9CBBE
debugIcon.stepIntoForeground #D9CBBE
debugIcon.stepOutForeground #D9CBBE
debugIcon.stepOverForeground #D9CBBE
debugIcon.stopForeground #E73D13
debugToolBar.background #110F0E
descriptionForeground #94887e
diffEditor.insertedTextBackground #ADDA5E19
diffEditor.removedTextBackground #E73D1319
dropdown.background #1C1917
dropdown.border #1C1917
dropdown.foreground #94887e
dropdown.listBackground #110F0E
editor.background #1C1917
editor.findMatchBackground #D9CBBE21
editor.findMatchBorder #F9A931
editor.findMatchHighlightBackground #D9CBBE21
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #D9CBBE0F
editor.findRangeHighlightBorder #00000000
editor.foreground #D9CBBE
editor.hoverHighlightBackground #D9CBBE0F
editor.inactiveSelectionBackground #D9CBBE0F
editor.lineHighlightBackground #D9CBBE0F
editor.lineHighlightBorder #d9cbbe33
editor.rangeHighlightBackground #110F0E
editor.rangeHighlightBorder #110F0E
editor.selectionBackground #BFB5AF26
editor.selectionHighlightBackground #D9CBBE21
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #D9CBBE21
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #D9CBBE21
editor.wordHighlightStrongBorder #00000000
editorBracketHighlight.foreground1 #E73D13
editorBracketHighlight.foreground2 #FF8566
editorBracketHighlight.foreground3 #F9A931
editorBracketHighlight.foreground4 #ADDA5E
editorBracketHighlight.foreground5 #4C9DF3
editorBracketHighlight.foreground6 #C653AD
editorBracketMatch.background #1C1917
editorBracketMatch.border #9A918C
editorCodeLens.foreground #9A918C
editorCursor.background #1C1917
editorCursor.foreground #D9CBBE
editorError.background #00000000
editorError.border #00000000
editorError.foreground #E73D13
editorGroup.border #151412
editorGroup.dropBackground #151412bf
editorGroup.emptyBackground #0A0908
editorGroup.focusedEmptyBorder #151412
editorGroupHeader.noTabsBackground #1C1917
editorGroupHeader.tabsBackground #1C1917
editorGroupHeader.tabsBorder #1C1917
editorGutter.addedBackground #ADDA5E
editorGutter.background #1C1917
editorGutter.deletedBackground #E73D13
editorGutter.modifiedBackground #FF8566
editorHint.border #1C1917
editorHint.foreground #C653AD
editorHoverWidget.background #110F0E
editorHoverWidget.border #1C1917
editorIndentGuide.background #302B28
editorInfo.background #00000000
editorInfo.border #1C1917
editorInfo.foreground #4C9DF3
editorLightBulb.foreground #F9A931
editorLightBulbAutoFix.foreground #ADDA5E
editorLineNumber.activeForeground #c7b1a4
editorLineNumber.foreground #756a63
editorLink.activeForeground #4C9DF3
editorMarkerNavigation.background #110F0E
editorMarkerNavigationError.background #E73D13
editorMarkerNavigationInfo.background #4C9DF3
editorMarkerNavigationWarning.background #FF8566
editorOverviewRuler.addedForeground #ADDA5E
editorOverviewRuler.border #3E3733
editorOverviewRuler.currentContentForeground #3E3733
editorOverviewRuler.deletedForeground #E73D13
editorOverviewRuler.errorForeground #E73D13
editorOverviewRuler.findMatchForeground #D9CBBE21
editorOverviewRuler.incomingContentForeground #3E3733
editorOverviewRuler.infoForeground #4C9DF3
editorOverviewRuler.modifiedForeground #FF8566
editorOverviewRuler.rangeHighlightForeground #D9CBBE21
editorOverviewRuler.selectionHighlightForeground #D9CBBE21
editorOverviewRuler.warningForeground #FF8566
editorOverviewRuler.wordHighlightForeground #D9CBBE21
editorOverviewRuler.wordHighlightStrongForeground #D9CBBE21
editorPane.background #1C1917
editorRuler.foreground #746961
editorSuggestWidget.background #110F0E
editorSuggestWidget.border #110F0E
editorSuggestWidget.foreground #BFB5AF
editorSuggestWidget.highlightForeground #D9CBBE
editorSuggestWidget.selectedBackground #9A918C
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #FF8566
editorWhitespace.foreground #746961
editorWidget.background #110F0E
editorWidget.border #110F0E
errorForeground #E73D13
extensionButton.prominentBackground #110F0E
extensionButton.prominentForeground #D9CBBE
extensionButton.prominentHoverBackground #746961
focusBorder #9A918C
foreground #D9CBBE
gitDecoration.addedResourceForeground #ADDA5E
gitDecoration.conflictingResourceForeground #FF8566
gitDecoration.deletedResourceForeground #E73D13
gitDecoration.ignoredResourceForeground #746961
gitDecoration.modifiedResourceForeground #F9A931
gitDecoration.stageDeletedResourceForeground #E73D13
gitDecoration.stageModifiedResourceForeground #F9A931
gitDecoration.untrackedResourceForeground #FF8566
input.background #110F0E
input.border #110F0E
input.foreground #D9CBBE
input.placeholderForeground #9A918C
inputOption.activeBackground #746961
inputOption.activeBorder #746961
inputValidation.errorBackground #110F0E
inputValidation.errorBorder #E73D13
inputValidation.errorForeground #E73D13
inputValidation.infoBackground #110F0E
inputValidation.infoBorder #4C9DF3
inputValidation.infoForeground #4C9DF3
inputValidation.warningBackground #110F0E
inputValidation.warningBorder #FF8566
inputValidation.warningForeground #FF8566
list.activeSelectionBackground #D9CBBE0F
list.activeSelectionForeground #D9CBBE
list.dropBackground #151412bf
list.errorForeground #E73D13
list.focusBackground #1C1917
list.focusForeground #ddc3d5
list.highlightForeground #D9CBBE
list.hoverBackground #D9CBBE0F
list.hoverForeground #D9CBBE
list.inactiveFocusBackground #1C1917
list.inactiveSelectionBackground #BFB5AF0c
list.inactiveSelectionForeground #b6aaa0
list.invalidItemForeground #E73D13
list.warningForeground #FF8566
listFilterWidget.background #1C1917
listFilterWidget.noMatchesOutline #E73D13
listFilterWidget.outline #1C1917
merge.border #3E3733
merge.commonContentBackground #D9CBBE19
merge.commonHeaderBackground #D9CBBE21
merge.currentContentBackground #E73D1319
merge.currentHeaderBackground #E73D1326
merge.incomingContentBackground #ADDA5E19
merge.incomingHeaderBackground #ADDA5E26
minimap.errorHighlight #E73D13
minimap.warningHighlight #FF8566
minimapGutter.addedBackground #ADDA5E
minimapGutter.deletedBackground #E73D13
minimapGutter.modifiedBackground #F9A931
notificationCenter.border #110F0E
notificationCenterHeader.background #110F0E
notificationCenterHeader.foreground #94887e
notificationLink.foreground #F9A931
notifications.background #110F0E
notifications.border #110F0E
notifications.foreground #BFB5AF
notificationsErrorIcon.foreground #E73D13
notificationsInfoIcon.foreground #4C9DF3
notificationsWarningIcon.foreground #FF8566
notificationToast.border #110F0E
panel.background #110F0E
panel.border #1C1917
panel.dropBackground #151412bf
panelTitle.activeBorder #F9A931
panelTitle.activeForeground #F9A931
panelTitle.inactiveForeground #94887e
peekView.border #1C1917
peekViewEditor.background #110F0E
peekViewEditor.matchHighlightBackground #746961
peekViewEditorGutter.background #110F0E
peekViewResult.background #110F0E
peekViewResult.fileForeground #94887e
peekViewResult.lineForeground #94887e
peekViewResult.matchHighlightBackground #746961
peekViewResult.selectionBackground #110F0E
peekViewResult.selectionForeground #D9CBBE
peekViewTitle.background #110F0E
peekViewTitleDescription.foreground #94887e
peekViewTitleLabel.foreground #D9CBBE
pickerGroup.border #1C1917
pickerGroup.foreground #746961
problemsErrorIcon.foreground #E73D13
problemsInfoIcon.foreground #4C9DF3
problemsWarningIcon.foreground #FF8566
progressBar.background #110F0E
sash.hoverBorder #9A918C
scrollbar.shadow #1C1917
scrollbarSlider.activeBackground #D9CBBE12
scrollbarSlider.background #D9CBBE12
scrollbarSlider.hoverBackground #D9CBBE12
selection.background #BFB5AF26
settings.checkboxBackground #110F0E
settings.checkboxBorder #110F0E
settings.checkboxForeground #D9CBBE
settings.dropdownBackground #110F0E
settings.dropdownBorder #110F0E
settings.dropdownForeground #D9CBBE
settings.dropdownListBorder #94887e
settings.headerForeground #F9A931
settings.modifiedItemForeground #F9A931
settings.modifiedItemIndicator #F9A931
settings.numberInputBackground #110F0E
settings.numberInputBorder #110F0E
settings.numberInputForeground #D9CBBE
settings.textInputBackground #110F0E
settings.textInputBorder #110F0E
settings.textInputForeground #D9CBBE
sideBar.background #151412
sideBar.border #0A0908
sideBar.dropBackground #151412bf
sideBar.foreground #94887e
sideBarSectionHeader.background #151412
sideBarSectionHeader.foreground #9A918C
sideBarTitle.foreground #746961
statusBar.background #151412
statusBar.border #0A0908
statusBar.debuggingBackground #9A918C
statusBar.debuggingBorder #151412
statusBar.debuggingForeground #D9CBBE
statusBar.foreground #9A918C
statusBar.noFolderBackground #151412
statusBar.noFolderBorder #0A0908
statusBar.noFolderForeground #9A918C
statusBarItem.activeBackground #1C1917
statusBarItem.errorBackground #1C1917
statusBarItem.errorForeground #E73D13
statusBarItem.hoverBackground #D9CBBE0F
statusBarItem.prominentBackground #110F0E
statusBarItem.prominentHoverBackground #110F0E
statusBarItem.remoteBackground #151412
statusBarItem.remoteForeground #ADDA5E
symbolIcon.arrayForeground #E73D13
symbolIcon.booleanForeground #E73D13
symbolIcon.classForeground #4C9DF3
symbolIcon.colorForeground #C653AD
symbolIcon.constantForeground #C653AD
symbolIcon.constructorForeground #ADDA5E
symbolIcon.enumeratorForeground #FF8566
symbolIcon.enumeratorMemberForeground #FF8566
symbolIcon.eventForeground #FF8566
symbolIcon.fieldForeground #FF8566
symbolIcon.fileForeground #BFB5AF
symbolIcon.folderForeground #BFB5AF
symbolIcon.functionForeground #ADDA5E
symbolIcon.interfaceForeground #4C9DF3
symbolIcon.keyForeground #FF8566
symbolIcon.keywordForeground #E73D13
symbolIcon.methodForeground #ADDA5E
symbolIcon.moduleForeground #4C9DF3
symbolIcon.namespaceForeground #4C9DF3
symbolIcon.nullForeground #C653AD
symbolIcon.numberForeground #C653AD
symbolIcon.objectForeground #4C9DF3
symbolIcon.operatorForeground #E73D13
symbolIcon.packageForeground #C653AD
symbolIcon.propertyForeground #FF8566
symbolIcon.referenceForeground #C653AD
symbolIcon.snippetForeground #ADDA5E
symbolIcon.stringForeground #F9A931
symbolIcon.structForeground #E73D13
symbolIcon.textForeground #F9A931
symbolIcon.typeParameterForeground #FF8566
symbolIcon.unitForeground #C653AD
symbolIcon.variableForeground #4C9DF3
tab.activeBackground #1C1917
tab.activeBorder #F9A931
tab.activeForeground #F9A931
tab.activeModifiedBorder #746961
tab.border #1C1917
tab.hoverBackground #1C1917
tab.hoverBorder #746961
tab.inactiveBackground #1C1917
tab.inactiveForeground #94887e
tab.inactiveModifiedBorder #746961
tab.lastPinnedBorder #746961
tab.unfocusedActiveBorder #94887e
tab.unfocusedActiveForeground #BFB5AF
tab.unfocusedActiveModifiedBorder #110F0E
tab.unfocusedHoverBackground #1C1917
tab.unfocusedHoverBorder #1C1917
tab.unfocusedInactiveForeground #94887e
tab.unfocusedInactiveModifiedBorder #110F0E
terminal.ansiBlack #110F0E
terminal.ansiBlue #FF8566
terminal.ansiBrightBlack #9A918C
terminal.ansiBrightBlue #FF8566
terminal.ansiBrightCyan #4C9DF3
terminal.ansiBrightGreen #ADDA5E
terminal.ansiBrightMagenta #C653AD
terminal.ansiBrightRed #E73D13
terminal.ansiBrightWhite #D9CBBE
terminal.ansiBrightYellow #F9A931
terminal.ansiCyan #4C9DF3
terminal.ansiGreen #ADDA5E
terminal.ansiMagenta #C653AD
terminal.ansiRed #E73D13
terminal.ansiWhite #D9CBBE
terminal.ansiYellow #F9A931
terminal.background #110F0E
terminal.foreground #D9CBBE
terminal.selectionBackground #D9CBBE21
terminalCursor.background #00000000
terminalCursor.foreground #D9CBBE
textBlockQuote.background #110F0E
textBlockQuote.border #110F0E
textCodeBlock.background #110F0E
textLink.activeForeground #D9CBBE
textLink.foreground #F9A931
textPreformat.foreground #D9CBBE
textSeparator.foreground #9A918C
titleBar.activeBackground #151412
titleBar.activeForeground #94887e
titleBar.border #0A0908
titleBar.inactiveBackground #151412
titleBar.inactiveForeground #746961
walkThrough.embeddedEditorBackground #151412
welcomePage.buttonBackground #110F0E
welcomePage.buttonHoverBackground #746961
widget.shadow #0A0908 comment.git-status.header.remote #E73D13 —
comment.git-status.header.local #4C9DF3 —
comment.other.git-status.head #D9CBBE —
string.quoted.docstring, string.quoted.docstring punctuation.definition #9A918C —
constant.other.caps #C653AD —
constant.other.placeholder.c #FF8566 —
constant.other.property #C653AD —
constant.other.citation.latex #C653AD —
constant.other.color #C653AD —
constant.other.character-class.escape #C653AD —
constant.other.key #C653AD —
constant.other.symbol #FF8566 —
constant.other.elm #4C9DF3 —
constant.language #C653AD —
constant.character.escape #C653AD —
constant.numeric.line-number.find-in-files #746961 —
constant.numeric.line-number.match.find-in-files #F9A931 —
entity.name.section #F9A931 —
entity.name.function, entity.name.function.templated #ADDA5E —
entity.name.function.member.static #D9CBBE —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #4C9DF3 —
entity.name.label #C653AD —
entity.name.function.preprocessor #4C9DF3 —
entity.name.class #4C9DF3 —
entity.name.constant #C653AD —
entity.name.namespace #D9CBBE —
entity.other.inherited-class #4C9DF3 italic
entity.name.function #ADDA5E —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #E73D13 —
entity.name.function.operator #E73D13 —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #4C9DF3 —
entity.other.attribute-name #4C9DF3 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 #ADDA5E —
entity.other.attribute-name.id.css #FF8566 —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #4C9DF3 italic
entity.name.function, support.function #ADDA5E —
entity.other.git-status.hex #C653AD —
entity.other.jinja2.delimiter #94887e —
entity.name.operator.custom-literal #D9CBBE —
entity.name.operator.custom-literal.string #F9A931 —
entity.name.operator.custom-literal.number #C653AD —
entity.name.type.rust #4C9DF3 —
entity.name.lifetime.rust #E73D13 —
keyword.control.directive #E73D13 —
keyword.operator, keyword.operator.member, keyword.operator.new #E73D13 —
keyword.other.substitution #94887e —
keyword.other.template.begin, keyword.other.template.end #E73D13 —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #94887e —
keyword.other.parenthesis.elm #94887e —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #4C9DF3 —
keyword.control.rust, keyword.operator.misc.rust #E73D13 —
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby #E73D13 —
markup.underline — underline
markup.underline.link #ADDA5E —
markup.inserted, markup.inserted punctuation.definition.inserted #ADDA5E —
markup.deleted, markup.deleted punctuation.definition.deleted #E73D13 —
markup.changed, markup.changed punctuation.definition.changed #F9A931 —
markup.ignored, markup.ignored punctuation.definition.ignored #94887e —
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 #94887e —
meta.function-call.generic.python, support.function.builtin.python #ADDA5E —
meta.function-call.python meta.function-call.arguments.python #D9CBBE —
meta.instance.constructor #ADDA5E —
meta.attribute-with-value.class string, meta.attribute.class.html string #ADDA5E —
meta.attribute-with-value.id string, meta.attribute.id.html string #FF8566 —
source.json meta.mapping.key string #D9CBBE —
meta.object.member #D9CBBE —
meta.property-list.css variable.other #FF8566 —
entity.name.constant.preprocessor, meta.preprocessor #C653AD —
meta.diff.git-diff.header #F9A931 —
meta.type_params.rust #D9CBBE —
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 #BFB5AF —
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 #94887e —
punctuation.definition.group #D9CBBE —
punctuation.definition.comment #8da4bd —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #BFB5AF —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #FF8566 —
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 #E73D13 —
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown — —
text.html.derivative, region.whitish #FFFFFF —
source.scss, source.sass #94887e —
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 #FF8566 italic
source.git-show.commit.sha #C653AD —
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 #94887e —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #C653AD —
source.git-show meta.diff.range.unified #FF8566 —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #94887e —
storage.type #4C9DF3 italic
storage.type.extends #E73D13 normal
storage.type.function.arrow #E73D13 normal
storage.modifier, storage.type.modifier #E73D13 italic
storage.class.restructuredtext.ref #C653AD —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #E73D13 —
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 #4C9DF3 —
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 #E73D13 —
string.unquoted.label #D9CBBE —
string source punctuation.section.embedded, string punctuation.definition.string source #94887e —
string.other.link.title, string.other.link.description #E73D13 —
string.other.link.description.title #4C9DF3 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #E73D13 —
string.other.ref, string.other.restructuredtext.ref #ADDA5E —
string.other.git-status.help.key #BFB5AF —
string.other.git-status.remote #E73D13 —
support.constant.handlebars #94887e —
support.type.vendor-prefix.css #BFB5AF —
support.function.delimiter.elm #94887e —
support.type, entity.name.type.object.console #4C9DF3 italic
support.type.property-name #D9CBBE normal
support.constant.core.rust #C653AD —
text.find-in-files #D9CBBE —
variable, variable.other #D9CBBE —
variable.parameter, parameters variable.function #FF8566 italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #BFB5AF italic
variable.language.arguments #C653AD —
variable.other.class #4C9DF3 —
variable.other.constant #C653AD —
variable.other.readwrite #D9CBBE —
variable.other.member #D9CBBE —
variable.other.enummember #C653AD —
variable.other.property, variable.other.property.static, variable.other.event #D9CBBE —
variable.function #ADDA5E —
variable.other.substitution #FF8566 —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #C653AD —
source.jinja2 variable.other.jinja2.block #ADDA5E —
source.jinja2 variable.other.jinja2 #FF8566 —
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 } ! ` ;
}
Foundyn Dev | Coding Theme