Skip to main content
Home Theme VS Code Capitola Capitola is a minimalist light theme with a gray background, terminal colors, and a beach vibe from the 90s. It's all about bringing joy and simplicity to your code.
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 #e4e4e4 activityBar.background #e4e4e4 activityBar.border #e4e4e4 activityBar.foreground #008787 activityBar.inactiveForeground #8a8a8a activityBarBadge.background #e4e4e4 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 #000000 — variable.other.generic-type.haskell #800080 — storage.type.haskell #000080 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#ff0000
badge.background #ffffff
badge.foreground #ff0000
breadcrumb.activeSelectionForeground #008787
breadcrumb.background #e4e4e4
breadcrumb.focusForeground #008787
breadcrumb.foreground #000000
button.background #008787
button.foreground #ffffff
button.hoverBackground #008787bf
button.secondaryBackground #444444
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4e4e4e
checkbox.background #ffffff
checkbox.border #ffffff
checkbox.foreground #000000
debugExceptionWidget.background #ffffff
debugExceptionWidget.border #000000
debugToolBar.background #ffffff
debugToolBar.border #000000
diffEditor.border #000000
diffEditor.insertedTextBackground #0087871c
diffEditor.insertedTextBorder #ff000000
diffEditor.removedTextBackground #9494941c
diffEditor.removedTextBorder #ff000000
dropdown.background #ffffff
dropdown.border #ffffff
dropdown.foreground #000000
editor.background #e4e4e4
editor.findMatchBackground #ffff00
editor.findMatchBorder #ffff00
editor.findMatchHighlightBackground #ffff00
editor.findMatchHighlightBorder #ffff00
editor.findRangeHighlightBackground #bcbcbc
editor.findRangeHighlightBorder #bcbcbc
editor.foldBackground #e4e4e4
editor.foreground #000000
editor.hoverHighlightBackground #bcbcbc
editor.inactiveSelectionBackground #dadada
editor.lineHighlightBackground #eeeeee
editor.lineHighlightBorder #eeeeee
editor.rangeHighlightBackground #bcbcbc
editor.rangeHighlightBorder #bcbcbc
editor.selectionBackground #bcbcbc
editor.selectionHighlightBackground #ffff00
editor.selectionHighlightBorder #ffff00
editor.wordHighlightBackground #bcbcbc
editor.wordHighlightBorder #bcbcbc
editor.wordHighlightStrongBackground #bcbcbc
editor.wordHighlightStrongBorder #dadada
editorBracketMatch.background #bcbcbc
editorBracketMatch.border #bcbcbc
editorCodeLens.foreground #949494
editorCursor.background #ffffff
editorCursor.foreground #000000
editorError.background #e4e4e4
editorError.border #e4e4e4
editorError.foreground #ff0000
editorGroup.border #000000
editorGroup.emptyBackground #e4e4e4
editorGroupHeader.border #e4e4e4
editorGroupHeader.tabsBackground #e4e4e4
editorGroupHeader.tabsBorder #e4e4e4
editorGutter.addedBackground #008787
editorGutter.background #e4e4e4
editorGutter.commentRangeForeground #000000
editorGutter.deletedBackground #949494
editorGutter.foldingControlForeground #000000
editorGutter.modifiedBackground #800080
editorHoverWidget.background #ffffff
editorHoverWidget.border #000000
editorHoverWidget.foreground #000000
editorIndentGuide.activeBackground #949494
editorIndentGuide.background #949494
editorInfo.background #e4e4e4
editorInfo.border #e4e4e4
editorInfo.foreground #767676
editorLineNumber.activeForeground #00d7d7
editorLineNumber.foreground #949494
editorLink.activeForeground #0000ff
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #000000
editorMarkerNavigationInfo.background #000000
editorMarkerNavigationWarning.background #000000
editorOverviewRuler.background #c6c6c6
editorOverviewRuler.border #c6c6c6
editorRuler.foreground #949494
editorSuggestWidget.background #ffffff
editorSuggestWidget.border #000000
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #0000ff
editorSuggestWidget.selectedBackground #00d7d7
editorWarning.background #e4e4e4
editorWarning.border #e4e4e4
editorWarning.foreground #d7af00
editorWhitespace.foreground #949494
editorWidget.background #ffffff
editorWidget.foreground #000000
editorWidget.resizeBorder #000000
focusBorder #00d7d7
foreground #000000
gitDecoration.addedResourceForeground #008787
gitDecoration.conflictingResourceForeground #ff0000
gitDecoration.deletedResourceForeground #949494
gitDecoration.ignoredResourceForeground #bcbcbc
gitDecoration.modifiedResourceForeground #800080
gitDecoration.stageDeletedResourceForeground #949494
gitDecoration.stageModifiedResourceForeground #800080
gitDecoration.submoduleResourceForeground #0000ff
gitDecoration.untrackedResourceForeground #008787
icon.foreground #000000
input.background #ffffff
input.border #ffffff
input.foreground #000000
input.placeholderForeground #626262
inputOption.activeBackground #00d7d7
inputOption.activeBorder #00d7d7
inputOption.activeForeground #000000
list.activeSelectionBackground #00d7d7
list.activeSelectionForeground #000000
list.dropBackground #bcbcbc
list.focusBackground #00d7d7
list.focusForeground #000000
list.highlightForeground #008787
list.hoverBackground #bcbcbc
list.hoverForeground #000000
list.inactiveSelectionBackground #00d7d7
list.inactiveSelectionForeground #000000
listFilterWidget.background #ffff00
listFilterWidget.noMatchesOutline #ffff00
listFilterWidget.outline #ffff00
menu.background #ffffff
menu.border #000000
menu.foreground #000000
menu.selectionBackground #00d7d7
menu.selectionBorder #00d7d7
menu.selectionForeground #000000
menu.separatorBackground #000000
menubar.selectionBackground #00d7d7
menubar.selectionBorder #00d7d7
menubar.selectionForeground #000000
merge.commonContentBackground #e4e4e4
merge.commonHeaderBackground #ffffff
merge.currentContentBackground #e4e4e4
merge.currentHeaderBackground #ffffff
merge.incomingContentBackground #e4e4e4
merge.incomingHeaderBackground #ffffff
minimap.background #e4e4e4
minimap.errorHighlight #ff0000
minimap.findMatchHighlight #ffff00
minimap.selectionHighlight #bcbcbc
minimap.warningHighlight #d7af00
minimapGutter.addedBackground #008787
minimapGutter.deletedBackground #949494
minimapGutter.modifiedBackground #800080
notificationCenter.border #ffffff
notificationCenterHeader.background #ffffff
notificationCenterHeader.foreground #000000
notifications.background #ffffff
notifications.border #ffffff
notifications.foreground #000000
notificationsErrorIcon.foreground #ff0000
notificationsInfoIcon.foreground #767676
notificationsWarningIcon.foreground #d7af00
notificationToast.border #ffffff
panel.background #ffffff
panel.border #000000
panelSection.border #000000
panelTitle.activeBorder #00d7d7
panelTitle.activeForeground #008787
panelTitle.inactiveForeground #000000
peekView.border #000000
peekViewEditor.background #ffffff
peekViewEditor.matchHighlightBackground #ffff00
peekViewEditor.matchHighlightBorder #ffff00
peekViewEditorGutter.background #ffffff
peekViewResult.background #ffffff
peekViewResult.fileForeground #000000
peekViewResult.lineForeground #000000
peekViewResult.matchHighlightBackground #ffffff
peekViewResult.selectionBackground #00d7d7
peekViewResult.selectionForeground #000000
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #000000
peekViewTitleLabel.foreground #000000
pickerGroup.border #00d7d7
pickerGroup.foreground #0000ff
progressBar.background #00d7d7
scrollbar.shadow #e4e4e4
scrollbarSlider.activeBackground #bcbcbc
scrollbarSlider.background #c6c6c6
scrollbarSlider.hoverBackground #d0d0d0
selection.background #00d7d7
settings.focusedRowBackground #ffffff07
settings.headerForeground #000000
sideBar.background #e4e4e4
sideBar.border #e4e4e4
sideBar.dropBackground #bcbcbc
sideBar.foreground #000000
sideBarSectionHeader.background #e4e4e4
sideBarSectionHeader.border #e4e4e4
sideBarSectionHeader.foreground #000000
sideBarTitle.foreground #000000
statusBar.background #e4e4e4
statusBar.border #e4e4e4
statusBar.debuggingBackground #e4e4e4
statusBar.debuggingBorder #e4e4e4
statusBar.debuggingForeground #000000
statusBar.foreground #000000
statusBar.noFolderBackground #e4e4e4
statusBar.noFolderBorder #e4e4e4
statusBar.noFolderForeground #000000
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #e4e4e4
statusBarItem.remoteBackground #008787
statusBarItem.remoteForeground #ffffff
tab.activeBackground #e4e4e4
tab.activeBorder #00d7d7
tab.activeBorderTop #e4e4e4
tab.activeForeground #008787
tab.border #e4e4e4
tab.hoverBackground #bcbcbc
tab.hoverBorder #bcbcbc
tab.hoverForeground #000000
tab.inactiveBackground #e4e4e4
tab.inactiveForeground #000000
terminal.ansiBlack #000000
terminal.ansiBlue #0000ff
terminal.ansiBrightBlack #444444
terminal.ansiBrightBlue #005fff
terminal.ansiBrightCyan #00d7af
terminal.ansiBrightGreen #00d700
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a8a8a8
terminal.ansiBrightYellow #d7af00
terminal.ansiCyan #00af87
terminal.ansiGreen #00af00
terminal.ansiMagenta #8b008b
terminal.ansiRed #8b0000
terminal.ansiWhite #949494
terminal.ansiYellow #d78700
terminal.border #000000
terminal.foreground #000000
terminal.selectionBackground #dadada7c
terminalCursor.background #000000
terminalCursor.foreground #ffffff
textLink.foreground #0000ff
titleBar.activeBackground #e4e4e4
titleBar.activeForeground #000000
titleBar.border #e4e4e4
titleBar.inactiveBackground #e4e4e4
titleBar.inactiveForeground #000000
tree.indentGuidesStroke #626262
walkThrough.embeddedEditorBackground #00000050
widget.shadow #e4e4e4 #000000
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #000000 —
variable.parameter.function.language.special.self.python #008080 —
storage.modifier.lifetime.rust #000000 —
support.function.std.rust #008080 —
entity.name.lifetime.rust #008080 —
variable.language.rust #000000 —
support.constant.edge #800080 —
constant.other.character-class.regexp #000000 —
keyword.operator.quantifier.regexp #000080 —
punctuation.definition.string.begin,punctuation.definition.string.end #ff0000 —
variable.parameter.function #000000 —
comment markup.link #808080 —
markup.changed.diff #008080 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #008080 —
markup.inserted.diff #ff0000 —
markup.deleted.diff #000000 —
meta.function.c,meta.function.cpp #000000 —
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 #008080 —
support.constant.math #008080 —
support.constant.property.math #000080 —
variable.other.constant #008080 —
storage.type.annotation.java, storage.type.object.array.java #008080 —
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 #008080 —
keyword.operator.instanceof.java #800080 —
meta.definition.variable.name.java #000000 —
keyword.operator.logical #000000 —
keyword.operator.bitwise #000000 —
keyword.operator.channel #000000 —
support.constant.property-value.scss,support.constant.property-value.css #000080 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #000000 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #000080 —
punctuation.separator.list.comma.css #000000 —
support.constant.color.w3c-standard-color-name.css #000080 —
support.type.vendored.property-name.css #000000 —
support.module.node,support.type.object.module,support.module.node #008080 —
entity.name.type.module #008080 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #000000 —
support.constant.json #000080 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #800080 —
support.type.object.console #000000 —
support.variable.property.process #000080 —
entity.name.function,support.function.console #008080 —
keyword.operator.misc.rust #000000 —
keyword.operator.sigil.rust #800080 —
keyword.operator.delete #800080 —
support.type.object.dom #000000 —
support.variable.dom,support.variable.property.dom #000000 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #000000 —
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 #800080 —
punctuation.separator.delimiter #000000 —
punctuation.separator.c,punctuation.separator.cpp #800080 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #000000 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #800080 —
variable.parameter.function.language.python #000080 —
support.type.python #000000 —
keyword.operator.logical.python #800080 —
variable.parameter.function.python #000080 —
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 #008080 —
constant.character.format.placeholder.other.python #000080 —
keyword.operator.assignment.compound #800080 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #000000 —
entity.name.namespace #008080 —
variable.language #008080 —
token.variable.parameter.java #000000 —
import.storage.java #008080 —
token.package.keyword #800080 —
entity.name.function, meta.require, support.function.any-method, variable.function #008080 —
entity.name.type.namespace #008080 —
support.class, entity.name.type.class #008080 —
entity.name.class.identifier.namespace.type #008080 —
entity.name.class, variable.other.class.js, variable.other.class.ts #008080 —
variable.other.class.php #000000 —
control.elements, keyword.operator.less #000080 —
keyword.other.special-method #008080 —
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 #800080 —
token.storage.type.java #008080 —
support.type.property-name #000000 —
support.constant.property-value #000000 —
support.constant.font-name #000080 —
entity.other.inherited-class #008080 —
constant.other.symbol #000000 —
punctuation.definition.constant #000080 —
entity.other.attribute-name #000080 —
entity.other.attribute-name.id #008080 normal
entity.other.attribute-name.class.css #000080 normal
markup.heading punctuation.definition.heading, entity.name.section #008080 —
keyword.other.unit #000000 —
markup.bold,todo.bold #000080 —
punctuation.definition.bold #008080 —
markup.italic, punctuation.definition.italic,todo.emphasis #800080 —
entity.name.section.markdown #000000 —
punctuation.definition.heading.markdown #000000 —
punctuation.definition.list.begin.markdown #000000 —
markup.heading.setext #000000 —
punctuation.definition.bold.markdown #000080 —
markup.inline.raw.markdown #ff0000 —
markup.inline.raw.string.markdown #ff0000 —
punctuation.definition.list.markdown #000000 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #000000 —
beginning.punctuation.definition.list.markdown #000000 —
punctuation.definition.metadata.markdown #000000 —
markup.underline.link.markdown,markup.underline.link.image.markdown #800080 —
string.other.link.title.markdown,string.other.link.description.markdown #008080 —
constant.character.escape #000000 —
punctuation.section.embedded, variable.interpolation #000000 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #800080 —
invalid.illegal.bad-ampersand.html #000000 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #000000 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #000000 —
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 #ff0000 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #000000 —
support.type.property-name.json #000000 —
support.type.property-name.json punctuation #000000 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #800080 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #800080 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #008080 —
keyword.operator.error-control.php #800080 —
keyword.operator.type.php #800080 —
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 #008080 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #008080 —
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 #000080 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #000080 —
entity.name.goto-label.php,support.other.php #008080 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #000000 —
keyword.operator.regexp.php #800080 —
keyword.operator.comparison.php #000000 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #800080 —
meta.function.decorator.python #008080 —
support.token.decorator.python,meta.function.decorator.identifier.python #000000 —
function.parameter #000000 —
function.parameter.ruby, function.parameter.cs #000000 —
constant.language.symbol.ruby #000000 —
inline-color-decoration rgb-value #000080 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #008080 —
block.scope.end,block.scope.begin #000000 —
entity.name.variable.local.cs #000000 —
token.error-token #f44747 —
token.debug-token #800080 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #800080 —
meta.template.expression #000000 —
keyword.operator.module #800080 —
support.type.type.flowtype #008080 —
support.type.primitive #008080 —
meta.property.object #000000 —
variable.parameter.function.js #000000 —
keyword.other.template.begin #ff0000 —
keyword.other.template.end #ff0000 —
keyword.other.substitution.begin #ff0000 —
keyword.other.substitution.end #ff0000 —
keyword.operator.assignment #000000 —
keyword.operator.assignment.go #008080 —
keyword.operator.arithmetic.go, keyword.operator.address.go #800080 —
entity.name.package.go #008080 —
support.type.prelude.elm #000000 —
support.constant.elm #000080 —
punctuation.quasi.element #800080 —
constant.character.entity #000000 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #000000 —
entity.global.clojure #008080 —
meta.symbol.clojure #000000 —
constant.keyword.clojure #000000 —
meta.arguments.coffee, variable.parameter.function.coffee #000000 —
meta.scope.prerequisites.makefile #000000 —
storage.modifier.import.groovy #008080 —
meta.method.groovy #008080 —
meta.definition.variable.name.groovy #000000 —
meta.definition.class.inherited.classes.groovy #ff0000 —
support.variable.semantic.hlsl #008080 —
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 #800080 —
text.variable, text.bracketed #000000 —
support.type.swift, support.type.vb.asp #008080 —
entity.name.function.xi #008080 —
entity.name.class.xi #000000 —
constant.character.character-class.regexp.xi #000000 —
constant.regexp.xi #800080 —
keyword.control.xi #000000 —
beginning.punctuation.definition.quote.markdown.xi #ff0000 —
beginning.punctuation.definition.list.markdown.xi #808080 —
constant.character.xi #008080 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #808080 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #008080 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #000000 —
meta.brace.square #000000 —
comment, punctuation.definition.comment #808080 normal
markup.quote.markdown #808080 —
punctuation.definition.block.sequence.item.yaml #000000 —
constant.language.symbol.elixir #000000 —
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 — normal
comment.line.double-slash,comment.block.documentation — normal
keyword.control.import.python,keyword.control.flow.python — normal
markup.italic.markdown — normal
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
~/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 } !` ;
}
Capitola | Coding Theme