Skip to main content
Home Theme VS Code Nebula Colorscheme Nebula is a dark VS Code theme that blends the vastness of space with the playful vibrancy of candy.
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 #121212 activityBar.background #121212 activityBar.border #121212 activityBar.foreground #d5d5d5 activityBar.inactiveForeground #535353 activityBarBadge.background #323232 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 #f39660 — variable.other.generic-type.haskell #fc5d7c — storage.type.haskell #b39df3 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Nebula Colorscheme — Nebula
activityBarBadge.foreground
#d5d5d5
badge.background #323232
badge.foreground #d5d5d5
breadcrumb.activeSelectionForeground #d5d5d5
breadcrumb.background #121212
breadcrumb.focusForeground #d5d5d5
breadcrumb.foreground #949494
button.background #323232
button.foreground #d5d5d5
button.hoverBackground #535353e0
button.secondaryBackground #212121
button.secondaryForeground #d5d5d5
button.secondaryHoverBackground #323232e0
checkbox.background #212121
checkbox.border #212121
checkbox.foreground #d5d5d5
debugExceptionWidget.background #121212
debugExceptionWidget.border #121212
debugToolBar.background #121212
debugToolBar.border #121212
diffEditor.border #212121
diffEditor.insertedTextBackground #43600033
diffEditor.removedTextBackground #64313133
dropdown.background #212121
dropdown.border #212121
dropdown.foreground #d5d5d5
editor.background #121212
editor.findMatchBackground #535353e0
editor.findMatchBorder #535353
editor.findMatchHighlightBackground #32323299
editor.findMatchHighlightBorder #323232
editor.findRangeHighlightBackground #212121e0
editor.findRangeHighlightBorder #32323250
editor.foldBackground #32323270
editor.foreground #e2e3e3
editor.hoverHighlightBackground #21212199
editor.inactiveSelectionBackground #323232e0
editor.lineHighlightBackground #21212199
editor.lineHighlightBorder #121212
editor.rangeHighlightBackground #32323299
editor.rangeHighlightBorder #32323299
editor.selectionBackground #232323
editor.selectionHighlightBackground #323232e0
editor.selectionHighlightBorder #323232
editor.wordHighlightBackground #53535350
editor.wordHighlightBorder #53535350
editor.wordHighlightStrongBackground #323232e0
editor.wordHighlightStrongBorder #323232
editorBracketMatch.background #323232
editorBracketMatch.border #121212
editorCodeLens.foreground #949494
editorCursor.background #121212
editorCursor.foreground #aeafad
editorError.background #12121200
editorError.border #121212
editorError.foreground #ff0038e0
editorGroup.border #212121
editorGroup.emptyBackground #121212
editorGroupHeader.border #121212
editorGroupHeader.tabsBackground #121212
editorGroupHeader.tabsBorder #121212
editorGutter.addedBackground #587c0c
editorGutter.background #121212
editorGutter.commentRangeForeground #323232
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #323232
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #212121
editorHoverWidget.border #121212
editorHoverWidget.foreground #b4b4b4
editorIndentGuide.activeBackground1 #535353
editorIndentGuide.background1 #262626
editorInfo.background #12121200
editorInfo.border #121212
editorInfo.foreground #47eae0e0
editorLineNumber.activeForeground #d5d5d5
editorLineNumber.foreground #737373
editorLink.activeForeground #949494
editorMarkerNavigation.background #212121
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #121212
editorOverviewRuler.border #121212
editorRuler.foreground #212121
editorSuggestWidget.background #1c1c1c
editorSuggestWidget.border #121212
editorSuggestWidget.foreground #737373
editorSuggestWidget.highlightForeground #d5d5d5
editorSuggestWidget.selectedBackground #323232
editorWarning.background #12121200
editorWarning.border #121212
editorWarning.foreground #ff7700e0
editorWhitespace.foreground #53535399
editorWidget.background #212121
editorWidget.foreground #f5f5f5
editorWidget.resizeBorder #535353
focusBorder #32323200
foreground #f5f5f5
gitDecoration.addedResourceForeground #69cf8d
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #f5f5f5
input.background #212121
input.border #212121
input.foreground #d5d5d5
input.placeholderForeground #a7a7a7
inputOption.activeBackground #323232e0
inputOption.activeBorder #323232e0
inputOption.activeForeground #d5d5d5e0
list.activeSelectionBackground #32323280
list.activeSelectionForeground #d5d5d5
list.dropBackground #32323250
list.focusBackground #323232
list.focusForeground #d5d5d5
list.highlightForeground #d5d5d5
list.hoverBackground #32323260
list.hoverForeground #b4b4b4
list.inactiveSelectionBackground #212121
list.inactiveSelectionForeground #a7a7a7
listFilterWidget.background #212121
listFilterWidget.noMatchesOutline #ff003838
listFilterWidget.outline #32323299
menu.background #212121
menu.border #212121
menu.foreground #b4b4b4
menu.selectionBackground #323232
menu.selectionBorder #212121
menu.selectionForeground #d5d5d5
menu.separatorBackground #535353
menubar.selectionBackground #d5d5d51a
menubar.selectionBorder #121212
menubar.selectionForeground #b4b4b4
merge.commonContentBackground #28282899
merge.commonHeaderBackground #38383899
merge.currentContentBackground #27403B99
merge.currentHeaderBackground #36736699
merge.incomingContentBackground #28384B99
merge.incomingHeaderBackground #395F8F99
minimap.background #121212
minimap.errorHighlight #ff0038e0
minimap.findMatchHighlight #535353e0
minimap.selectionHighlight #23232370
minimap.warningHighlight #ff7700e0
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #212121
notificationCenterHeader.background #323232
notificationCenterHeader.foreground #f5f5f5
notifications.background #212121
notifications.border #535353
notifications.foreground #d5d5d5
notificationsErrorIcon.foreground #ff0038
notificationsInfoIcon.foreground #47eae0
notificationsWarningIcon.foreground #cca700
notificationToast.border #212121
panel.background #121212
panel.border #212121
panelSection.border #535353e0
panelTitle.activeBorder #737373
panelTitle.activeForeground #b4b4b4
panelTitle.inactiveForeground #949494e0
peekView.border #535353
peekViewEditor.background #212121
peekViewEditor.matchHighlightBackground #212121e0
peekViewEditor.matchHighlightBorder #535353e0
peekViewEditorGutter.background #212121
peekViewResult.background #212121
peekViewResult.fileForeground #d5d5d5
peekViewResult.lineForeground #a7a7a7
peekViewResult.matchHighlightBackground #535353e0
peekViewResult.selectionBackground #535353e0
peekViewResult.selectionForeground #d5d5d5
peekViewTitle.background #212121
peekViewTitleDescription.foreground #b4b4b4e0
peekViewTitleLabel.foreground #f5f5f5e0
pickerGroup.border #535353
pickerGroup.foreground #a7a7a7
progressBar.background #737373
scrollbar.shadow #000000
scrollbarSlider.activeBackground #323232
scrollbarSlider.background #121212
scrollbarSlider.hoverBackground #212121
selection.background #323232
settings.focusedRowBackground #ffffff07
settings.headerForeground #f5f5f5
sideBar.background #121212
sideBar.border #212121
sideBar.dropBackground #32323250
sideBar.foreground #b4b4b4
sideBarSectionHeader.background #121212
sideBarSectionHeader.border #121212
sideBarSectionHeader.foreground #b4b4b4
sideBarTitle.foreground #f5f5f5
statusBar.background #121212
statusBar.border #212121
statusBar.debuggingBackground #121212e0
statusBar.debuggingBorder #121212
statusBar.debuggingForeground #d5d5d5
statusBar.foreground #d5d5d5
statusBar.noFolderBackground #121212
statusBar.noFolderBorder #121212
statusBar.noFolderForeground #d5d5d5
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #32323299
statusBarItem.remoteBackground #121212
statusBarItem.remoteForeground #d5d5d5
tab.activeBackground #121212
tab.activeBorder #121212
tab.activeBorderTop #212121
tab.activeForeground #f5f5f5
tab.border #121212
tab.hoverBackground #121212
tab.hoverBorder #121212
tab.hoverForeground #d5d5d5
tab.inactiveBackground #212121
tab.inactiveForeground #949494
terminal.ansiBlack #535353
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #737373
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #f5f5f5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #d5d5d5
terminal.ansiYellow #e5e510
terminal.border #535353e0
terminal.foreground #b4b4b4
terminal.selectionBackground #32323270
terminalCursor.background #323232
terminalCursor.foreground #d5d5d5
textLink.foreground #f5f5f5
titleBar.activeBackground #121212
titleBar.activeForeground #b4b4b4
titleBar.border #12121200
titleBar.inactiveBackground #212121e0
titleBar.inactiveForeground #b4b4b499
tree.indentGuidesStroke #212121
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #f39660
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #e2e3e3 —
variable.parameter.function.language.special.self.python #77cce0 —
storage.modifier.lifetime.rust #e2e3e3 —
support.function.std.rust #9ed072 —
entity.name.lifetime.rust #77cce0 —
variable.language.rust #f39660 —
support.constant.edge #fc5d7c —
constant.other.character-class.regexp #f39660 —
keyword.operator.quantifier.regexp #b39df3 —
punctuation.definition.string.begin,punctuation.definition.string.end #e7c664 —
variable.parameter.function #e2e3e3 —
comment markup.link #414550 —
markup.changed.diff #77cce0 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #9ed072 —
markup.inserted.diff #e7c664 —
markup.deleted.diff #f39660 —
meta.function.c,meta.function.cpp #f39660 —
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 #e2e3e3 —
punctuation.separator.key-value #e2e3e3 —
keyword.operator.expression.import #9ed072 —
support.constant.math #77cce0 —
support.constant.property.math #b39df3 —
variable.other.constant #77cce0 —
storage.type.annotation.java, storage.type.object.array.java #77cce0 —
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 #e2e3e3 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #77cce0 —
keyword.operator.instanceof.java #fc5d7c —
meta.definition.variable.name.java #f39660 —
keyword.operator.logical #ff6077 —
keyword.operator.bitwise #ff6077 —
keyword.operator.channel #ff6077 —
support.constant.property-value.scss,support.constant.property-value.css #b39df3 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #ff6077 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #b39df3 —
punctuation.separator.list.comma.css #e2e3e3 —
support.constant.color.w3c-standard-color-name.css #b39df3 —
support.type.vendored.property-name.css #ff6077 —
support.module.node,support.type.object.module,support.module.node #77cce0 —
entity.name.type.module #77cce0 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #f39660 —
support.constant.json #b39df3 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #fc5d7c —
support.type.object.console #f39660 —
support.variable.property.process #b39df3 —
entity.name.function,support.function.console #9ed072 —
keyword.operator.misc.rust #e2e3e3 —
keyword.operator.sigil.rust #fc5d7c —
keyword.operator.delete #fc5d7c —
support.type.object.dom #ff6077 —
support.variable.dom,support.variable.property.dom #f39660 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #ff6077 —
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 #fc5d7c —
punctuation.separator.delimiter #e2e3e3 —
punctuation.separator.c,punctuation.separator.cpp #fc5d7c —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #ff6077 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #fc5d7c —
variable.parameter.function.language.python #b39df3 —
support.type.python #ff6077 —
keyword.operator.logical.python #fc5d7c —
variable.parameter.function.python #b39df3 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #e2e3e3 —
meta.function-call.generic.python #9ed072 —
constant.character.format.placeholder.other.python #b39df3 —
keyword.operator.assignment.compound #fc5d7c —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #ff6077 —
entity.name.namespace #77cce0 —
variable.language #77cce0 —
token.variable.parameter.java #e2e3e3 —
import.storage.java #77cce0 —
token.package.keyword #fc5d7c —
entity.name.function, meta.require, support.function.any-method, variable.function #9ed072 —
entity.name.type.namespace #77cce0 —
support.class, entity.name.type.class #77cce0 —
entity.name.class.identifier.namespace.type #77cce0 —
entity.name.class, variable.other.class.js, variable.other.class.ts #77cce0 —
variable.other.class.php #f39660 —
control.elements, keyword.operator.less #b39df3 —
keyword.other.special-method #9ed072 —
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 #fc5d7c —
token.storage.type.java #77cce0 —
support.type.property-name #e2e3e3 —
support.constant.property-value #e2e3e3 —
support.constant.font-name #b39df3 —
entity.other.inherited-class #77cce0 —
constant.other.symbol #ff6077 —
punctuation.definition.constant #b39df3 —
entity.other.attribute-name #b39df3 —
entity.other.attribute-name.id #9ed072 normal
entity.other.attribute-name.class.css #b39df3 normal
markup.heading punctuation.definition.heading, entity.name.section #9ed072 —
keyword.other.unit #f39660 —
markup.bold,todo.bold #b39df3 —
punctuation.definition.bold #77cce0 —
markup.italic, punctuation.definition.italic,todo.emphasis #fc5d7c —
entity.name.section.markdown #f39660 —
punctuation.definition.heading.markdown #f39660 —
punctuation.definition.list.begin.markdown #f39660 —
markup.heading.setext #e2e3e3 —
punctuation.definition.bold.markdown #b39df3 —
markup.inline.raw.markdown #e7c664 —
markup.inline.raw.string.markdown #e7c664 —
punctuation.definition.list.markdown #f39660 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #f39660 —
beginning.punctuation.definition.list.markdown #f39660 —
punctuation.definition.metadata.markdown #f39660 —
markup.underline.link.markdown,markup.underline.link.image.markdown #fc5d7c —
string.other.link.title.markdown,string.other.link.description.markdown #9ed072 —
constant.character.escape #ff6077 —
punctuation.section.embedded, variable.interpolation #f39660 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #fc5d7c —
invalid.illegal.bad-ampersand.html #e2e3e3 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #f39660 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #f39660 —
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 #e7c664 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #ff6077 —
support.type.property-name.json #f39660 —
support.type.property-name.json punctuation #f39660 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #fc5d7c —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #fc5d7c —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #77cce0 —
keyword.operator.error-control.php #fc5d7c —
keyword.operator.type.php #fc5d7c —
punctuation.section.array.begin.php #e2e3e3 —
punctuation.section.array.end.php #e2e3e3 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #77cce0 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #9ed072 —
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 #e2e3e3 —
support.constant.core.rust #b39df3 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #b39df3 —
entity.name.goto-label.php,support.other.php #9ed072 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #ff6077 —
keyword.operator.regexp.php #fc5d7c —
keyword.operator.comparison.php #ff6077 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #fc5d7c —
meta.function.decorator.python #9ed072 —
support.token.decorator.python,meta.function.decorator.identifier.python #ff6077 —
function.parameter #e2e3e3 —
function.parameter.ruby, function.parameter.cs #e2e3e3 —
constant.language.symbol.ruby #ff6077 —
inline-color-decoration rgb-value #b39df3 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #77cce0 —
block.scope.end,block.scope.begin #e2e3e3 —
entity.name.variable.local.cs #f39660 —
token.error-token #f44747 —
token.debug-token #fc5d7c —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #fc5d7c —
meta.template.expression #e2e3e3 —
keyword.operator.module #fc5d7c —
support.type.type.flowtype #9ed072 —
support.type.primitive #77cce0 —
meta.property.object #f39660 —
variable.parameter.function.js #f39660 —
keyword.other.template.begin #e7c664 —
keyword.other.template.end #e7c664 —
keyword.other.substitution.begin #e7c664 —
keyword.other.substitution.end #e7c664 —
keyword.operator.assignment #ff6077 —
keyword.operator.assignment.go #77cce0 —
keyword.operator.arithmetic.go, keyword.operator.address.go #fc5d7c —
entity.name.package.go #77cce0 —
support.type.prelude.elm #ff6077 —
support.constant.elm #b39df3 —
punctuation.quasi.element #fc5d7c —
constant.character.entity #f39660 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #ff6077 —
entity.global.clojure #77cce0 —
meta.symbol.clojure #f39660 —
constant.keyword.clojure #ff6077 —
meta.arguments.coffee, variable.parameter.function.coffee #f39660 —
meta.scope.prerequisites.makefile #f39660 —
storage.modifier.import.groovy #77cce0 —
meta.method.groovy #9ed072 —
meta.definition.variable.name.groovy #f39660 —
meta.definition.class.inherited.classes.groovy #e7c664 —
support.variable.semantic.hlsl #77cce0 —
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 #fc5d7c —
text.variable, text.bracketed #f39660 —
support.type.swift, support.type.vb.asp #77cce0 —
entity.name.function.xi #77cce0 —
entity.name.class.xi #ff6077 —
constant.character.character-class.regexp.xi #f39660 —
constant.regexp.xi #fc5d7c —
keyword.control.xi #ff6077 —
beginning.punctuation.definition.quote.markdown.xi #e7c664 —
beginning.punctuation.definition.list.markdown.xi #414550 —
constant.character.xi #9ed072 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #414550 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #77cce0 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #f39660 —
meta.brace.square #e2e3e3 —
comment, punctuation.definition.comment #414550 italic
markup.quote.markdown #414550 —
punctuation.definition.block.sequence.item.yaml #e2e3e3 —
constant.language.symbol.elixir #ff6077 —
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
keyword.control, keyword.operator.new, support.function, support.type, emphasis, comment, comment.block, comment.block.documentation, comment.line, support.type.property-name, support.variable, support.other, storage, support.constant, constant.other, constant.regexp, storage.modifier, punctuation.accessor, variable.language, meta.function.parameters, keyword.operator.logical.python — 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...
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 } !` ;
}
Nebula Colorscheme | Coding Theme