Skip to main content
Home Theme VS Code Veles Dark A dark theme with pleasant colours. Inspired by Nocterial Palenight and Electron.
Veles Dark | 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.activeBackground #20232a activityBar.activeBorder #ff4081 activityBar.background #24262f activityBar.border #00000060 activityBar.foreground #fb4875 activityBar.inactiveForeground #6e67a877 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable.other.constant.object, variable.other.constant #60a4f1 variable.parameter — comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator, markup.other.anchor support.constant, markup.fenced_code, markup.fenced_code punctuation.definition #676E95 — constant.character, constant.escape, text.html.markdown, punctuation.definition.list_item, keyword.begin.tag.ejs, constant.name.attribute.tag.pug, source.clojure meta.symbol, constant.other.description.jsdoc, keyword.other.array.phpdoc.php, keyword.operator.other.powershell, meta.link.inline punctuation.definition.string, source.sql, source meta.brace, source punctuation, text.html punctuation, markup meta punctuation.definition, meta.bracket.julia, meta.array.julia, punctuation.separator.key-value, entity.name.footnote, source.ocaml punctuation.definition.tag, source.ocaml entity.name.filename, source.reason entity.name.filename, entity.other.attribute-name strong, binding.fsharp keyword.symbol.fsharp, entity.name.record.field.elm, entity.name.record.field.accessor.elm, storage.modifier.array.bracket, source.css entity.other, meta.attribute-selector punctuation.definition.entity, markup.other.anchor string
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Veles Dark — Veles Dark Dimmed
activityBarBadge.background
#ff4081
activityBarBadge.foreground #000000
badge.background #00000030
badge.foreground #676e95
breadcrumb.activeSelectionForeground #ff4081
breadcrumb.background #292d3e
breadcrumb.focusForeground #a6accd
breadcrumb.foreground #757ca1
breadcrumbPicker.background #1b1e2b
button.background #717cb450
button.foreground #ffffff
button.hoverBackground #00aacc
debugConsole.errorForeground #f07178
debugConsole.infoForeground #89ddff
debugConsole.warningForeground #ffcb6b
debugExceptionWidget.background #292640
debugExceptionWidget.border #6e67a8
debugToolBar.background #292d3e
descriptionForeground #7a70c2
diffEditor.insertedTextBackground #89ddff20
diffEditor.removedTextBackground #ff9cac20
dropdown.background #292d3e
dropdown.border #ffffff10
dropdown.foreground #7a70c2
editor.background #24262f
editor.findMatchBackground #000000
editor.findMatchBorder #ff4081
editor.findMatchHighlightBackground #00000050
editor.findMatchHighlightBorder #00000050
editor.findRangeHighlightBackground #ffcb6b30
editor.foreground #a6accd
editor.hoverHighlightBackground #6e67a83f
editor.inactiveSelectionBackground #6e67a833
editor.lineHighlightBackground #383b4e
editor.lineHighlightBorder #383b4e
editor.rangeHighlightBackground #ffffff0d
editor.selectionBackground #717cb450
editor.selectionHighlightBackground #000000da
editor.selectionHighlightBorder #ff4081b6
editor.snippetFinalTabstopHighlightBackground #211f33
editor.snippetFinalTabstopHighlightBorder #2b2843
editor.snippetTabstopHighlightBackground #211f33
editor.snippetTabstopHighlightBorder #2b2843
editor.stackFrameHighlightBackground #24262f
editorBracketMatch.background #000000da
editorBracketMatch.border #6cfdffbd
editorCodeLens.foreground #776284
editorCursor.foreground #fff45e
editorError.border #292640
editorError.foreground #fd0000
editorGroup.border #00000030
editorGroup.dropBackground #f0717880
editorGroup.emptyBackground #5c597333
editorGroup.focusedEmptyBorder #f07178
editorGroupHeader.noTabsBackground #2f2c49
editorGroupHeader.tabsBackground #24262f
editorGroupHeader.tabsBorder #2f2c49
editorGutter.addedBackground #c3e88d60
editorGutter.background #24262f
editorGutter.deletedBackground #f0717860
editorGutter.modifiedBackground #82aaff60
editorHint.border #49e9a600
editorHint.foreground #49e9a6
editorHoverWidget.background #292d3e
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground #4e5579
editorIndentGuide.background #4e557970
editorInfo.border #292640
editorInfo.foreground #35ffab
editorLineNumber.activeForeground #757ca1
editorLineNumber.foreground #3a3f58
editorLink.activeForeground #a6accd
editorMarkerNavigation.background #a6accd05
editorMarkerNavigationError.background #e34e1c
editorMarkerNavigationWarning.background #e69533
editorOverviewRuler.border #292d3e
editorOverviewRuler.commonContentForeground #ffc18044
editorOverviewRuler.currentContentForeground #85f1ff44
editorOverviewRuler.errorForeground #f0717840
editorOverviewRuler.findMatchForeground #80cbc4
editorOverviewRuler.incomingContentForeground #9d92f244
editorOverviewRuler.infoForeground #82aaff40
editorOverviewRuler.warningForeground #ffcb6b40
editorRuler.foreground #ff4081a9
editorSuggestWidget.background #292d3e
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #a6accd
editorSuggestWidget.highlightForeground #ff4081
editorSuggestWidget.selectedBackground #00000050
editorWarning.border #292640
editorWarning.foreground #ffc400
editorWhitespace.foreground #a6accd40
editorWidget.background #1b1e2b
editorWidget.border #ff4081
editorWidget.resizeBorder #ff4081
errorForeground #e34e1c
extensionBadge.remoteForeground #a6accd
extensionButton.prominentBackground #c3e88d90
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #c3e88d
focusBorder #ffffff00
foreground #a6accd
gitDecoration.addedResourceForeground #16b673
gitDecoration.conflictingResourceForeground #ffcb6b90
gitDecoration.deletedResourceForeground #f0717890
gitDecoration.ignoredResourceForeground #757ca190
gitDecoration.modifiedResourceForeground #82aaff90
gitDecoration.untrackedResourceForeground #c3e88d90
input.background #333747
input.border #ffffff10
input.foreground #a6accd
input.placeholderForeground #a6accd60
inputOption.activeBackground #a6accd30
inputOption.activeBorder #a6accd30
inputValidation.errorBackground #501502ee
inputValidation.errorBorder #f07178
inputValidation.errorForeground #ff4000
inputValidation.infoBackground #0f6e7bee
inputValidation.infoBorder #82aaff
inputValidation.infoForeground #40d4e7
inputValidation.warningBackground #82694acc
inputValidation.warningBorder #ffcb6b
inputValidation.warningForeground #e69533
list.activeSelectionBackground #1b1e2b
list.activeSelectionForeground #ff4081
list.dropBackground #f0717880
list.errorForeground #e34e1c
list.focusBackground #a6accd20
list.focusForeground #a6accd
list.highlightForeground #ff4081
list.hoverBackground #1b1e2b
list.hoverForeground #fb4875
list.inactiveFocusBackground #2b2843
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #ff4081
list.warningForeground #ffa857
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #292d3e
menu.foreground #a6accd
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #fb4875
menu.separatorBackground #a6accd
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #fb4875
merge.border #29264000
merge.commonContentBackground #ffc18022
merge.commonHeaderBackground #ffc18044
merge.currentContentBackground #85f1ff22
merge.currentHeaderBackground #85f1ff44
merge.incomingContentBackground #9d92f222
merge.incomingHeaderBackground #9d92f244
minimap.background #29264099
minimap.errorHighlight #e34e1cee
minimap.findMatchHighlight #998ef1ee
minimap.warningHighlight #e69533ee
minimapGutter.addedBackground #16b673
minimapGutter.deletedBackground #e34e1c
minimapGutter.modifiedBackground #49e9a6
notebook.focusedCellBorder #ff4081a9
notebook.selectedCellBorder #ff4081a9
notificationCenter.border #2f2c49
notificationCenterHeader.background #2f2c49
notificationCenterHeader.foreground #8787ab
notificationLink.foreground #ff4081
notifications.background #292d3e
notifications.border #2f2c49
notifications.foreground #a6accd
notificationToast.border #2f2c49
panel.background #1b1e2b
panel.border #00000060
panelTitle.activeBorder #ff4081
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #a6accd
peekView.border #ff4081a9
peekViewEditor.background #a6accd05
peekViewEditor.matchHighlightBackground #717cb450
peekViewEditorGutter.background #a6accd05
peekViewResult.background #a6accd05
peekViewResult.fileForeground #ffc180
peekViewResult.lineForeground #8787ab
peekViewResult.matchHighlightBackground #717cb450
peekViewResult.selectionBackground #757ca170
peekViewResult.selectionForeground #8787ab
peekViewTitle.background #a6accd05
peekViewTitleDescription.foreground #a6accd60
peekViewTitleLabel.foreground #ffc180
pickerGroup.border #ffffff1a
pickerGroup.foreground #ff4081
progressBar.background #ff4081
quickInput.background #292d3e
quickInput.foreground #757ca1
quickInput.list.focusBackground #a6accd20
scrollbar.shadow #00000030
scrollbarSlider.activeBackground #ff408150
scrollbarSlider.background #a6accd20
scrollbarSlider.hoverBackground #a6accd10
selection.background #ff408140
settings.checkboxBackground #1b1e2b
settings.checkboxBorder #2f2c49
settings.checkboxForeground #a6accd
settings.dropdownBackground #1b1e2b
settings.dropdownBorder #2f2c49
settings.dropdownForeground #a6accd
settings.dropdownListBorder #49408c77
settings.headerForeground #ff4081
settings.modifiedItemIndicator #ff4081
settings.numberInputBackground #1b1e2b
settings.numberInputBorder #1f1d30
settings.numberInputForeground #a6accd
settings.textInputBackground #1b1e2b
settings.textInputBorder #2f2c49
settings.textInputForeground #a6accd
sideBar.background #24262f
sideBar.border #00000060
sideBar.dropBackground #232136
sideBar.foreground #757ca1
sideBarSectionHeader.background #1b1e2b
sideBarSectionHeader.border #00000060
sideBarSectionHeader.foreground #fb4875
sideBarTitle.foreground #a6accd
statusBar.background #24262f
statusBar.border #00000060
statusBar.debuggingBackground #c792ea
statusBar.debuggingBorder #ff80acaf
statusBar.debuggingForeground #ffffff
statusBar.foreground #676e95
statusBar.noFolderBackground #292d3e
statusBar.noFolderBorder #292640
statusBar.noFolderForeground #8787ab
statusBarItem.activeBackground #f0717880
statusBarItem.hoverBackground #676e9520
statusBarItem.prominentBackground #1f1d30
statusBarItem.prominentHoverBackground #1b1641
statusBarItem.remoteBackground #24262f
statusBarItem.remoteForeground #000000
tab.activeBackground #292d3e
tab.activeBorder #ff4081
tab.activeBorderTop #998ef1
tab.activeForeground #ffffff
tab.activeModifiedBorder #757ca1
tab.border #292d3e
tab.inactiveBackground #292d3e
tab.inactiveForeground #757ca1
tab.inactiveModifiedBorder #904348
tab.unfocusedActiveBackground #2d2b3b
tab.unfocusedActiveBorder #676e95
tab.unfocusedActiveForeground #a6accd
tab.unfocusedActiveModifiedBorder #c05a60
tab.unfocusedHoverBackground #998ef121
tab.unfocusedInactiveForeground #a9a5c0
tab.unfocusedInactiveModifiedBorder #904348
terminal.ansiBlack #000000
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #676e95
terminal.ansiBrightBlue #82aaff
terminal.ansiBrightCyan #89ddff
terminal.ansiBrightGreen #c3e88d
terminal.ansiBrightMagenta #c792ea
terminal.ansiBrightRed #f07178
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffcb6b
terminal.ansiCyan #89ddff
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #c792ea
terminal.ansiRed #f07178
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffcb6b
terminal.background #1f1d30
terminal.foreground #c5c2d6
terminalCursor.background #000000
terminalCursor.foreground #ffcb6b
textBlockQuote.background #292640
textBlockQuote.border #6e67a8
textCodeBlock.background #292640
textLink.activeForeground #a6accd
textLink.foreground #ff4081
textPreformat.foreground #ffc180
textSeparator.foreground #292640
titleBar.activeBackground #24262f
titleBar.activeForeground #a6accd
titleBar.border #00000060
titleBar.inactiveBackground #1b1e2b
titleBar.inactiveForeground #757ca1
tree.indentGuidesStroke #4e5579
walkThrough.embeddedEditorBackground #292640
widget.shadow #00000030 meta.tag.sgml, punctuation.accessor, constant.other.color, entity.name.section, markup.heading, markup.heading punctuation.definition, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, text.pug storage.type, text.pug meta.tag.other, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, punctuation.separator.pointer-access, punctuation.separator.other.ruby, punctuation.definition.keyword, punctuation.separator.hash.cs, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, constant.string.documentation.powershell, punctuation.section.directive, punctuation.definition.attribute, punctuation.definition.preprocessor, punctuation.separator.namespace, punctuation.separator.method, keyword.control punctuation.definition.function, source.ocaml variable.interpolation string, source.reason variable.interpolation, punctuation.definition.directive, keyword.other.class.fileds, source.toml entity.other.attribute-name, source.css entity.name.tag.custom, sharing.modifier #89DDFF —
entity.other.attribute-name.pseudo-class —
variable, variable.object, variable.other, variable.parameter, support, entity.name.module, variable.import.parameter, variable.other.class, meta.toc-list.id.html, meta.var.clojure, entity.name.variable, source.java meta.class.body.java, entity.name.package.go, source.c, source.cpp, source.go, source.python, meta.function-call.arguments.python, source.ruby, source.coffee.embedded.source, source.coffee, storage.modifier.import, storage.modifier.package, storage.type.annotation, punctuation.definition.annotation, source.groovy.embedded.source, punctuation.definition.variable, source.powershell, string.quoted.interpolated.vala constant.character.escape.vala, source.apacheconf, source.objc, source.crystal, string.quoted.double.kotlin entity.string.template.element.kotlin, entity.name.package.kotlin, meta.template.expression.kotlin, parameter.variable.function, variable.other.constant.elixir, source.elixir.embedded.source, source.sql.embedded, punctuation.definition.placeholder, source.swift, source.julia, source.shell, variable.other.normal punctuation.definition.variable.shell, source.reason variable.language, source.reason variable.language string.other.link, source.elm meta.value, source.elm meta.declaration.module, meta.embedded.block variable punctuation.definition.variable.php, string.quoted.double.class.other, source.toml keyword, support.type.nim, source.tf meta.template.expression, source.scala entity.name.import, markup.code #97BEE9 —
source.json meta.structure.dictionary.json support.type.property-name.json #A6ACCD —
support.variable.property, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.name.type.annotation.kotlin, support.type.primitive, meta.type.parameters entity.name.type, meta.type.annotation entity.name.type, punctuation.definition.typeparameters, source.python support.type.python, comment.block.documentation.phpdoc.php keyword.other.type.php, storage.type.php, keyword.type, storage.type.cs, storage.type.c, storage.type.objc, punctuation.definition.storage.type.objc, markup punctuation.definition, storage.type.powershell, comment.block.documentation entity.name.type, source.java storage.type, storage.type.primitive, source.groovy storage.type, storage.type.r, source.haskell storage.type, punctuation.separator.clause-head-body, source.go storage.type, storage.type.core.rust, storage.class.std.rust, storage.modifier.lifetime.rust, entity.name.lifetime.rust, support.type.vb, entity.name.type.kotlin, support.type.julia, constant.other.reference, source.graphql support.type, source.reason support.type string, entity.name.type.fsharp, source.elm storage.type, storage.type.user-defined, storage.type.built-in, support.type.builtin, source.swift support.type, support.class.crystal, storage.type.integral, source.cpp storage.type.cpp, source.vala storage.type, source.hlsl storage.type.basic, source.hlsl support.type.other, source.apex storage.type, source.nim storage.type, source.cpp entity.name.type, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, markup.raw.monospace, markup.mark, markup.meta.attribute-list #F07178 —
constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, markup.quote, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, source.cpp variable.other.enummember, support.variable.class.hideshow, entity.other.attribute-name.class, meta.attribute.id entity.other.attribute-name, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder, source.vue entity.other.attribute-name, entity.other.attribute-name.mjml, source.vue meta.directive punctuation.separator.key-value, meta.definition.attribute-entry punctuation.separator #FFCB6B —
markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable, keyword.control.clojure, support.type.exception.python, keyword.other.this.cs, keyword.other.base.cs, keyword.other.var.cs, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, keyword.other.fn.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, keyword.other.julia, source.julia storage.modifier, constant.language.empty-list.haskell, meta.function.powershell storage.type.powershell, keyword.control.fun, punctuation.terminator.function, keyword.other.rust, keyword.other.declaration-specifier.swift, keyword.control.class, keyword.control.def, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, keyword.declaration.dart, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, keyword.other.skinparam.keyword, keyword.other.nim, markup.deleted.diff, source.tf support.class.variable, meta.function.lua keyword.control.lua, markup.italic punctuation.definition, markup.bold punctuation.definition, markup.block entity.name.tag #FF5370 —
string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name #C3E88D —
string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.quoted.interpolated.vala, string.quoted.interpolated.vala punctuation.definition.string, string.regexp.apacheconf, markup.inline.raw.string, markup.inline.raw punctuation.definition.raw, string.quoted.double.interpolated.crystal, string.quoted.double.interpolated.crystal punctuation.definition.string, text.tex markup.raw #C3E88D —
constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs, constant.integer.apacheconf, keyword.operator.nullable-type, constant.language punctuation.definition.variable, constant.others.fsharp, keyword.other.unit, string.quoted.double.skinparam.value, source.toml constant #F78C6C —
variable.function, support.type.property-name, entity.name.function, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class #C792EA —
entity.name, entity.other, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type, support.class, punctuation.definition.parameters, support.function.construct, markup.changed.git_gutter, markup.underline.link, markup.underline.link.image, markup.underline, meta.symbol.namespace.clojure, entity.mime-type.apacheconf, keyword.operator.function.infix, entity.name.function.infix, entity.name.function.call.kotlin, text.tex support.function.verb, text.tex support.function.texttt, source.reason constant.language.unit, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, constant.language.unit.fsharp, source.wsd support.class.preprocessings, keyword.language.gherkin.feature.scenario, source.nim keyword.other.common.function, entity.name.type.namespace, entity.name.scope-resolution.function.call #6796E6 —
source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, punctuation.definition.template-expression, support.class, entity.name.type, storage.type.string.python, string.interpolated.pug, support.constant.handlebars, source.clojure punctuation.section.set, source.clojure punctuation.section.metadata, entity.global.clojure, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python, punctuation.definition.interpolation, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, support.constant.math, entity.namespace.r, meta.method-call.groovy storage.type.groovy, source.scala entity.name.class.declaration, constant.character.escape, support.function.macro.julia, string.replacement.apacheconf, storage.modifier.using.vala, constant.other.haskell, source.objc entity.name.tag, string.quoted.other.literal.upper.crystal punctuation.definition.string, meta.embedded.line.crystal punctuation.section.embedded, meta.embedded.line.crystal punctuation.section.embedded source.crystal, punctuation.section.embedded, punctuation.section.tag, punctuation.section.embedded source.swift, variable.other.bracket punctuation.definition.variable, string.interpolated.dollar punctuation.definition.string, constant.character.escape punctuation.definition.keyword, source.ocaml entity.name.class constant.numeric, source.reason entity.name.class, keyword.format.specifier.fsharp, support.module.elm, meta.embedded.block.php punctuation.definition.variable.php, source.vala storage.type, support.variable.class.group, entity.name.type.class, source.tf meta.keyword.list, source.tf meta.keyword.map, entity.name.class.lua, markup.substitution #82AAFF —
invalid, invalid.illegal #E53935 bold
variable.language, variable.parameter.function.language.special #F76D47 —
token.error-token #F44747 —
token.debug-token #B267E6 —
comment, punctuation.definition.comment, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, source.clojure meta.symbol.dynamic, support.type.core.rust, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, source.swift keyword.other.declaration-specifier, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, entity.name.record.field.accessor.elm, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, source.vue meta.directive punctuation.separator.key-value, markup.list, markup.mark.constrained markup.mark, markup.block.open — italic
keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.annotation, punctuation.bracket.angle, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, punctuation.separator.method, support.function.textbf, meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, markup.other.anchor, markup.list.bullet, markup.list punctuation.definition — bold
keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.annotation, punctuation.bracket.angle, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, punctuation.separator.method, support.function.textbf, meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, markup.other.anchor, markup.list.bullet, markup.list punctuation.definition — bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, text.html punctuation.section.embedded, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, markup.quote punctuation.definition, markup.fenced_code punctuation.definition, fenced_code.block.language — bold italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, keyword.control.default, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, keyword.control.lua —
meta.embedded.assembly #CFF09E —
entity.name.function #5DC3DD —
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier,storage.type.function.pug, source.clojure storage.control, meta.expression.clojure, source.go keyword.operator, keyword.package, keyword.import, source.kotlin storage.type.import, source.kotlin storage.type.package, storage.type.rust, storage.type.modifier, keyword.control.class.ruby, keyword.control.def.ruby #FB637C —
entity.name.variable #97BEE9 —
keyword.other.new, keyword.other.var.cs, keyword.type.cs, keyword.other.this.cs, #FB637C
entity.name.variable, entity.name.variable.parameter #97BEE9
source.cs keyword.other #FB637C
entity.name.type.class, entity.name.type #FFCB6B
meta.function-call.generic.python #5DC3DD
punctuation.bracket.angle #E4E4E4
meta.method.body.java #97BEE9
variable.other.property #E4E4E4
variable.other.object.property #E4E4E4
meta.object-literal.key.js #97BEE9
meta.toc-list.id.html #B7C4D1
text.html.derivative #B7C4D1
punctuation.definition.typeparameters #E4E4E4
entity.name.type.ts #FFCB6B
support.type.primitive #FFCB6B
variable.other.readwrite #97BEE9 —
meta.jsx.children.js #B7C4D1
support.variable.property #e4e4e4 —
variable.language.this #FB637C
variable.language.super #FB637C
variable.other.object #FFCB6B —
constant.language #60a4f1 —
keyword.control.flow #FB637C —
entity.name.function #5DC3DD
entity.name.function.member #5DC3DD
entity.other.inherited-class —
entity.other.attribute-name.class —
entity.other.attribute-name.id #FF8E94
keyword.control.conditional #FB637C —
keyword.control.loop #FB637C —
keyword.control.trycatch #FB637C —
keyword.control.switch #FB637C —
keyword.operator.new #FB637C
entity.other.attribute-name.html —
punctuation.terminator.statement #E4E4E4
punctuation.accessor #E4E4E4
punctuation.separator #E4E4E4
punctuation.separator.key-value #E4E4E4
punctuation.definition #E4E4E4
punctuation.definition.parameters.begin #E4E4E4
punctuation.definition.parameters.end #E4E4E4
meta.tag.attributes entity.other.attribute-name #6796E6
punctuation.terminator.rule.css #e4e4e4 —
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...
main*
Button.tsx
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 } !` ;
}