Skip to main content
Home Theme VS Code Chiclete de uva | Theme Cute light theme, with purple, pink, light blue. Colors are kinda pastel, kinda vibrant (good to the eyes).
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.activeBackground #444444 activityBar.background #555555 activityBar.border #ffffff00 activityBar.foreground #c678dd activityBar.inactiveForeground #ffffff7c activityBarBadge.background #ff5786 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 #ff5786 — variable.other.generic-type.haskell #c678dd — storage.type.haskell #eeba1d — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Chiclete de uva | Theme — Chiclete de uva | Theme
activityBarBadge.foreground #ffffff
badge.background #c4c4c4
badge.foreground #333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #ffffff
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #616161cc
button.background #d383ea
button.foreground #ffffff
button.hoverBackground #b364cb
button.secondaryBackground #8a8a8a
button.secondaryForeground #ffffff
button.secondaryHoverBackground #808080
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 #ff000010
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #616161
editor.background #ffffff
editor.findMatchBackground #ffd7ad9f
editor.findMatchBorder #f0813078
editor.findMatchHighlightBackground #ea5c002c
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #b4b4b420
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #add6ff4d
editor.foreground #000000
editor.hoverHighlightBackground #add6ff4e
editor.inactiveSelectionBackground #e5ebf1
editor.lineHighlightBackground #ffffff0a
editor.lineHighlightBorder #eeeeee
editor.rangeHighlightBackground #cf22a42c
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #fbefff
editor.selectionHighlightBackground #f3caff9b
editor.selectionHighlightBorder #e2b7ee
editor.wordHighlightBackground #57575740
editor.wordHighlightStrongBackground #e281ff3a
editorBracketMatch.background #0064001a
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #c678dd
editorCursor.foreground #c678dd2c
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #ea5586
editorGroup.border #e7e7e7
editorGroup.emptyBackground #ffffff
editorGroupHeader.tabsBackground #f0d8f7
editorGroupHeader.tabsBorder #ffffff00
editorGutter.addedBackground #81b8ab
editorGutter.background #ffffff
editorGutter.commentRangeForeground #08b1f2
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #08b1f2
editorGutter.modifiedBackground #669be0
editorHoverWidget.background #f3f3f3
editorHoverWidget.border #c8c8c8
editorHoverWidget.foreground #616161
editorIndentGuide.activeBackground #c678ddcd
editorIndentGuide.background #d3d3d3
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #3bade4
editorLineNumber.foreground #b0b0b0
editorLink.activeForeground #cc26fd
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #c678dd
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #e9a700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #d3d3d3
editorSuggestWidget.background #f3f3f3
editorSuggestWidget.border #c8c8c8
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #bd62d7
editorSuggestWidget.selectedBackground #d6ebff
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #33333333
editorWidget.background #f3f3f3
editorWidget.foreground #616161
editorWidget.resizeBorder #c7c7c7
focusBorder #c678dd
foreground #616161
gitDecoration.addedResourceForeground #268077
gitDecoration.conflictingResourceForeground #ff4378
gitDecoration.deletedResourceForeground #b82828
gitDecoration.ignoredResourceForeground #8e8e90
gitDecoration.modifiedResourceForeground #14a7ff
gitDecoration.stageDeletedResourceForeground #a50c0c
gitDecoration.stageModifiedResourceForeground #009cf9
gitDecoration.submoduleResourceForeground #bc5ad9
gitDecoration.untrackedResourceForeground #1c8479
icon.foreground #616161
input.background #ffffff
input.border #00000000
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #dcacea
inputOption.activeBorder #007acc00
inputOption.activeForeground #000000
list.activeSelectionBackground #c678dd
list.activeSelectionForeground #ffffff
list.dropBackground #e5d1ec
list.focusBackground #f7dcff
list.focusForeground #616161
list.highlightForeground #942fb2
list.hoverBackground #e9bbf7c5
list.hoverForeground #363636
list.inactiveSelectionBackground #dfaceee5
list.inactiveSelectionForeground #8826a5
listFilterWidget.background #08b1f280
listFilterWidget.noMatchesOutline #ff5786
listFilterWidget.outline #08b1f2
menu.background #ffffff
menu.border #00000085
menu.foreground #616161
menu.selectionBackground #c678dd
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #888888
menubar.selectionBackground #0000001a
menubar.selectionForeground #333333
merge.commonContentBackground #e5e5e5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #ffffff
minimap.errorHighlight #ea5586
minimap.findMatchHighlight #ffd7ad9f
minimap.selectionHighlight #fbefff
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b8ab
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #669be0
notificationCenter.border #d5d5d5
notificationCenterHeader.background #e7e7e7
notificationCenterHeader.foreground #616161
notifications.background #f3f3f3
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #ff5786
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #c678dd
peekViewEditor.background #f2f8fc
peekViewEditor.matchHighlightBackground #ffd491de
peekViewEditor.matchHighlightBorder #ffac79
peekViewEditorGutter.background #f2f8fc
peekViewResult.background #f3f3f3
peekViewResult.fileForeground #1e1e1e
peekViewResult.lineForeground #646465
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #c678dd34
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #333333
pickerGroup.border #cccedb
pickerGroup.foreground #bc5ad9
progressBar.background #c678dd
scrollbar.shadow #dddddd
scrollbarSlider.activeBackground #9339b460
scrollbarSlider.background #d8b4e266
scrollbarSlider.hoverBackground #a356b678
selection.background #ffdaed
settings.focusedRowBackground #ffffff07
settings.headerForeground #616161
sideBar.background #f0d8f7
sideBar.border #c678dd28
sideBar.dropBackground #e5d1ec
sideBar.foreground #606060
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #61616130
sideBarSectionHeader.foreground #5a5a5a
sideBarTitle.foreground #9641b0
statusBar.background #c678dd
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #36c4d3
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #f0d8f7
tab.activeBorderTop #00000000
tab.activeForeground #333333
tab.border #e0c4e8
tab.inactiveBackground #f0d8f7
tab.inactiveForeground #333333b3
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce65
terminal.ansiBrightMagenta #e432e4
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #ff8f19
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc5b
terminal.ansiMagenta #ff2696
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #e68100
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #00000040
terminalCursor.background #c678dd
terminalCursor.foreground #ffffff
textLink.foreground #bc41e0
titleBar.activeBackground #c678dd
titleBar.activeForeground #333333
titleBar.border #00000000
titleBar.inactiveBackground #dddddd99
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #c678dd6a
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #ff5786
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #000000 —
variable.parameter.function.language.special.self.python #f08c4f —
storage.modifier.lifetime.rust #000000 —
support.function.std.rust #08b1f2 —
entity.name.lifetime.rust #f08c4f —
variable.language.rust #ff5786 —
support.constant.edge #c678dd —
constant.other.character-class.regexp #ff5786 —
keyword.operator.quantifier.regexp #eeba1d —
punctuation.definition.string.begin,punctuation.definition.string.end #44be8b —
variable.parameter.function #000000 —
comment markup.link #7f848e —
markup.changed.diff #f08c4f —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #08b1f2 —
markup.inserted.diff #44be8b —
markup.deleted.diff #ff5786 —
meta.function.c,meta.function.cpp #ff5786 —
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 #000000 —
punctuation.separator.key-value #000000 —
keyword.operator.expression.import #08b1f2 —
support.constant.math #f08c4f —
support.constant.property.math #eeba1d —
variable.other.constant #f08c4f —
storage.type.annotation.java, storage.type.object.array.java #f08c4f —
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 #000000 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #f08c4f —
keyword.operator.instanceof.java #c678dd —
meta.definition.variable.name.java #ff5786 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #eeba1d —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #eeba1d —
punctuation.separator.list.comma.css #000000 —
support.constant.color.w3c-standard-color-name.css #eeba1d —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #f08c4f —
entity.name.type.module #f08c4f —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff5786 —
support.constant.json #eeba1d —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #c678dd —
support.type.object.console #ff5786 —
support.variable.property.process #eeba1d —
entity.name.function,support.function.console #08b1f2 —
keyword.operator.misc.rust #000000 —
keyword.operator.sigil.rust #c678dd —
keyword.operator.delete #c678dd —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #ff5786 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #c678dd —
punctuation.separator.delimiter #000000 —
punctuation.separator.c,punctuation.separator.cpp #c678dd —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #c678dd —
variable.parameter.function.language.python #eeba1d —
support.type.python #56b6c2 —
keyword.operator.logical.python #c678dd —
variable.parameter.function.python #eeba1d —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #000000 —
meta.function-call.generic.python #08b1f2 —
constant.character.format.placeholder.other.python #eeba1d —
keyword.operator.assignment.compound #c678dd —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #f08c4f —
variable.language #f08c4f —
token.variable.parameter.java #000000 —
import.storage.java #f08c4f —
token.package.keyword #c678dd —
entity.name.function, meta.require, support.function.any-method, variable.function #08b1f2 —
entity.name.type.namespace #f08c4f —
support.class, entity.name.type.class #f08c4f —
entity.name.class.identifier.namespace.type #f08c4f —
entity.name.class, variable.other.class.js, variable.other.class.ts #f08c4f —
variable.other.class.php #ff5786 —
control.elements, keyword.operator.less #eeba1d —
keyword.other.special-method #08b1f2 —
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 #c678dd —
token.storage.type.java #f08c4f —
support.type.property-name #000000 —
support.constant.property-value #000000 —
support.constant.font-name #eeba1d —
entity.other.inherited-class #f08c4f —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #eeba1d —
entity.other.attribute-name #eeba1d —
entity.other.attribute-name.id #08b1f2 normal
entity.other.attribute-name.class.css #eeba1d normal
markup.heading punctuation.definition.heading, entity.name.section #08b1f2 —
keyword.other.unit #ff5786 —
markup.bold,todo.bold #eeba1d —
punctuation.definition.bold #f08c4f —
markup.italic, punctuation.definition.italic,todo.emphasis #c678dd —
entity.name.section.markdown #ff5786 —
punctuation.definition.heading.markdown #ff5786 —
punctuation.definition.list.begin.markdown #ff5786 —
markup.heading.setext #000000 —
punctuation.definition.bold.markdown #eeba1d —
markup.inline.raw.markdown #44be8b —
markup.inline.raw.string.markdown #44be8b —
punctuation.definition.list.markdown #ff5786 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff5786 —
beginning.punctuation.definition.list.markdown #ff5786 —
punctuation.definition.metadata.markdown #ff5786 —
markup.underline.link.markdown,markup.underline.link.image.markdown #c678dd —
string.other.link.title.markdown,string.other.link.description.markdown #08b1f2 —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #ff5786 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #c678dd —
invalid.illegal.bad-ampersand.html #000000 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff5786 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff5786 —
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 #44be8b —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #ff5786 —
support.type.property-name.json punctuation #ff5786 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #c678dd —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #c678dd —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #f08c4f —
keyword.operator.error-control.php #c678dd —
keyword.operator.type.php #c678dd —
punctuation.section.array.begin.php #000000 —
punctuation.section.array.end.php #000000 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #f08c4f —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #08b1f2 —
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 #000000 —
support.constant.core.rust #eeba1d —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #eeba1d —
entity.name.goto-label.php,support.other.php #08b1f2 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #c678dd —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #c678dd —
meta.function.decorator.python #08b1f2 —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #000000 —
function.parameter.ruby, function.parameter.cs #000000 —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #eeba1d —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #f08c4f —
block.scope.end,block.scope.begin #000000 —
entity.name.variable.local.cs #ff5786 —
token.error-token #f44747 —
token.debug-token #c678dd —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #c678dd —
meta.template.expression #000000 —
keyword.operator.module #c678dd —
support.type.type.flowtype #08b1f2 —
support.type.primitive #f08c4f —
meta.property.object #ff5786 —
variable.parameter.function.js #ff5786 —
keyword.other.template.begin #44be8b —
keyword.other.template.end #44be8b —
keyword.other.substitution.begin #44be8b —
keyword.other.substitution.end #44be8b —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #f08c4f —
keyword.operator.arithmetic.go, keyword.operator.address.go #c678dd —
entity.name.package.go #f08c4f —
support.type.prelude.elm #56b6c2 —
support.constant.elm #eeba1d —
punctuation.quasi.element #c678dd —
constant.character.entity #ff5786 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #f08c4f —
meta.symbol.clojure #ff5786 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #ff5786 —
meta.scope.prerequisites.makefile #ff5786 —
storage.modifier.import.groovy #f08c4f —
meta.method.groovy #08b1f2 —
meta.definition.variable.name.groovy #ff5786 —
meta.definition.class.inherited.classes.groovy #44be8b —
support.variable.semantic.hlsl #f08c4f —
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 #c678dd —
text.variable, text.bracketed #ff5786 —
support.type.swift, support.type.vb.asp #f08c4f —
entity.name.function.xi #f08c4f —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #ff5786 —
constant.regexp.xi #c678dd —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #44be8b —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #08b1f2 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #7f848e —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #f08c4f —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff5786 —
meta.brace.square #000000 —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #7f848e —
punctuation.definition.block.sequence.item.yaml #000000 —
constant.language.symbol.elixir #56b6c2 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
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 } !` ;
}
Chiclete de uva | Theme | Coding Theme