Skip to main content
Serenade | Coding Theme
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.activeBorder #bfddb2 activityBar.activeFocusBorder #bfddb2 activityBar.background #2a2f33 activityBar.border #3F464B activityBar.foreground #bfddb2 activityBar.inactiveForeground #7f868c tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle storage.type.function.arrow, keyword.other.arrow — keyword, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface, storage.type.property, keyword.operator.new, keyword.operator.expression, keyword.operator.new, keyword.operator.delete, storage.type.extends #E68183 — keyword.other.debugger #E68183 — storage, modifier, keyword.var, entity.name.tag, keyword.control.case, keyword.control.switch #E39B7B —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background
#acb765
activityBarBadge.foreground #2a2f33
badge.background #acb765
badge.foreground #2a2f33
breadcrumb.activeSelectionForeground #bfddb2
breadcrumb.focusForeground #bfddb2
breadcrumb.foreground #7f868c
button.background #acb765
button.foreground #2a2f33
button.hoverBackground #acb765a0
checkbox.background #2a2f33
checkbox.border #373d41
checkbox.foreground #e5a46b
debugToolBar.background #2a2f33
diffEditor.insertedTextBackground #acb76530
diffEditor.removedTextBackground #d76e6e30
dropdown.background #2a2f33
dropdown.border #373d41
dropdown.foreground #bfddb2
editor.background #2a2f33
editor.findMatchBackground #3F464B
editor.findMatchHighlightBackground #3F464B
editor.findRangeHighlightBackground #3F464B
editor.foreground #bfddb2
editor.hoverHighlightBackground #3F464Bc0
editor.lineHighlightBackground #2e3338b0
editor.lineHighlightBorder #31363b00
editor.rangeHighlightBackground #3F464B
editor.selectionBackground #3F464B
editor.selectionHighlightBackground #3f464bc0
editor.snippetFinalTabstopHighlightBackground #e5a46b40
editor.snippetFinalTabstopHighlightBorder #2a2f33
editor.snippetTabstopHighlightBackground #373d41a0
editor.symbolHighlightBackground #31363ba0
editor.wordHighlightBackground #31363ba0
editor.wordHighlightStrongBackground #31363ba0
editorBracketMatch.background #3f464bc0
editorBracketMatch.border #2a2f3300
editorCodeLens.foreground #7f868c
editorCursor.foreground #bfddb2
editorError.foreground #d76e6e
editorGroup.border #373d41
editorGroup.dropBackground #2e333860
editorGroupHeader.noTabsBackground #2a2f33
editorGroupHeader.tabsBackground #2a2f33
editorGutter.addedBackground #acb76568
editorGutter.background #2a2f3300
editorGutter.deletedBackground #d76e6e68
editorGutter.modifiedBackground #82abbc68
editorHint.foreground #acb765
editorHoverWidget.background #2e3338
editorHoverWidget.border #373d41
editorIndentGuide.activeBackground #373d41
editorIndentGuide.background #373d4180
editorInfo.foreground #82abbc
editorLightBulb.foreground #c1bf89
editorLightBulbAutoFix.foreground #acb765
editorLineNumber.activeForeground #7f868c
editorLineNumber.foreground #7f868ca0
editorLink.activeForeground #acb765
editorMarkerNavigation.background #2e3338
editorMarkerNavigationError.background #d76e6e
editorMarkerNavigationInfo.background #87c095
editorMarkerNavigationWarning.background #c1bf89
editorOverviewRuler.addedForeground #acb76580
editorOverviewRuler.border #2a2f3300
editorOverviewRuler.commonContentForeground #7f868c
editorOverviewRuler.currentContentForeground #82abbc
editorOverviewRuler.deletedForeground #d76e6e80
editorOverviewRuler.errorForeground #d76e6e
editorOverviewRuler.findMatchForeground #3f464b
editorOverviewRuler.incomingContentForeground #acb765
editorOverviewRuler.infoForeground #82abbc
editorOverviewRuler.modifiedForeground #82abbc80
editorOverviewRuler.rangeHighlightForeground #3f464b
editorOverviewRuler.selectionHighlightForeground #3f464b
editorOverviewRuler.warningForeground #c1bf89
editorOverviewRuler.wordHighlightForeground #3f464b
editorOverviewRuler.wordHighlightStrongForeground #3f464b
editorRuler.foreground #3f464b
editorSuggestWidget.background #414d53
editorSuggestWidget.border #414d53
editorSuggestWidget.foreground #bfddb2
editorSuggestWidget.highlightForeground #acb765
editorSuggestWidget.selectedBackground #373d41
editorUnnecessaryCode.border #7f868c
editorUnnecessaryCode.opacity #ffffff
editorWarning.foreground #c1bf89
editorWhitespace.foreground #3f464b
editorWidget.background #2a2f33
editorWidget.border #373d41
errorForeground #d76e6e
extensionBadge.remoteBackground #acb765
extensionBadge.remoteForeground #2a2f33
extensionButton.prominentBackground #acb765
extensionButton.prominentForeground #2a2f33
extensionButton.prominentHoverBackground #acb765c0
focusBorder #31363b00
foreground #bfddb2
gitDecoration.addedResourceForeground #acb765a0
gitDecoration.conflictingResourceForeground #d39bb6a0
gitDecoration.deletedResourceForeground #d76e6ea0
gitDecoration.ignoredResourceForeground #3f464b
gitDecoration.modifiedResourceForeground #82abbca0
gitDecoration.submoduleResourceForeground #e5a46ba0
gitDecoration.untrackedResourceForeground #c1bf89a0
icon.foreground #87c095
imagePreview.border #2a2f33
input.background #2a2f3300
input.border #373d41
input.foreground #bfddb2
input.placeholderForeground #7f868c
inputOption.activeBorder #87c095
inputValidation.errorBackground #2e3338
inputValidation.errorBorder #d76e6e
inputValidation.errorForeground #d76e6e
inputValidation.infoBackground #2e3338
inputValidation.infoBorder #82abbc
inputValidation.infoForeground #82abbc
inputValidation.warningBackground #2e3338
inputValidation.warningBorder #c1bf89
inputValidation.warningForeground #c1bf89
list.activeSelectionBackground #2e3338c0
list.activeSelectionForeground #bfddb2
list.dropBackground #2e333880
list.errorForeground #d76e6e
list.focusBackground #2e333880
list.focusForeground #bfddb2
list.highlightForeground #acb765
list.hoverBackground #2a2f3300
list.hoverForeground #bfddb2
list.inactiveFocusBackground #2e333868
list.inactiveSelectionBackground #2e3338a0
list.inactiveSelectionForeground #7f868c
list.invalidItemForeground #3f464b
list.warningForeground #c1bf89
menu.background #2a2f33
menu.foreground #bfddb2
menu.selectionBackground #2e3338
menu.selectionForeground #bfddb2
menubar.selectionBackground #2a2f33
menubar.selectionBorder #2a2f33
merge.border #2a2f3300
merge.currentContentBackground #82abbc30
merge.currentHeaderBackground #82abbc60
merge.incomingContentBackground #acb76530
merge.incomingHeaderBackground #acb76560
minimap.errorHighlight #d76e6e30
minimap.findMatchHighlight #87c09530
minimap.selectionHighlight #3f464b80
minimap.warningHighlight #c1bf8930
minimapGutter.addedBackground #acb76580
minimapGutter.deletedBackground #d76e6e80
minimapGutter.modifiedBackground #82abbc80
notificationCenterHeader.background #414d53
notificationCenterHeader.foreground #bfddb2
notificationLink.foreground #acb765
notifications.background #2a2f33
notifications.foreground #bfddb2
notificationsErrorIcon.foreground #d76e6e
notificationsInfoIcon.foreground #82abbc
notificationsWarningIcon.foreground #c1bf89
panel.background #2a2f33
panel.border #3F464B
panelInput.border #373d41
panelTitle.activeBorder #bfddb2
panelTitle.activeForeground #bfddb2
panelTitle.inactiveForeground #7f868c
peekView.border #31363b
peekViewEditor.background #2e3338
peekViewEditor.matchHighlightBackground #e5a46b80
peekViewEditorGutter.background #2e3338
peekViewResult.background #2e3338
peekViewResult.fileForeground #bfddb2
peekViewResult.matchHighlightBackground #e5a46b80
peekViewResult.selectionBackground #31363b
peekViewTitle.background #31363b
peekViewTitleDescription.foreground #7f868c
peekViewTitleLabel.foreground #bfddb2
pickerGroup.border #bfddb21a
problemsErrorIcon.foreground #d76e6e
problemsInfoIcon.foreground #82abbc
problemsWarningIcon.foreground #c1bf89
progressBar.background #acb765
scrollbar.shadow #00000070
scrollbarSlider.activeBackground #3f464b
scrollbarSlider.background #373d41a0
scrollbarSlider.hoverBackground #373d41
selection.background #373d41f0
settings.checkboxBackground #2a2f33
settings.checkboxBorder #373d41
settings.checkboxForeground #e5a46b
settings.dropdownBackground #2a2f33
settings.dropdownBorder #373d41
settings.dropdownForeground #87c095
settings.headerForeground #bfddb2
settings.numberInputBackground #2a2f33
settings.numberInputBorder #373d41
settings.numberInputForeground #d39bb6
settings.textInputBackground #2a2f33
settings.textInputBorder #373d41
settings.textInputForeground #82abbc
sideBar.background #2a2f33
sideBar.border #3F464B
sideBar.foreground #7f868c
sideBarSectionHeader.background #2a2f3300
sideBarSectionHeader.border #3F464B
sideBarSectionHeader.foreground #7f868c
sideBarTitle.foreground #7f868c
statusBar.background #31363B
statusBar.border #2a2f33
statusBar.debuggingBackground #d76e6e
statusBar.debuggingBorder #d76e6e
statusBar.debuggingForeground #2a2f33
statusBar.foreground #bfddb2
statusBar.noFolderBackground #2a2f33
statusBar.noFolderBorder #2a2f33
statusBar.noFolderForeground #bfddb2
statusBarItem.activeBackground #373d4170
statusBarItem.hoverBackground #373d41a0
statusBarItem.remoteBackground #acb765
statusBarItem.remoteForeground #2a2f33
symbolIcon.arrayForeground #82abbc
symbolIcon.booleanForeground #d39bb6
symbolIcon.classForeground #c1bf89
symbolIcon.colorForeground #bfddb2
symbolIcon.constantForeground #87c095
symbolIcon.constructorForeground #d39bb6
symbolIcon.enumeratorForeground #d39bb6
symbolIcon.enumeratorMemberForeground #87c095
symbolIcon.eventForeground #c1bf89
symbolIcon.fieldForeground #bfddb2
symbolIcon.fileForeground #bfddb2
symbolIcon.folderForeground #bfddb2
symbolIcon.functionForeground #acb765
symbolIcon.interfaceForeground #c1bf89
symbolIcon.keyForeground #acb765
symbolIcon.keywordForeground #d76e6e
symbolIcon.methodForeground #acb765
symbolIcon.moduleForeground #d39bb6
symbolIcon.namespaceForeground #d39bb6
symbolIcon.nullForeground #87c095
symbolIcon.numberForeground #d39bb6
symbolIcon.objectForeground #d39bb6
symbolIcon.operatorForeground #e5a46b
symbolIcon.packageForeground #d39bb6
symbolIcon.propertyForeground #87c095
symbolIcon.referenceForeground #82abbc
symbolIcon.snippetForeground #bfddb2
symbolIcon.stringForeground #acb765
symbolIcon.structForeground #c1bf89
symbolIcon.textForeground #bfddb2
symbolIcon.typeParameterForeground #87c095
symbolIcon.unitForeground #bfddb2
symbolIcon.variableForeground #82abbc
tab.activeBackground #2a2f33
tab.activeBorder #bfddb2
tab.activeForeground #bfddb2
tab.border #2a2f33
tab.hoverBackground #2a2f33
tab.inactiveBackground #2a2f33
tab.inactiveForeground #7f868c
tab.unfocusedActiveBorder #2a2f3300
tab.unfocusedActiveForeground #bfddb2
tab.unfocusedInactiveForeground #7f868c
terminal.ansiBlack #888888
terminal.ansiBlue #82abbc
terminal.ansiBrightBlack #aaaaaa
terminal.ansiBrightBlue #a7c4d0
terminal.ansiBrightCyan #abd2b4
terminal.ansiBrightGreen #c4cc93
terminal.ansiBrightMagenta #e0b8cb
terminal.ansiBrightRed #e39999
terminal.ansiBrightWhite #bfddb2
terminal.ansiBrightYellow #d3d2ac
terminal.ansiCyan #87c095
terminal.ansiGreen #acb765
terminal.ansiMagenta #d39bb6
terminal.ansiRed #d76e6e
terminal.ansiWhite #bfddb2
terminal.ansiYellow #c1bf89
terminal.foreground #bfddb2
terminalCursor.foreground #bfddb2
textBlockQuote.background #2e3338
textBlockQuote.border #3f464b
textCodeBlock.background #2e3338
textLink.activeForeground #acb765a0
textLink.foreground #acb765
titleBar.activeBackground #2a2f33
titleBar.activeForeground #bfddb2
titleBar.border #2a2f33
titleBar.inactiveBackground #2a2f33
titleBar.inactiveForeground #7f868c
tree.indentGuidesStroke #373d41
welcomePage.buttonBackground #31363bb0
welcomePage.buttonHoverBackground #31363b70
widget.shadow #00000070 string, punctuation.definition.string.end, punctuation.definition.string.begin, punctuation.definition.string.template.begin, punctuation.definition.string.template.end #D9BB80 —
entity.other.attribute-name #D9BB80 —
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, constant.other.placeholder, variable.interpolation #A7C080 —
entity.name.function, support.function, meta.function, meta.function-call, entity.name.function, meta.definition.method #A7C080 —
keyword.control.at-rule, keyword.control.import, keyword.control.export, storage.type.namespace, punctuation.decorator, keyword.control.directive, keyword.preprocessor, punctuation.definition.preprocessor, punctuation.definition.directive, keyword.other.import, keyword.other.package, entity.name.type.namespace, entity.name.scope-resolution, keyword.other.using, keyword.package, keyword.import, keyword.map #87C095 —
storage.type.annotation #87C095 —
entity.name.label, constant.other.label #87C095 —
support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module #87C095 —
storage.type, support.type, entity.name.type, keyword.type #83B6AF —
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class #83B6AF —
constant.language.boolean #D39BB6 —
entity.name.function.preprocessor #D39BB6 —
variable.language.this, variable.language.self, variable.language.super, keyword.other.this, variable.language.special, constant.language.null, constant.language.undefined, constant.language.nan #D39BB6 —
constant.language, support.constant #D39BB6 —
variable, support.variable, meta.definition.variable #D8CAAC —
variable.object.property, support.variable.property, variable.other.property, variable.other.object.property, variable.other.enummember, variable.other.member, meta.object-literal.key #D8CAAC —
punctuation, meta.brace, meta.delimiter, meta.bracket #D8CAAC —
heading.1.markdown, markup.heading.setext.1.markdown #E68183 bold
heading.2.markdown, markup.heading.setext.2.markdown #E39B7B bold
heading.3.markdown #D9BB80 bold
heading.4.markdown #A7C080 bold
heading.5.markdown #83B6AF bold
heading.6.markdown #D39BB6 bold
punctuation.definition.heading.markdown #868D80
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown #D39BB6
markup.underline.link.image.markdown, markup.underline.link.markdown #A7C080 underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown #868D80 —
punctuation.definition.bold.markdown #868D80
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown #868D80 bold
markup.bold markup.italic, markup.italic markup.bold — italic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown #D9BB80 —
fenced_code.block.language #D9BB80 —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown #A7C080 —
punctuation.definition.list.begin.markdown #E68183 —
punctuation.definition.function.latex, punctuation.definition.function.tex, punctuation.definition.keyword.latex, constant.character.newline.tex, punctuation.definition.keyword.tex #868D80 —
support.function.be.latex #E68183 —
support.function.section.latex, keyword.control.table.cell.latex, keyword.control.table.newline.latex #E39B7B —
support.class.latex, variable.parameter.latex, variable.parameter.function.latex, variable.parameter.definition.label.latex, constant.other.reference.label.latex #D9BB80 —
keyword.control.preamble.latex #D39BB6 —
punctuation.separator.namespace.xml #868D80 —
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml #E39B7B —
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml #D9BB80 —
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html #A7C080 —
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml #D39BB6 —
storage.type.proto #D9BB80 —
string.quoted.double.proto.syntax, string.quoted.single.proto.syntax, string.quoted.double.proto, string.quoted.single.proto #A7C080 —
entity.name.class.proto, entity.name.class.message.proto #87C095 —
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css #868D80 —
entity.other.attribute-name.class.css #E68183 —
keyword.other.unit #E39B7B —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #D9BB80 —
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css #A7C080 —
support.type.property-name.css #87C095 —
support.type.vendored.property-name.css #83B6AF —
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css #D39BB6 —
punctuation.definition.keyword.scss, punctuation.separator.key-value.scss #868D80 —
keyword.control.at-rule.keyframes.scss #E39B7B —
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss #D9BB80 —
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, string.quoted.double.scss, string.quoted.single.scss, constant.character.css.sass, meta.property-value.scss #A7C080 —
keyword.control.at-rule.include.scss, keyword.control.at-rule.use.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.import.scss #D39BB6 —
meta.function.stylus #D8CAAC —
entity.name.function.stylus #D9BB80 —
string.unquoted.js #D8CAAC —
punctuation.accessor.js, punctuation.separator.key-value.js, punctuation.separator.label.js #868D80 —
punctuation.definition.block.tag.jsdoc #E68183 —
storage.type.js, storage.type.function.arrow.js #E39B7B —
punctuation.definition.tag.jsx, entity.other.attribute-name.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, entity.other.attribute-name.js.jsx #A7C080 —
entity.name.type.module.ts #D8CAAC —
keyword.operator.type.annotation.ts, punctuation.accessor.ts, punctuation.separator.key-value.ts #868D80 —
punctuation.definition.tag.directive.ts, entity.other.attribute-name.directive.ts #A7C080 —
entity.name.type.ts, entity.name.type.interface.ts, entity.other.inherited-class.ts, entity.name.type.alias.ts, entity.name.type.class.ts, entity.name.type.enum.ts #87C095 —
storage.type.ts, storage.type.function.arrow.ts, storage.type.type.ts #E39B7B —
entity.name.type.module.ts #83B6AF —
keyword.control.import.ts, keyword.control.export.ts, storage.type.namespace.ts #D39BB6 —
entity.name.type.module.tsx #D8CAAC —
keyword.operator.type.annotation.tsx, punctuation.accessor.tsx, punctuation.separator.key-value.tsx #868D80 —
punctuation.definition.tag.directive.tsx, entity.other.attribute-name.directive.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, entity.other.attribute-name.tsx #A7C080 —
entity.name.type.tsx, entity.name.type.interface.tsx, entity.other.inherited-class.tsx, entity.name.type.alias.tsx, entity.name.type.class.tsx, entity.name.type.enum.tsx #87C095 —
entity.name.type.module.tsx #83B6AF —
keyword.control.import.tsx, keyword.control.export.tsx, storage.type.namespace.tsx #D39BB6 —
storage.type.tsx, storage.type.function.arrow.tsx, storage.type.type.tsx, support.class.component.tsx #E39B7B —
storage.type.function.coffee #E39B7B —
meta.type-signature.purescript #D8CAAC —
keyword.other.double-colon.purescript, keyword.other.arrow.purescript, keyword.other.big-arrow.purescript #E39B7B —
entity.name.function.purescript #D9BB80 —
string.quoted.single.purescript, string.quoted.double.purescript, punctuation.definition.string.begin.purescript, punctuation.definition.string.end.purescript, string.quoted.triple.purescript, entity.name.type.purescript #A7C080 —
support.other.module.purescript #D39BB6 —
punctuation.dot.dart #868D80 —
storage.type.primitive.dart #E39B7B —
support.class.dart #D9BB80 —
entity.name.function.dart, string.interpolated.single.dart, string.interpolated.double.dart #A7C080 —
variable.language.dart #83B6AF —
keyword.other.import.dart, storage.type.annotation.dart #D39BB6 —
entity.other.attribute-name.class.pug #E68183 —
storage.type.function.pug #E39B7B —
entity.other.attribute-name.tag.pug #87C095 —
entity.name.tag.pug, storage.type.import.include.pug #D39BB6 —
meta.function-call.c, storage.modifier.array.bracket.square.c, meta.function.definition.parameters.c #D8CAAC —
keyword.control.switch.c, keyword.control.case.c #E68183 —
storage.type.built-in.primitive.c, storage.type.built-in.c, storage.type.struct.c #E39B7B —
keyword.operator.sizeof.c, string.quoted.other.lt-gt.include.c, string.quoted.double.include.c #A7C080 —
keyword.operator.logical.c, keyword.operator.increment.c, keyword.operator.c, keyword.operator.decrement.c, keyword.operator.assignment.c, keyword.operator.bitwise.shift.c, keyword.operator.comparison.c, keyword.operator.assignment.compound.c, keyword.operator.ternary.c, variable.other.member.c #87C095 —
constant.language.c, storage.modifier.c #83B6AF —
keyword.control.directive.include.c, punctuation.definition.directive.c, keyword.control.directive.pragma.c, keyword.control.directive.line.c, keyword.control.directive.define.c, keyword.control.directive.conditional.c, keyword.control.directive.diagnostic.error.c, keyword.control.directive.undef.c #D39BB6 —
meta.function-call.cpp, storage.modifier.array.bracket.square.cpp, meta.body.function.definition.cpp #D8CAAC —
punctuation.separator.scope-resolution.function.call.cpp, punctuation.separator.scope-resolution.cpp, punctuation.separator.scope-resolution.parameter.cpp, punctuation.separator.scope-resolution.constructor.cpp, punctuation.separator.scope-resolution.function.definition.cpp, punctuation.separator.scope-resolution.destructor.cpp, punctuation.separator.scope-resolution.template.call.cpp #868D80 —
keyword.control.switch.cpp, keyword.control.case.cpp #E68183 —
storage.type.built-in.primitive.cpp, storage.type.built-in.cpp, storage.type.struct.cpp, entity.name.type.cpp, entity.name.type.parameter.cpp #E39B7B —
entity.name.type.cpp, entity.name.type.parameter.cpp, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, constant.other.placeholder.cpp, constant.character.escape.cpp #D9BB80 —
keyword.operator.sizeof.cpp, string.quoted.other.lt-gt.include.cpp, string.quoted.double.include.cpp, string.quoted.double.cpp, string.quoted.single.cpp, punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp #A7C080 —
entity.name.scope-resolution, entity.name.namespace.cpp #87C095 —
storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.private.cpp #83B6AF —
entity.name.type.class.cpp, keyword.control.directive.include.cpp, punctuation.definition.directive.cpp, keyword.control.directive.pragma.cpp, keyword.control.directive.line.cpp, storage.type.namespace.definition.cpp, keyword.other.using.directive.cpp, storage.type.namespace.directive.cpp, entity.name.label.cpp, keyword.control.directive.diagnostic.error.cpp, keyword.control.directive.define.cpp #D39BB6 —
keyword.other.using.cs #E68183 —
keyword.type.cs, constant.character.escape.cs, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs #D9BB80 —
string.quoted.double.cs, string.quoted.single.cs, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs #A7C080 —
variable.other.object.property.cs #87C095 —
entity.name.type.namespace.cs #D39BB6 —
keyword.symbol.fsharp, constant.language.unit.fsharp #D8CAAC —
keyword.format.specifier.fsharp, entity.name.type.fsharp #D9BB80 —
string.quoted.double.fsharp, string.quoted.single.fsharp, punctuation.definition.string.begin.fsharp, punctuation.definition.string.end.fsharp #A7C080 —
entity.name.section.fsharp #83B6AF —
support.function.attribute.fsharp #D39BB6 —
punctuation.separator.java, punctuation.separator.period.java #868D80 —
keyword.other.import.java, keyword.other.package.java #E68183 —
storage.type.function.arrow.java, keyword.control.ternary.java #E39B7B —
variable.other.property.java #87C095 —
variable.language.wildcard.java, storage.modifier.import.java, storage.type.annotation.java, punctuation.definition.annotation.java, storage.modifier.package.java, entity.name.type.module.java #D39BB6 —
keyword.other.import.kotlin #E68183 —
storage.type.kotlin #E39B7B —
constant.language.kotlin #87C095 —
entity.name.package.kotlin, storage.type.annotation.kotlin #D39BB6 —
entity.name.package.scala #D39BB6 —
constant.language.scala #83B6AF —
entity.name.import.scala #87C095 —
string.quoted.double.scala, string.quoted.single.scala, punctuation.definition.string.begin.scala, punctuation.definition.string.end.scala, string.quoted.double.interpolated.scala, string.quoted.single.interpolated.scala, string.quoted.triple.scala #A7C080 —
entity.name.class, entity.other.inherited-class.scala #D9BB80 —
keyword.declaration.stable.scala, keyword.other.arrow.scala #E39B7B —
keyword.other.import.scala #E68183 —
keyword.operator.navigation.groovy, meta.method.body.java, meta.definition.method.groovy, meta.definition.method.signature.java #D8CAAC —
punctuation.separator.groovy #868D80 —
keyword.other.import.groovy, keyword.other.package.groovy, keyword.other.import.static.groovy #E68183 —
storage.type.def.groovy #E39B7B —
variable.other.interpolated.groovy, meta.method.groovy #A7C080 —
storage.modifier.import.groovy, storage.modifier.package.groovy #87C095 —
storage.type.annotation.groovy #D39BB6 —
entity.name.package.go #87C095 —
keyword.import.go, keyword.package.go #D39BB6 —
entity.name.type.mod.rust #D8CAAC —
keyword.operator.path.rust, keyword.operator.member-access.rust #868D80 —
storage.type.rust #E39B7B —
support.constant.core.rust #87C095 —
meta.attribute.rust, variable.language.rust, storage.type.module.rust #D39BB6 —
meta.function-call.swift, support.function.any-method.swift #D8CAAC —
support.variable.swift #87C095 —
keyword.operator.class.php #D8CAAC —
storage.type.trait.php #E39B7B —
constant.language.php, support.other.namespace.php #87C095 —
storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.private.cpp #83B6AF —
keyword.control.import.include.php, storage.type.php #D39BB6 —
meta.function-call.arguments.python #D8CAAC —
punctuation.definition.decorator.python, punctuation.separator.period.python #868D80 —
constant.language.python #87C095 —
keyword.control.import.python, keyword.control.import.from.python #D39BB6 —
constant.language.lua #87C095 —
entity.name.class.lua #83B6AF —
punctuation.separator.method.ruby #868D80 —
keyword.control.pseudo-method.ruby #E39B7B —
keyword.other.special-method.ruby #A7C080 —
keyword.control.module.ruby #D39BB6 —
keyword.other.arrow.haskell, keyword.other.big-arrow.haskell, keyword.other.double-colon.haskell #E39B7B —
storage.type.haskell #D9BB80 —
constant.other.haskell, string.quoted.double.haskell, string.quoted.single.haskell, punctuation.definition.string.begin.haskell, punctuation.definition.string.end.haskell #A7C080 —
entity.name.function.haskell #83B6AF —
entity.name.namespace, meta.preprocessor.haskell #87C095 —
entity.name.function.r, variable.function.r #A7C080 —
constant.language.r #87C095 —
entity.namespace.r #D39BB6 —
punctuation.separator.module-function.erlang, punctuation.section.directive.begin.erlang #868D80 —
keyword.control.directive.erlang, keyword.control.directive.define.erlang #E68183 —
entity.name.type.class.module.erlang #D9BB80 —
string.quoted.double.erlang, string.quoted.single.erlang, punctuation.definition.string.begin.erlang, punctuation.definition.string.end.erlang #A7C080 —
keyword.control.directive.export.erlang, keyword.control.directive.module.erlang, keyword.control.directive.import.erlang, keyword.control.directive.behaviour.erlang #D39BB6 —
variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir #87C095 —
constant.language.elixir #83B6AF —
keyword.control.module.elixir #D39BB6 —
entity.name.type.value-signature.ocaml #D8CAAC —
keyword.other.ocaml #E39B7B —
constant.language.variant.ocaml #87C095 —
meta.function.lisp #D8CAAC —
storage.type.function-type.lisp #E68183 —
keyword.constant.lisp #A7C080 —
entity.name.function.lisp #87C095 —
constant.keyword.clojure #A7C080 —
entity.global.clojure #D39BB6 —
entity.name.function.clojure #83B6AF —
meta.scope.if-block.shell, meta.scope.group.shell #D8CAAC —
support.function.builtin.shell, entity.name.function.shell #D9BB80 —
string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.unquoted.heredoc.shell #A7C080 —
keyword.control.heredoc-token.shell, variable.other.normal.shell, punctuation.definition.variable.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell #D39BB6 —
punctuation.definition.variable.powershell #868D80 —
entity.name.function.powershell, support.function.attribute.powershell, support.function.powershell #D9BB80 —
string.quoted.single.powershell, string.quoted.double.powershell, punctuation.definition.string.begin.powershell, punctuation.definition.string.end.powershell, string.quoted.double.heredoc.powershell #A7C080 —
variable.other.member.powershell #87C095 —
string.unquoted.alias.graphql #D8CAAC —
keyword.type.graphql #E68183 —
entity.name.fragment.graphql #D39BB6 —
entity.name.function.target.makefile #E39B7B —
variable.other.makefile #D9BB80 —
meta.scope.prerequisites.makefile #A7C080 —
string.source.cmake #A7C080 —
entity.source.cmake #87C095 —
storage.source.cmake #D39BB6 —
entity.name.function.package-manager.dockerfile #E39B7B —
keyword.operator.flag.dockerfile #D9BB80 —
string.quoted.double.dockerfile, string.quoted.single.dockerfile #A7C080 —
constant.character.escape.dockerfile #87C095 —
entity.name.type.base-image.dockerfile, entity.name.image.dockerfile #D39BB6 —
punctuation.definition.separator.diff #868D80 —
markup.deleted.diff, punctuation.definition.deleted.diff #E68183 —
meta.diff.range.context, punctuation.definition.range.diff #E39B7B —
meta.diff.header.from-file #D9BB80 —
markup.inserted.diff, punctuation.definition.inserted.diff #A7C080 —
markup.changed.diff, punctuation.definition.changed.diff #83B6AF —
punctuation.definition.from-file.diff #D39BB6 —
entity.name.section.group-title.ini, punctuation.definition.entity.ini #E68183 —
punctuation.separator.key-value.ini #E39B7B —
string.quoted.double.ini, string.quoted.single.ini, punctuation.definition.string.begin.ini, punctuation.definition.string.end.ini #A7C080 —
keyword.other.definition.ini #87C095 —
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.pair.json #868D80 —
support.type.property-name.json #E39B7B —
string.quoted.double.json #A7C080 —
punctuation.separator.key-value.mapping.yaml #868D80 —
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, string.unquoted.plain.in.yaml #A7C080 —
punctuation.definition.anchor.yaml, punctuation.definition.block.sequence.item.yaml #87C095 —
string.quoted.single.basic.line.toml, string.quoted.single.literal.line.toml, punctuation.definition.keyValuePair.toml #A7C080 —
constant.other.boolean.toml #83B6AF —
entity.other.attribute-name.table.toml, punctuation.definition.table.toml, entity.other.attribute-name.table.array.toml, punctuation.definition.table.array.toml #D39BB6 —
comment, string.comment, punctuation.definition.comment #868D80 —
token.error-token #F44747 —
token.debug-token #B267E6 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}