Skip to main content
Home Theme VS Code Vento A dark VS Code theme based on the new Tailwind 2.0 color research
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 #3d3d3d activityBar.background #212121 activityBar.border #4f4f4f activityBar.foreground #ffffff activityBar.inactiveForeground #636363 activityBarBadge.background #4ba5ff 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 #ff666b — variable.other.generic-type.haskell #cb7fff — storage.type.haskell #ff8d15 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#ffffff
badge.background #4ba5ff
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #4ba5ff
breadcrumb.background #212121
breadcrumb.focusForeground #4ba5ff
breadcrumb.foreground #ffffff
button.background #366390
button.foreground #ffffff
button.hoverBackground #4184c8
button.secondaryBackground #4f4f4f
button.secondaryForeground #ffffff
button.secondaryHoverBackground #868686
checkbox.background #212121
checkbox.border #636363
checkbox.foreground #ffffff
debugExceptionWidget.background #2e2e2e
debugExceptionWidget.border #3d3d3d
debugToolBar.background #2e2e2e
debugToolBar.border #3d3d3d
diffEditor.border #4f4f4f
diffEditor.insertedTextBackground #00ca4f26
diffEditor.insertedTextBorder #00ca4f00
diffEditor.removedTextBackground #ef000f26
diffEditor.removedTextBorder #ef000f00
dropdown.background #212121
dropdown.border #636363
dropdown.foreground #ffffff
editor.background #212121
editor.findMatchBackground #4ba5ff66
editor.findMatchBorder #4ba5ffcc
editor.findMatchHighlightBackground #ff8d1540
editor.findMatchHighlightBorder #ff8d1580
editor.findRangeHighlightBackground #4ba5ff1a
editor.findRangeHighlightBorder #4ba5ff00
editor.foldBackground #4ba5ff1a
editor.foreground #ffffff
editor.hoverHighlightBackground #4ba5ff80
editor.inactiveSelectionBackground #2c4259
editor.lineHighlightBackground #2f2f2f
editor.lineHighlightBorder #3d3d3d00
editor.rangeHighlightBackground #4ba5ff40
editor.rangeHighlightBorder #4ba5ff80
editor.selectionBackground #366390
editor.selectionHighlightBackground #4ba5ff40
editor.selectionHighlightBorder #4ba5ff80
editor.wordHighlightBackground #a8a8a859
editor.wordHighlightBorder #a8a8a88c
editor.wordHighlightStrongBackground #4ba5ff40
editor.wordHighlightStrongBorder #4ba5ff80
editorBracketMatch.background #3d3d3d
editorBracketMatch.border #a8a8a8
editorCodeLens.foreground #a8a8a8
editorCursor.background #000000
editorCursor.foreground #a8a8a8
editorError.background #ff666b26
editorError.border #ff666b00
editorError.foreground #ff666b
editorGroup.border #636363
editorGroup.emptyBackground #212121
editorGroupHeader.border #3d3d3d
editorGroupHeader.tabsBackground #2e2e2e
editorGroupHeader.tabsBorder #4f4f4f
editorGutter.addedBackground #00ca4f
editorGutter.background #212121
editorGutter.commentRangeForeground #a8a8a8
editorGutter.deletedBackground #ef000f
editorGutter.foldingControlForeground #a8a8a8
editorGutter.modifiedBackground #f2b200
editorHoverWidget.background #2e2e2e
editorHoverWidget.border #4f4f4f
editorHoverWidget.foreground #ffffff
editorIndentGuide.activeBackground #636363
editorIndentGuide.background #3d3d3d
editorInfo.background #4ba5ff26
editorInfo.border #4ba5ff00
editorInfo.foreground #4ba5ff
editorLineNumber.activeForeground #a8a8a8
editorLineNumber.foreground #636363
editorLink.activeForeground #4ba5ff
editorMarkerNavigation.background #2e2e2e
editorMarkerNavigationError.background #904446
editorMarkerNavigationInfo.background #366390
editorMarkerNavigationWarning.background #907611
editorOverviewRuler.background #3d3d3d
editorOverviewRuler.border #4f4f4f
editorRuler.foreground #3d3d3d
editorSuggestWidget.background #2e2e2e
editorSuggestWidget.border #4f4f4f
editorSuggestWidget.foreground #ffffff
editorSuggestWidget.highlightForeground #4ba5ff
editorSuggestWidget.selectedBackground #4f4f4f
editorWarning.background #ffcb0026
editorWarning.border #ffcb0000
editorWarning.foreground #ffcb00
editorWhitespace.foreground #4184c8
editorWidget.background #2e2e2e
editorWidget.foreground #ffffff
editorWidget.resizeBorder #3d3d3d
focusBorder #366390
foreground #ffffff
gitDecoration.addedResourceForeground #00ca4f
gitDecoration.conflictingResourceForeground #cb7fff
gitDecoration.deletedResourceForeground #ef000f
gitDecoration.ignoredResourceForeground #868686
gitDecoration.modifiedResourceForeground #ffcb00
gitDecoration.stageDeletedResourceForeground #9d0d16
gitDecoration.stageModifiedResourceForeground #ac820b
gitDecoration.submoduleResourceForeground #0293b7
gitDecoration.untrackedResourceForeground #0d863d
icon.foreground #ffffff
input.background #212121
input.border #636363
input.foreground #ffffff
input.placeholderForeground #868686
inputOption.activeBackground #366390
inputOption.activeBorder #4ba5ff
inputOption.activeForeground #ffffff
list.activeSelectionBackground #366390
list.activeSelectionForeground #ffffff
list.dropBackground #366390
list.focusBackground #2c4259
list.focusForeground #ffffff
list.highlightForeground #4ba5ff
list.hoverBackground #4f4f4f
list.hoverForeground #ffffff
list.inactiveSelectionBackground #3d3d3d
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #ff8d1540
listFilterWidget.noMatchesOutline #ef000f
listFilterWidget.outline #ff8d1580
menu.background #2e2e2e
menu.border #4f4f4f
menu.foreground #ffffff
menu.selectionBackground #366390
menu.selectionBorder #4ba5ff
menu.selectionForeground #ffffff
menu.separatorBackground #4f4f4f
menubar.selectionBackground #4f4f4f
menubar.selectionBorder #868686
menubar.selectionForeground #ffffff
merge.commonContentBackground #3d3d3d
merge.commonHeaderBackground #636363
merge.currentContentBackground #164938
merge.currentHeaderBackground #009a66
merge.incomingContentBackground #174753
merge.incomingHeaderBackground #0293b7
minimap.background #212121
minimap.errorHighlight #ff666b
minimap.findMatchHighlight #4ba5ff66
minimap.selectionHighlight #366390
minimap.warningHighlight #ffcb00
minimapGutter.addedBackground #00ca4f
minimapGutter.deletedBackground #ef000f
minimapGutter.modifiedBackground #f2b200
notificationCenter.border #3d3d3d
notificationCenterHeader.background #3d3d3d
notificationCenterHeader.foreground #ffffff
notifications.background #2e2e2e
notifications.border #3d3d3d
notifications.foreground #ffffff
notificationsErrorIcon.foreground #ff666b
notificationsInfoIcon.foreground #4ba5ff
notificationsWarningIcon.foreground #f2b200
notificationToast.border #3d3d3d
panel.background #212121
panel.border #4f4f4f
panelSection.border #4f4f4f
panelTitle.activeBorder #ffffff
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #868686
peekView.border #4f4f4f
peekViewEditor.background #2e2e2e
peekViewEditor.matchHighlightBackground #90571b
peekViewEditor.matchHighlightBorder #90571b00
peekViewEditorGutter.background #2e2e2e
peekViewResult.background #2e2e2e
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #a8a8a8
peekViewResult.matchHighlightBackground #593c1e
peekViewResult.selectionBackground #2c4259
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #2e2e2e
peekViewTitleDescription.foreground #a8a8a8
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3d3d3d
pickerGroup.foreground #4ba5ff
progressBar.background #4ba5ff
scrollbar.shadow #2e2e2e26
scrollbarSlider.activeBackground #ffffff67
scrollbarSlider.background #ffffff26
scrollbarSlider.hoverBackground #ffffff4d
selection.background #366390
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #212121
sideBar.border #4f4f4f
sideBar.dropBackground #366390
sideBar.foreground #ffffff
sideBarSectionHeader.background #3d3d3d
sideBarSectionHeader.border #4f4f4f
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #ffffff
statusBar.background #2e2e2e
statusBar.border #4f4f4f
statusBar.debuggingBackground #c34c00
statusBar.debuggingBorder #572f16
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #750faf
statusBar.noFolderBorder #3d1b50
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #4f4f4f
statusBarItem.remoteBackground #00672f
statusBarItem.remoteForeground #ffffff
tab.activeBackground #212121
tab.activeBorder #212121
tab.activeBorderTop #3d3d3d00
tab.activeForeground #ffffff
tab.border #4f4f4f
tab.hoverBackground #3d3d3d
tab.hoverBorder #4f4f4f
tab.hoverForeground #ffffff
tab.inactiveBackground #2e2e2e
tab.inactiveForeground #868686
terminal.ansiBlack #868686
terminal.ansiBlue #4ba5ff
terminal.ansiBrightBlack #aeaeae
terminal.ansiBrightBlue #326eaa
terminal.ansiBrightCyan #009da7
terminal.ansiBrightGreen #008735
terminal.ansiBrightMagenta #8755aa
terminal.ansiBrightRed #aa4447
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #aa8700
terminal.ansiCyan #00ebfb
terminal.ansiGreen #00ca4f
terminal.ansiMagenta #cb7fff
terminal.ansiRed #ff666b
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffcb00
terminal.border #4f4f4f
terminal.foreground #ffffff
terminal.selectionBackground #4ba5ff40
terminalCursor.background #000000
terminalCursor.foreground #ffffff
textLink.foreground #4ba5ff
titleBar.activeBackground #212121
titleBar.activeForeground #ffffff
titleBar.border #4f4f4f
titleBar.inactiveBackground #2e2e2e
titleBar.inactiveForeground #868686
tree.indentGuidesStroke #3d3d3d
walkThrough.embeddedEditorBackground #00000050
widget.shadow #2e2e2e26 #ff666b
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffffff —
variable.parameter.function.language.special.self.python #ffcb00 —
storage.modifier.lifetime.rust #ffffff —
support.function.std.rust #4ba5ff —
entity.name.lifetime.rust #ffcb00 —
variable.language.rust #ff666b —
support.constant.edge #cb7fff —
constant.other.character-class.regexp #ff666b —
keyword.operator.quantifier.regexp #ff8d15 —
punctuation.definition.string.begin,punctuation.definition.string.end #00ca4f —
variable.parameter.function #ffffff —
comment markup.link #868686 —
markup.changed.diff #ffcb00 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #4ba5ff —
markup.inserted.diff #00ca4f —
markup.deleted.diff #ff666b —
meta.function.c,meta.function.cpp #ff666b —
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 #ffffff —
punctuation.separator.key-value #ffffff —
keyword.operator.expression.import #4ba5ff —
support.constant.math #ffcb00 —
support.constant.property.math #ff8d15 —
variable.other.constant #ffcb00 —
storage.type.annotation.java, storage.type.object.array.java #ffcb00 —
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 #ffffff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ffcb00 —
keyword.operator.instanceof.java #cb7fff —
meta.definition.variable.name.java #ff666b —
keyword.operator.logical #00ebfb —
keyword.operator.bitwise #00ebfb —
keyword.operator.channel #00ebfb —
support.constant.property-value.scss,support.constant.property-value.css #ff8d15 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #00ebfb —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ff8d15 —
punctuation.separator.list.comma.css #ffffff —
support.constant.color.w3c-standard-color-name.css #ff8d15 —
support.type.vendored.property-name.css #00ebfb —
support.module.node,support.type.object.module,support.module.node #ffcb00 —
entity.name.type.module #ffcb00 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff666b —
support.constant.json #ff8d15 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #cb7fff —
support.type.object.console #ff666b —
support.variable.property.process #ff8d15 —
entity.name.function,support.function.console #4ba5ff —
keyword.operator.misc.rust #ffffff —
keyword.operator.sigil.rust #cb7fff —
keyword.operator.delete #cb7fff —
support.type.object.dom #00ebfb —
support.variable.dom,support.variable.property.dom #ff666b —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #00ebfb —
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 #cb7fff —
punctuation.separator.delimiter #ffffff —
punctuation.separator.c,punctuation.separator.cpp #cb7fff —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #00ebfb —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #cb7fff —
variable.parameter.function.language.python #ff8d15 —
support.type.python #00ebfb —
keyword.operator.logical.python #cb7fff —
variable.parameter.function.python #ff8d15 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ffffff —
meta.function-call.generic.python #4ba5ff —
constant.character.format.placeholder.other.python #ff8d15 —
keyword.operator.assignment.compound #cb7fff —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #00ebfb —
entity.name.namespace #ffcb00 —
variable.language #ffcb00 —
token.variable.parameter.java #ffffff —
import.storage.java #ffcb00 —
token.package.keyword #cb7fff —
entity.name.function, meta.require, support.function.any-method, variable.function #4ba5ff —
entity.name.type.namespace #ffcb00 —
support.class, entity.name.type.class #ffcb00 —
entity.name.class.identifier.namespace.type #ffcb00 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ffcb00 —
variable.other.class.php #ff666b —
control.elements, keyword.operator.less #ff8d15 —
keyword.other.special-method #4ba5ff —
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 #cb7fff —
token.storage.type.java #ffcb00 —
support.type.property-name #ffffff —
support.constant.property-value #ffffff —
support.constant.font-name #ff8d15 —
entity.other.inherited-class #ffcb00 —
constant.other.symbol #00ebfb —
punctuation.definition.constant #ff8d15 —
entity.other.attribute-name #ff8d15 —
entity.other.attribute-name.id #4ba5ff normal
entity.other.attribute-name.class.css #ff8d15 normal
markup.heading punctuation.definition.heading, entity.name.section #4ba5ff —
keyword.other.unit #ff666b —
markup.bold,todo.bold #ff8d15 —
punctuation.definition.bold #ffcb00 —
markup.italic, punctuation.definition.italic,todo.emphasis #cb7fff —
entity.name.section.markdown #ff666b —
punctuation.definition.heading.markdown #ff666b —
punctuation.definition.list.begin.markdown #ff666b —
markup.heading.setext #ffffff —
punctuation.definition.bold.markdown #ff8d15 —
markup.inline.raw.markdown #00ca4f —
markup.inline.raw.string.markdown #00ca4f —
punctuation.definition.list.markdown #ff666b —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff666b —
beginning.punctuation.definition.list.markdown #ff666b —
punctuation.definition.metadata.markdown #ff666b —
markup.underline.link.markdown,markup.underline.link.image.markdown #cb7fff —
string.other.link.title.markdown,string.other.link.description.markdown #4ba5ff —
constant.character.escape #00ebfb —
punctuation.section.embedded, variable.interpolation #ff666b —
punctuation.section.embedded.begin,punctuation.section.embedded.end #cb7fff —
invalid.illegal.bad-ampersand.html #ffffff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff666b —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff666b —
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 #00ca4f —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #00ebfb —
support.type.property-name.json #ff666b —
support.type.property-name.json punctuation #ff666b —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #cb7fff —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #cb7fff —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ffcb00 —
keyword.operator.error-control.php #cb7fff —
keyword.operator.type.php #cb7fff —
punctuation.section.array.begin.php #ffffff —
punctuation.section.array.end.php #ffffff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ffcb00 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #4ba5ff —
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 #ffffff —
support.constant.core.rust #ff8d15 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ff8d15 —
entity.name.goto-label.php,support.other.php #4ba5ff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #00ebfb —
keyword.operator.regexp.php #cb7fff —
keyword.operator.comparison.php #00ebfb —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #cb7fff —
meta.function.decorator.python #4ba5ff —
support.token.decorator.python,meta.function.decorator.identifier.python #00ebfb —
function.parameter #ffffff —
function.parameter.ruby, function.parameter.cs #ffffff —
constant.language.symbol.ruby #00ebfb —
inline-color-decoration rgb-value #ff8d15 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ffcb00 —
block.scope.end,block.scope.begin #ffffff —
entity.name.variable.local.cs #ff666b —
token.error-token #f44747 —
token.debug-token #cb7fff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #cb7fff —
meta.template.expression #ffffff —
keyword.operator.module #cb7fff —
support.type.type.flowtype #4ba5ff —
support.type.primitive #ffcb00 —
meta.property.object #ff666b —
variable.parameter.function.js #ff666b —
keyword.other.template.begin #00ca4f —
keyword.other.template.end #00ca4f —
keyword.other.substitution.begin #00ca4f —
keyword.other.substitution.end #00ca4f —
keyword.operator.assignment #00ebfb —
keyword.operator.assignment.go #ffcb00 —
keyword.operator.arithmetic.go, keyword.operator.address.go #cb7fff —
entity.name.package.go #ffcb00 —
support.type.prelude.elm #00ebfb —
support.constant.elm #ff8d15 —
punctuation.quasi.element #cb7fff —
constant.character.entity #ff666b —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #00ebfb —
entity.global.clojure #ffcb00 —
meta.symbol.clojure #ff666b —
constant.keyword.clojure #00ebfb —
meta.arguments.coffee, variable.parameter.function.coffee #ff666b —
meta.scope.prerequisites.makefile #ff666b —
storage.modifier.import.groovy #ffcb00 —
meta.method.groovy #4ba5ff —
meta.definition.variable.name.groovy #ff666b —
meta.definition.class.inherited.classes.groovy #00ca4f —
support.variable.semantic.hlsl #ffcb00 —
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 #cb7fff —
text.variable, text.bracketed #ff666b —
support.type.swift, support.type.vb.asp #ffcb00 —
entity.name.function.xi #ffcb00 —
entity.name.class.xi #00ebfb —
constant.character.character-class.regexp.xi #ff666b —
constant.regexp.xi #cb7fff —
keyword.control.xi #00ebfb —
beginning.punctuation.definition.quote.markdown.xi #00ca4f —
beginning.punctuation.definition.list.markdown.xi #868686 —
constant.character.xi #4ba5ff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #868686 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ffcb00 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff666b —
meta.brace.square #ffffff —
comment, punctuation.definition.comment #868686 italic
markup.quote.markdown #868686 —
punctuation.definition.block.sequence.item.yaml #ffffff —
constant.language.symbol.elixir #00ebfb —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/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 } !` ;
}
Vento | Coding Theme