Skip to main content
Home Theme VS Code CoffeeMojo Calm and Warm Color Themes for Visual Studio Code (Inspired by MonoDevelop)
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 #454340 activityBar.foreground #fd5d91 activityBar.inactiveForeground #fdca8a activityBarBadge.background #ff4783 activityBarBadge.foreground #ffffff badge.background #c4c4c4 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 #cba5a5 — variable.other.generic-type.haskell #d79540 — storage.type.haskell #bac993 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
CoffeeMojo — Strawberry Hazelnut Frappucino - Vanilla
badge.foreground
#333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #c0ab8f
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #fff0f0cc
button.background #ff8098
button.foreground #ffdada
button.hoverBackground #e64278
button.secondaryBackground #e2c19d
button.secondaryForeground #fff3e7
button.secondaryHoverBackground #db9f73
checkbox.background #ffffff
checkbox.border #00000000
checkbox.foreground #616161
debugExceptionWidget.background #f3f3f3
debugExceptionWidget.border #d5d5d5
debugToolBar.background #f3f3f3
debugToolBar.border #d5d5d5
diffEditor.border #d7d7d7
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #616161
editor.background #fff8de
editor.findMatchBackground #a8ac94
editor.findMatchBorder #979b83
editor.findMatchHighlightBackground #979b83
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #b4b4b44d
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #ffadee4d
editor.foreground #deb4a3
editor.hoverHighlightBackground #f7188b26
editor.inactiveSelectionBackground #f5e9bfa1
editor.lineHighlightBackground #ff6caa18
editor.lineHighlightBorder #ffc2d962
editor.rangeHighlightBackground #fdff0033
editor.rangeHighlightBorder #f028a200
editor.selectionBackground #ffe582a1
editor.selectionHighlightBackground #979b83
editor.selectionHighlightBorder #979b83
editor.wordHighlightBackground #0000001c
editor.wordHighlightBorder #a7a7a7
editor.wordHighlightStrongBackground #9c0e5740
editor.wordHighlightStrongBorder #ff009b
editorBracketMatch.background #a0fb5540
editorBracketMatch.border #c7e8a0
editorCodeLens.foreground #b6b6b6
editorCursor.background #ffffff
editorCursor.foreground #ffce3b
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #ff9bd8
editorGroup.border #ffb8d3
editorGroup.emptyBackground #fff8de
editorGroupHeader.tabsBackground #9f9180
editorGroupHeader.tabsBorder #ffffff
editorGutter.addedBackground #dff78b
editorGutter.background #ffe7d9
editorGutter.commentRangeForeground #ff4a9f
editorGutter.deletedBackground #ea0610
editorGutter.foldingControlForeground #ff4a9f
editorGutter.modifiedBackground #ffbbde
editorHoverWidget.background #ffede3
editorHoverWidget.border #ffdede
editorHoverWidget.foreground #b8a092
editorIndentGuide.activeBackground #ff699a
editorIndentGuide.background #ffc69daf
editorInfo.background #ffffff42
editorInfo.border #7cbde600
editorInfo.foreground #9afff1
editorLineNumber.activeForeground #ff156d
editorLineNumber.foreground #e2c287
editorLink.activeForeground #ff006c
editorMarkerNavigation.background #fff3dc
editorMarkerNavigationError.background #ff958b
editorMarkerNavigationInfo.background #fb81d7
editorMarkerNavigationWarning.background #ffe5a5
editorOverviewRuler.background #ff889e68
editorOverviewRuler.border #ff59c64d
editorRuler.foreground #ffdac4f5
editorSuggestWidget.background #f7dfd4
editorSuggestWidget.border #e4b3b3
editorSuggestWidget.foreground #ff6dab
editorSuggestWidget.highlightForeground #ff3464
editorSuggestWidget.selectedBackground #fd97bdc7
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #f5d992
editorWhitespace.foreground #ff266d33
editorWidget.background #ffecd7
editorWidget.foreground #616161
editorWidget.resizeBorder #ffca9c
focusBorder #ffe8d4
foreground #756d6d
gitDecoration.addedResourceForeground #adc95f
gitDecoration.conflictingResourceForeground #8cafd5
gitDecoration.deletedResourceForeground #fd7676
gitDecoration.ignoredResourceForeground #c2c2c2
gitDecoration.modifiedResourceForeground #f992d5
gitDecoration.stageDeletedResourceForeground #fd7676
gitDecoration.stageModifiedResourceForeground #f992d5
gitDecoration.submoduleResourceForeground #8cafd5
gitDecoration.untrackedResourceForeground #adc95f
icon.foreground #756d6d
input.background #ffffff
input.border #00000000
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #f1004433
inputOption.activeBorder #e888c726
inputOption.activeForeground #f082ab
list.activeSelectionBackground #c0ab8f
list.activeSelectionForeground #ffffff
list.dropBackground #f7dec8
list.focusBackground #d5bc9c
list.focusForeground #616161
list.highlightForeground #ad531d
list.hoverBackground #f2dbae
list.hoverForeground #616161
list.inactiveSelectionBackground #f7c896
list.inactiveSelectionForeground #616161
listFilterWidget.background #efc1ad
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #ffffff
menu.border #00000085
menu.foreground #616161
menu.selectionBackground #0060c0
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #888888
menubar.selectionBackground #0000001a
menubar.selectionForeground #333333
merge.commonContentBackground #ffe0c5
merge.commonHeaderBackground #fbd7b7
merge.currentContentBackground #f4dbdb
merge.currentHeaderBackground #e3a4a4
merge.incomingContentBackground #f9ffdb
merge.incomingHeaderBackground #ddf9c6
minimap.background #fff8de
minimap.errorHighlight #ff9bd8
minimap.findMatchHighlight #a8ac94
minimap.selectionHighlight #ffe582a1
minimap.warningHighlight #f5d992
minimapGutter.addedBackground #dff78b
minimapGutter.deletedBackground #ea0610
minimapGutter.modifiedBackground #ffbbde
notificationCenter.border #d5d5d5
notificationCenterHeader.background #4f4f4f
notificationCenterHeader.foreground #ffcba5
notifications.background #fff5e1
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #ff3061
notificationsInfoIcon.foreground #fd2978
notificationsWarningIcon.foreground #e90062
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #ffdfac
peekViewEditor.background #ffe7da
peekViewEditor.matchHighlightBackground #e7f0bcde
peekViewEditor.matchHighlightBorder #b9db17
peekViewEditorGutter.background #ffe2c9
peekViewResult.background #ffe7da
peekViewResult.fileForeground #a9876d
peekViewResult.lineForeground #807e77
peekViewResult.matchHighlightBackground #b5ff774d
peekViewResult.selectionBackground #ff09d94c
peekViewResult.selectionForeground #6d6d6d
peekViewTitle.background #ffa8c9
peekViewTitleDescription.foreground #ffd9cee6
peekViewTitleLabel.foreground #f5e0ca
pickerGroup.border #ffbae1
pickerGroup.foreground #db45a1
progressBar.background #ff3a8499
scrollbar.shadow #ffc1d8
scrollbarSlider.activeBackground #ff256299
scrollbarSlider.background #ffa3c166
scrollbarSlider.hoverBackground #ffacc7b3
selection.background #ffc9dd
settings.focusedRowBackground #ffffff07
settings.headerForeground #756d6d
sideBar.background #fff7e0
sideBar.dropBackground #f7dec8
sideBar.foreground #616161
sideBarSectionHeader.background #e2e2e23c
sideBarSectionHeader.border #61616130
sideBarSectionHeader.foreground #616161
sideBarTitle.foreground #6f6f6f
statusBar.background #a99988
statusBar.debuggingBackground #a99988
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffecd7
statusBar.noFolderBackground #a99988
statusBar.noFolderForeground #ffecd7
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ff1c6746
statusBarItem.remoteBackground #beb29f
statusBarItem.remoteForeground #ffecd7
tab.activeBackground #e0af7ba1
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #d7cdc1
tab.border #f3f3f3
tab.inactiveBackground #d7c4b3
tab.inactiveForeground #333333b3
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce14
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #00000040
terminalCursor.background #ff006c
terminalCursor.foreground #ffffff
textLink.foreground #ff69a8
titleBar.activeBackground #c0a994
titleBar.activeForeground #ffe5c5
titleBar.border #00000000
titleBar.inactiveBackground #dddddd99
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #a9a9a9
walkThrough.embeddedEditorBackground #00000050
widget.shadow #f71c8229 #cba5a5
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #deb4a3 —
variable.parameter.function.language.special.self.python #ffba98 —
storage.modifier.lifetime.rust #deb4a3 —
support.function.std.rust #ff0054 —
entity.name.lifetime.rust #ffba98 —
variable.language.rust #cba5a5 —
support.constant.edge #d79540 —
constant.other.character-class.regexp #cba5a5 —
keyword.operator.quantifier.regexp #bac993 —
punctuation.definition.string.begin,punctuation.definition.string.end #bac993 —
variable.parameter.function #deb4a3 —
comment markup.link #ff8383 —
markup.changed.diff #ffba98 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #ff0054 —
markup.inserted.diff #bac993 —
markup.deleted.diff #cba5a5 —
meta.function.c,meta.function.cpp #cba5a5 —
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 #deb4a3 —
punctuation.separator.key-value #deb4a3 —
keyword.operator.expression.import #ff0054 —
support.constant.math #ffba98 —
support.constant.property.math #bac993 —
variable.other.constant #ffba98 —
storage.type.annotation.java, storage.type.object.array.java #ffba98 —
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 #deb4a3 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ffba98 —
keyword.operator.instanceof.java #d79540 —
meta.definition.variable.name.java #cba5a5 —
keyword.operator.logical #f0a5dd —
keyword.operator.bitwise #f0a5dd —
keyword.operator.channel #f0a5dd —
support.constant.property-value.scss,support.constant.property-value.css #bac993 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #f0a5dd —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #bac993 —
punctuation.separator.list.comma.css #deb4a3 —
support.constant.color.w3c-standard-color-name.css #bac993 —
support.type.vendored.property-name.css #f0a5dd —
support.module.node,support.type.object.module,support.module.node #ffba98 —
entity.name.type.module #ffba98 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #cba5a5 —
support.constant.json #bac993 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #d79540 —
support.type.object.console #cba5a5 —
support.variable.property.process #bac993 —
entity.name.function,support.function.console #ff0054 —
keyword.operator.misc.rust #deb4a3 —
keyword.operator.sigil.rust #d79540 —
keyword.operator.delete #d79540 —
support.type.object.dom #f0a5dd —
support.variable.dom,support.variable.property.dom #cba5a5 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #f0a5dd —
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 #d79540 —
punctuation.separator.delimiter #deb4a3 —
punctuation.separator.c,punctuation.separator.cpp #d79540 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #f0a5dd —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #d79540 —
variable.parameter.function.language.python #bac993 —
support.type.python #f0a5dd —
keyword.operator.logical.python #d79540 —
variable.parameter.function.python #bac993 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #deb4a3 —
meta.function-call.generic.python #ff0054 —
constant.character.format.placeholder.other.python #bac993 —
keyword.operator.assignment.compound #d79540 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #f0a5dd —
entity.name.namespace #ffba98 —
variable.language #ffba98 —
token.variable.parameter.java #deb4a3 —
import.storage.java #ffba98 —
token.package.keyword #d79540 —
entity.name.function, meta.require, support.function.any-method, variable.function #ff0054 —
entity.name.type.namespace #ffba98 —
support.class, entity.name.type.class #ffba98 —
entity.name.class.identifier.namespace.type #ffba98 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ffba98 —
variable.other.class.php #cba5a5 —
control.elements, keyword.operator.less #bac993 —
keyword.other.special-method #ff0054 —
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 #d79540 —
token.storage.type.java #ffba98 —
support.type.property-name #deb4a3 —
support.constant.property-value #deb4a3 —
support.constant.font-name #bac993 —
entity.other.inherited-class #ffba98 —
constant.other.symbol #f0a5dd —
punctuation.definition.constant #bac993 —
entity.other.attribute-name #bac993 —
entity.other.attribute-name.id #ff0054 normal
entity.other.attribute-name.class.css #bac993 normal
markup.heading punctuation.definition.heading, entity.name.section #ff0054 —
keyword.other.unit #cba5a5 —
markup.bold,todo.bold #bac993 —
punctuation.definition.bold #ffba98 —
markup.italic, punctuation.definition.italic,todo.emphasis #d79540 —
entity.name.section.markdown #cba5a5 —
punctuation.definition.heading.markdown #cba5a5 —
punctuation.definition.list.begin.markdown #cba5a5 —
markup.heading.setext #deb4a3 —
punctuation.definition.bold.markdown #bac993 —
markup.inline.raw.markdown #bac993 —
markup.inline.raw.string.markdown #bac993 —
punctuation.definition.list.markdown #cba5a5 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #cba5a5 —
beginning.punctuation.definition.list.markdown #cba5a5 —
punctuation.definition.metadata.markdown #cba5a5 —
markup.underline.link.markdown,markup.underline.link.image.markdown #d79540 —
string.other.link.title.markdown,string.other.link.description.markdown #ff0054 —
constant.character.escape #f0a5dd —
punctuation.section.embedded, variable.interpolation #cba5a5 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #d79540 —
invalid.illegal.bad-ampersand.html #deb4a3 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #cba5a5 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #cba5a5 —
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 #bac993 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #f0a5dd —
support.type.property-name.json #cba5a5 —
support.type.property-name.json punctuation #cba5a5 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #d79540 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #d79540 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ffba98 —
keyword.operator.error-control.php #d79540 —
keyword.operator.type.php #d79540 —
punctuation.section.array.begin.php #deb4a3 —
punctuation.section.array.end.php #deb4a3 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ffba98 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #ff0054 —
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 #deb4a3 —
support.constant.core.rust #bac993 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #bac993 —
entity.name.goto-label.php,support.other.php #ff0054 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #f0a5dd —
keyword.operator.regexp.php #d79540 —
keyword.operator.comparison.php #f0a5dd —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #d79540 —
meta.function.decorator.python #ff0054 —
support.token.decorator.python,meta.function.decorator.identifier.python #f0a5dd —
function.parameter #deb4a3 —
function.parameter.ruby, function.parameter.cs #deb4a3 —
constant.language.symbol.ruby #f0a5dd —
inline-color-decoration rgb-value #bac993 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ffba98 —
block.scope.end,block.scope.begin #deb4a3 —
entity.name.variable.local.cs #cba5a5 —
token.error-token #f44747 —
token.debug-token #d79540 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #d79540 —
meta.template.expression #deb4a3 —
keyword.operator.module #d79540 —
support.type.type.flowtype #ff0054 —
support.type.primitive #ffba98 —
meta.property.object #cba5a5 —
variable.parameter.function.js #cba5a5 —
keyword.other.template.begin #bac993 —
keyword.other.template.end #bac993 —
keyword.other.substitution.begin #bac993 —
keyword.other.substitution.end #bac993 —
keyword.operator.assignment #f0a5dd —
keyword.operator.assignment.go #ffba98 —
keyword.operator.arithmetic.go, keyword.operator.address.go #d79540 —
entity.name.package.go #ffba98 —
support.type.prelude.elm #f0a5dd —
support.constant.elm #bac993 —
punctuation.quasi.element #d79540 —
constant.character.entity #cba5a5 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #f0a5dd —
entity.global.clojure #ffba98 —
meta.symbol.clojure #cba5a5 —
constant.keyword.clojure #f0a5dd —
meta.arguments.coffee, variable.parameter.function.coffee #cba5a5 —
meta.scope.prerequisites.makefile #cba5a5 —
storage.modifier.import.groovy #ffba98 —
meta.method.groovy #ff0054 —
meta.definition.variable.name.groovy #cba5a5 —
meta.definition.class.inherited.classes.groovy #bac993 —
support.variable.semantic.hlsl #ffba98 —
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 #d79540 —
text.variable, text.bracketed #cba5a5 —
support.type.swift, support.type.vb.asp #ffba98 —
entity.name.function.xi #ffba98 —
entity.name.class.xi #f0a5dd —
constant.character.character-class.regexp.xi #cba5a5 —
constant.regexp.xi #d79540 —
keyword.control.xi #f0a5dd —
beginning.punctuation.definition.quote.markdown.xi #bac993 —
beginning.punctuation.definition.list.markdown.xi #ff8383 —
constant.character.xi #ff0054 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #ff8383 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ffba98 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #cba5a5 —
meta.brace.square #deb4a3 —
comment, punctuation.definition.comment #ff8383 italic
markup.quote.markdown #ff8383 —
punctuation.definition.block.sequence.item.yaml #deb4a3 —
constant.language.symbol.elixir #f0a5dd —
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
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
fetchUser
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 } !` ;
}
CoffeeMojo | Coding Theme