Skip to main content
Home Theme VS Code CursCo: Cursor VSCode Theme Cursor's dark elegant theme for VSCode!!
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 #141414 activityBar.foreground #cccccc99 activityBarBadge.background #88c0d0 activityBarBadge.foreground #000000 badge.background #88c0d0 badge.foreground #141414 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle string.quoted.binary.single.python #A8CC7C constant.language.false.cpp, constant.language.true.cpp #82D2CE 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 #D6D6DD — keyword.control.directive
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
CursCo: Cursor VSCode Theme — Cursor Dark Theme CursCo: Cursor VSCode Theme | Coding Theme
breadcrumb.activeSelectionForeground
#ffffff
breadcrumb.background #1a1a1a
breadcrumb.foreground #cccccc99
breadcrumbPicker.background #141414
button.background #4c9df3
button.foreground #191c22
button.hoverBackground #66aefa
button.secondaryBackground #565656
button.secondaryForeground #ececec
button.secondaryHoverBackground #767676
debugExceptionWidget.background #505050
debugExceptionWidget.border #141414
debugToolBar.background #1a1a1a
diffEditor.insertedTextBackground #ffffff22
diffEditor.removedTextBackground #ffffff22
dropdown.background #1a1a1a
dropdown.border #2a2a2a
dropdown.foreground #ffffff
editor.background #1a1a1a
editor.findMatchBackground #88c0d066
editor.findMatchHighlightBackground #88c0d044
editor.findRangeHighlightBackground #ffffff33
editor.foreground #d8dee9
editor.hoverHighlightBackground #292929
editor.inactiveSelectionBackground #40404077
editor.lineHighlightBackground #292929
editor.lineHighlightBorder #292929
editor.rangeHighlightBackground #40404052
editor.selectionBackground #40404099
editor.selectionHighlightBackground #404040cc
editor.snippetFinalTabstopHighlightBorder #cccccc
editor.snippetTabstopHighlightBackground #cccccc55
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff2d
editorBracketMatch.background #14141400
editorBracketMatch.border #ffffff55
editorCodeLens.foreground #505050
editorCursor.foreground #ffffff
editorError.border #bf616a00
editorError.foreground #bf616a
editorGroup.border #2a2a2a00
editorGroup.dropBackground #2a2a2a99
editorGroup.emptyBackground #141414
editorGroupHeader.noTabsBackground #141414
editorGroupHeader.tabsBackground #141414
editorGroupHeader.tabsBorder #ffffff0d
editorGutter.addedBackground #a3be8c
editorGutter.background #1a1a1a
editorGutter.deletedBackground #bf616a
editorGutter.modifiedBackground #ebcb8b
editorHoverWidget.background #1a1a1a
editorHoverWidget.border #2a2a2a
editorIndentGuide.activeBackground #505050
editorIndentGuide.background #404040b3
editorInlayHint.background #00000000
editorInlayHint.foreground #505050
editorInlayHint.parameterBackground #00000000
editorInlayHint.parameterForeground #505050
editorInlayHint.typeBackground #00000000
editorInlayHint.typeForeground #505050
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #505050
editorLink.activeForeground #ffffff
editorMarkerNavigation.background #ffffff70
editorMarkerNavigationError.background #bf616ac0
editorMarkerNavigationWarning.background #cccccc
editorOverviewRuler.border #00000000
editorRuler.foreground #494949
editorSuggestWidget.background #141414
editorSuggestWidget.border #2a2a2a
editorSuggestWidget.foreground #ffffff
editorSuggestWidget.highlightForeground #ffffff
editorSuggestWidget.selectedBackground #404040
editorWarning.border #cccccc00
editorWarning.foreground #ebcb8b
editorWhitespace.foreground #505050b3
editorWidget.background #141414
editorWidget.resizeBorder #ffffff
errorForeground #bf616a
extensionButton.prominentBackground #565656
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #767676
focusBorder #00000000
foreground #ccccccdd
gitDecoration.addedResourceForeground #a3be8c
gitDecoration.deletedResourceForeground #bf616a
gitDecoration.ignoredResourceForeground #505050
gitDecoration.modifiedResourceForeground #ebcb8b
gitDecoration.untrackedResourceForeground #88c0d0
input.background #2a2a2a55
input.border #2a2a2a
input.foreground #ffffff
input.placeholderForeground #ffffff99
inputOption.activeBorder #ffffff
inputValidation.errorBackground #bf616a
inputValidation.errorBorder #bf616a
inputValidation.infoBackground #88c0d0
inputValidation.infoBorder #88c0d0
inputValidation.infoForeground #141414
inputValidation.warningBackground #ebcb8b
inputValidation.warningBorder #ebcb8b
list.activeSelectionBackground #ffffff1d
list.activeSelectionForeground #ffffff
list.deemphasizedForeground #cccccc
list.dropBackground #ffffff99
list.errorForeground #bf616a
list.focusBackground #434c5e
list.focusForeground #eceff4
list.highlightForeground #88c0d0
list.hoverBackground #2a2a2a99
list.hoverForeground #ffffff
list.inactiveSelectionBackground #ffffff10
list.inactiveSelectionForeground #ffffffd7
list.invalidItemForeground #cccccc
list.warningForeground #ebcb8b
menu.background #141414
menu.foreground #cccccc
menu.separatorBackground #cccccc
menubar.selectionBackground #cccccc33
merge.border #2a2a2a00
merge.currentContentBackground #88c0d04d
merge.currentHeaderBackground #88c0d066
merge.incomingContentBackground #a3be8c4d
merge.incomingHeaderBackground #a3be8c66
minimap.background #181818
minimap.errorHighlight #f14c4c
minimap.findMatchHighlight #15ac9170
minimap.selectionHighlight #363636
minimap.warningHighlight #ea7620
minimapGutter.addedBackground #15ac91
minimapGutter.deletedBackground #f14c4c
minimapGutter.modifiedBackground #e5b95c
notificationLink.foreground #88c0d0
notifications.background #141414
notifications.foreground #ffffff
panel.background #141414
panel.border #ffffff0d
panelTitle.activeBorder #ffffff00
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #cccccc99
peekView.border #505050
peekViewEditor.background #141414
peekViewEditor.matchHighlightBackground #ffffff66
peekViewEditorGutter.background #141414
peekViewResult.background #141414
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #ffffff66
peekViewResult.matchHighlightBackground #ffffff66
peekViewResult.selectionBackground #404040
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #2a2a2a
peekViewTitleDescription.foreground #ffffff
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #2a2a2a00
pickerGroup.foreground #ffffff
progressBar.background #a3be8c
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #60606055
scrollbarSlider.background #40404055
scrollbarSlider.hoverBackground #40404055
selection.background #ffffff33
sideBar.background #141414
sideBar.border #ffffff0d
sideBar.dropBackground #141414
sideBar.foreground #cccccc99
sideBarSectionHeader.background #141414
sideBarSectionHeader.foreground #505050
sideBarTitle.foreground #cccccc
statusBar.background #141414
statusBar.border #ffffff0d
statusBar.debuggingBackground #434c5e
statusBar.debuggingForeground #d8dee9
statusBar.foreground #cccccc82
statusBar.noFolderBackground #141414
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #505050
statusBarItem.hoverBackground #404040
statusBarItem.prominentBackground #2a2a2a
statusBarItem.prominentHoverBackground #404040
tab.activeBackground #1a1a1a
tab.activeBorder #1a1a1a
tab.activeBorderTop #ffffff00
tab.activeForeground #ffffff
tab.border #ffffff0d
tab.hoverBackground #ffffff00
tab.inactiveBackground #141414
tab.inactiveForeground #505050
tab.unfocusedActiveBorder #88c0d000
tab.unfocusedActiveForeground #ffffff99
tab.unfocusedHoverBackground #2a2a2ab3
tab.unfocusedHoverBorder #88c0d000
tab.unfocusedInactiveForeground #ffffff66
terminal.ansiBlack #2a2a2a
terminal.ansiBlue #81a1c1
terminal.ansiBrightBlack #505050
terminal.ansiBrightBlue #81a1c1
terminal.ansiBrightCyan #88c0d0
terminal.ansiBrightGreen #a3be8c
terminal.ansiBrightMagenta #b48ead
terminal.ansiBrightRed #bf616a
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ebcb8b
terminal.ansiCyan #88c0d0
terminal.ansiGreen #a3be8c
terminal.ansiMagenta #b48ead
terminal.ansiRed #bf616a
terminal.ansiWhite #ffffff
terminal.ansiYellow #ebcb8b
terminal.background #141414
terminal.foreground #ffffffcc
terminal.selectionBackground #636262dd
terminalCursor.background #ffffff22
terminalCursor.foreground #ffffff
textLink.activeForeground #4c9df3
textLink.foreground #4c9df3
textPreformat.foreground #88c0d0
textSeparator.foreground #88c0d0
titleBar.activeBackground #141414
titleBar.activeForeground #cccccc82
titleBar.border #ffffff0d
titleBar.inactiveBackground #141414
titleBar.inactiveForeground #cccccc60
tree.indentGuidesStroke #cccccc55
walkThrough.embeddedEditorBackground #141414
widget.shadow #00000066 #A8CC7C
constant.other.ellipsis.python #D1D1D1
variable.other.generic-type.haskell #83D6C5 —
punctuation.definition.tag #898989
storage.type.haskell #F8C762 —
support.variable.magic.python #D6D6DD —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #D6D6DD —
variable.parameter.function.language.special.self.python #EFB080 —
variable.language.this.cpp #82D2CE
storage.modifier.lifetime.rust #D6D6DD —
support.function.std.rust #AAA0FA —
entity.name.lifetime.rust #EFB080 —
variable.other.property #AA9BF5 —
variable.language.rust #D6D6DD —
support.constant.edge #83D6C5 —
constant.other.character-class.regexp #D6D6DD —
keyword.operator.quantifier.regexp #F8C762 —
punctuation.definition.string.begin,punctuation.definition.string.end #E394DC —
variable.parameter.function #D6D6DD —
comment markup.link #6D6D6D —
markup.changed.diff #EFB080 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #AAA0FA —
markup.inserted.diff #E394DC —
markup.deleted.diff #D6D6DD —
meta.function.c,meta.function.cpp #D6D6DD —
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 #D6D6DD —
punctuation.separator.key-value #D6D6DD —
keyword.operator.expression.import #AAA0FA —
support.constant.math #EFB080 —
support.constant.property.math #F8C762 —
variable.other.constant #EFB080 —
variable.other.constant #AA9BF5 —
storage.type.annotation.java, storage.type.object.array.java #EFB080 —
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 #D6D6DD —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #EFB080 —
keyword.operator.instanceof.java #83D6C5 —
meta.definition.variable.name.java #D6D6DD —
keyword.operator.logical #D6D6DD —
keyword.operator.bitwise #D6D6DD —
keyword.operator.channel #D6D6DD —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #D6D6DD —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #F8C762 —
punctuation.separator.list.comma.css #D6D6DD —
support.constant.color.w3c-standard-color-name.css #F8C762 —
support.module.node,support.type.object.module,support.module.node #EFB080 —
entity.name.type.module #EFB080 —
,meta.object-literal.key,support.variable.object.process,support.variable.object.node #D6D6DD —
variable.other.readwrite #94C1FA —
support.variable.property #AA9BF5 —
support.constant.json #F8C762 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #83D6C5 —
support.type.object.console #D6D6DD —
support.variable.property.process #F8C762 —
entity.name.function.js,support.function.console.js #EBC88D —
keyword.operator.misc.rust #D6D6DD —
keyword.operator.sigil.rust #83D6C5 —
keyword.operator.delete #83D6C5 —
support.type.object.dom #D6D6DD —
support.variable.dom,support.variable.property.dom #D6D6DD —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #D6D6DD —
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 #83D6C5 —
punctuation.separator.delimiter #D6D6DD —
punctuation.separator.c,punctuation.separator.cpp #83D6C5 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #D6D6DD —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #83D6C5 —
variable.parameter.function.language.python #F8C762 —
support.type.python #82D2CE —
keyword.operator.logical.python #83D6C5 —
variable.parameter.function.python #F8C762 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #D6D6DD —
meta.function-call.generic.python #AAA0FA —
constant.character.format.placeholder.other.python #F8C762 —
keyword.operator.assignment.compound #83D6C5 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #D6D6DD —
entity.name.namespace #D1D1D1 —
variable.language #C1808A —
token.variable.parameter.java #D6D6DD —
import.storage.java #EFB080 —
token.package.keyword #83D6C5 —
entity.name.function, meta.require, support.function, variable.function #EFB080 —
entity.name.type.namespace #EFB080 —
support.class, entity.name.type.class #87C3FF —
entity.name.class.identifier.namespace.type #EFB080 —
entity.name.class, variable.other.class.js, variable.other.class.ts #EFB080 —
variable.other.class.php #D6D6DD —
keyword.control.directive.include.cpp #A8CC7C —
control.elements, keyword.operator.less #F8C762 —
keyword.other.special-method #AAA0FA —
storage.modifier.reference, storage.modifier.pointer #D1D1D1
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 #83D6C5 —
token.storage.type.java #EFB080 —
meta.property-name.css #87C3FF
entity.other.inherited-class #EFB080 —
constant.other.symbol #D6D6DD —
constant.other.color #EBC88D —
punctuation.definition.constant #F8C762 —
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style #AF9CFF —
entity.name.tag.html #87C3FF —
meta.property-value.css #E394DC
entity.other.attribute-name #AAA0FA —
entity.other.attribute-name.id #AAA0FA
entity.other.attribute-name.class.css #F8C762
markup.heading punctuation.definition.heading, entity.name.section #AAA0FA —
keyword.other.unit #EBC88D —
markup.bold,todo.bold #F8C762 —
punctuation.definition.bold #EFB080 —
markup.italic, punctuation.definition.italic,todo.emphasis #83D6C5 —
entity.name.section.markdown #D6D6DD —
punctuation.definition.heading.markdown #D6D6DD —
punctuation.definition.list.begin.markdown #D6D6DD —
markup.heading.setext #D6D6DD —
punctuation.definition.bold.markdown #F8C762 —
markup.inline.raw.markdown #E394DC —
markup.inline.raw.string.markdown #E394DC —
punctuation.definition.list.markdown #D6D6DD —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #D6D6DD —
beginning.punctuation.definition.list.markdown #D6D6DD —
punctuation.definition.metadata.markdown #D6D6DD —
markup.underline.link.markdown,markup.underline.link.image.markdown #83D6C5 —
string.other.link.title.markdown,string.other.link.description.markdown #AAA0FA —
constant.character.escape #D6D6DD —
punctuation.section.embedded, variable.interpolation #D6D6DD —
punctuation.section.embedded.begin,punctuation.section.embedded.end #83D6C5 —
invalid.illegal.bad-ampersand.html #D6D6DD —
invalid.deprecated #D6D6DD —
invalid.unimplemented #D6D6DD —
source.json meta.structure.dictionary.json > string.quoted.json #D6D6DD —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #D6D6DD —
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 #E394DC —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #D6D6DD —
support.type.property-name.json #82D2CE —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #83D6C5 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #83D6C5 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #EFB080 —
keyword.operator.error-control.php #83D6C5 —
keyword.operator.type.php #83D6C5 —
punctuation.section.array.begin.php #D6D6DD —
punctuation.section.array.end.php #D6D6DD —
invalid.illegal.non-null-typehinted.php #F44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #EFB080 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #AAA0FA —
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 #D6D6DD —
support.constant.core.rust #F8C762 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #F8C762 —
entity.name.goto-label.php,support.other.php #AAA0FA —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #D6D6DD —
keyword.operator.regexp.php #83D6C5 —
keyword.operator.comparison.php #D6D6DD —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #83D6C5 —
meta.function.decorator.python #A8CC7C —
punctuation.definition.decorator.python,entity.name.function.decorator.python #A8CC7C
support.token.decorator.python,meta.function.decorator.identifier.python #D6D6DD —
function.parameter #D6D6DD —
function.parameter.ruby, function.parameter.cs #D6D6DD —
constant.language.symbol.ruby #D6D6DD —
inline-color-decoration rgb-value #F8C762 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #82D2CE —
block.scope.end,block.scope.begin #D6D6DD —
entity.name.variable.local.cs #D6D6DD —
token.error-token #F44747 —
token.debug-token #83D6C5 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #83D6C5 —
meta.template.expression #D6D6DD —
keyword.operator.module #83D6C5 —
support.type.type.flowtype #AAA0FA —
support.type.primitive #EFB080 —
meta.property.object #D6D6DD —
variable.parameter.function.js #D6D6DD —
keyword.other.template.begin #E394DC —
keyword.other.template.end #E394DC —
keyword.other.substitution.begin #E394DC —
keyword.other.substitution.end #E394DC —
keyword.operator.assignment #D6D6DD —
keyword.operator.assignment.go #EFB080 —
keyword.operator.arithmetic.go, keyword.operator.address.go #83D6C5 —
entity.name.package.go #EFB080 —
support.type.prelude.elm #D6D6DD —
support.constant.elm #F8C762 —
punctuation.quasi.element #83D6C5 —
constant.character.entity #D6D6DD —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #D6D6DD —
entity.global.clojure #EFB080 —
meta.symbol.clojure #D6D6DD —
constant.keyword.clojure #D6D6DD —
meta.arguments.coffee, variable.parameter.function.coffee #D6D6DD —
meta.scope.prerequisites.makefile #D6D6DD —
storage.modifier.import.groovy #EFB080 —
meta.method.groovy #AAA0FA —
meta.definition.variable.name.groovy #D6D6DD —
meta.definition.class.inherited.classes.groovy #E394DC —
support.variable.semantic.hlsl #EFB080 —
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 #83D6C5 —
text.variable, text.bracketed #D6D6DD —
support.type.swift, support.type.vb.asp #EFB080 —
entity.name.function.xi #EFB080 —
entity.name.class.xi #D6D6DD —
constant.character.character-class.regexp.xi #D6D6DD —
constant.regexp.xi #83D6C5 —
keyword.control.xi #D6D6DD —
beginning.punctuation.definition.quote.markdown.xi #E394DC —
beginning.punctuation.definition.list.markdown.xi #6D6D6D —
constant.character.xi #AAA0FA —
constant.other.color.rgb-value.xi #D6D6DD —
punctuation.definition.tag.xi #6D6D6D —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #EFB080 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #D6D6DD —
meta.brace.square #D6D6DD —
comment, punctuation.definition.comment #6D6D6D italic
markup.quote.markdown #6D6D6D —
punctuation.definition.block.sequence.item.yaml #D6D6DD —
constant.language.symbol.elixir #D6D6DD —
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 } !` ;
}