Skip to main content
Home Theme VS Code Living Twilight A theme for the wee hours of the morning and night
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 #00000000 activityBar.background #1b1b1d activityBar.border #00000000 activityBar.foreground #d7d3d8 activityBar.inactiveForeground #888589 activityBarBadge.background #61b5ed 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 #ed616f — variable.other.generic-type.haskell #df61ed — storage.type.haskell #ed9961 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Living Twilight — Living Twilight
activityBarBadge.foreground #ffffff
badge.background #61b5ed
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #0c7fb3
breadcrumb.background #1b1b1d
breadcrumb.focusForeground #0c7fb3
breadcrumb.foreground #d7d3d8
button.background #0c7fb3
button.foreground #ffffff
button.hoverBackground #61b5ed
button.secondaryBackground #303032
button.secondaryForeground #ffffff
button.secondaryHoverBackground #545456
checkbox.background #1b1b1d
checkbox.border #00000000
checkbox.foreground #d7d3d8
debugExceptionWidget.background #212122
debugExceptionWidget.border #00000000
debugToolBar.background #212122
debugToolBar.border #00000000
diffEditor.border #00000000
diffEditor.insertedTextBackground #61ed9933
diffEditor.insertedTextBorder #f6f2f708
diffEditor.removedTextBackground #ed616f33
diffEditor.removedTextBorder #f6f2f708
dropdown.background #1b1b1d
dropdown.border #00000000
dropdown.foreground #d7d3d8
editor.background #1b1b1d
editor.findMatchBackground #61b5ed33
editor.findMatchBorder #61b5ed60
editor.findMatchHighlightBackground #61b5ed33
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #61b5ed20
editor.findRangeHighlightBorder #00000000
editor.foldBackground #00958820
editor.foreground #bebabf
editor.hoverHighlightBackground #61b5ed4d
editor.inactiveSelectionBackground #88858933
editor.lineHighlightBackground #00000000
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #61b5ed33
editor.rangeHighlightBorder #00000000
editor.selectionBackground #61b5ed4d
editor.selectionHighlightBackground #61b5ed33
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #61b5ed4d
editor.wordHighlightBorder #ff000000
editor.wordHighlightStrongBackground #61b5ed4d
editor.wordHighlightStrongBorder #00000000
editorBracketHighlight.foreground1 #df61ed
editorBracketHighlight.foreground2 #61eddf
editorBracketHighlight.foreground3 #eddf61
editorBracketHighlight.foreground4 #61ed99
editorBracketHighlight.foreground5 #ed9961
editorBracketHighlight.foreground6 #61b5ed
editorBracketHighlight.unexpectedBracket.foreground #ed616f
editorBracketMatch.background #61b5ed80
editorBracketMatch.border #00000000
editorCodeLens.foreground #79767a
editorCursor.background #000000
editorCursor.foreground #bebabf
editorError.background #00000000
editorError.border #00000000
editorError.foreground #ed616f
editorGroup.border #00000000
editorGroup.emptyBackground #1b1b1d
editorGroupHeader.border #00000000
editorGroupHeader.tabsBackground #262627
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #61ed9980
editorGutter.background #1b1b1d
editorGutter.commentRangeForeground #888589
editorGutter.deletedBackground #874149
editorGutter.foldingControlForeground #888589
editorGutter.modifiedBackground #878042
editorHoverWidget.background #262627
editorHoverWidget.border #545456
editorHoverWidget.foreground #f6f2f7
editorIndentGuide.activeBackground #6f6f71
editorIndentGuide.background #303032
editorInfo.background #00000000
editorInfo.border #00000000
editorInfo.foreground #009588
editorLineNumber.activeForeground #d7d3d8
editorLineNumber.foreground #888589
editorLink.activeForeground #61b5ed
editorMarkerNavigation.background #131315
editorMarkerNavigationError.background #ed616f
editorMarkerNavigationInfo.background #df61ed
editorMarkerNavigationWarning.background #eddf61
editorOverviewRuler.background #1b1b1d
editorOverviewRuler.border #00000000
editorRuler.foreground #1B1B1D
editorSuggestWidget.background #262627
editorSuggestWidget.border #303032
editorSuggestWidget.foreground #bebabf
editorSuggestWidget.highlightForeground #61eddf
editorSuggestWidget.selectedBackground #61eddf20
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #eddf61
editorWhitespace.foreground #88858933
editorWidget.background #262627
editorWidget.foreground #888589
editorWidget.resizeBorder #00000000
focusBorder #444446
foreground #f6f2f7
gitDecoration.addedResourceForeground #61ed99
gitDecoration.conflictingResourceForeground #ed9961
gitDecoration.deletedResourceForeground #ed616f
gitDecoration.ignoredResourceForeground #888589
gitDecoration.modifiedResourceForeground #df61ed
gitDecoration.stageDeletedResourceForeground #ed616f
gitDecoration.stageModifiedResourceForeground #df61ed
gitDecoration.submoduleResourceForeground #df61ed
gitDecoration.untrackedResourceForeground #61ed99
icon.foreground #f6f2f7
input.background #1b1b1d
input.border #00000000
input.foreground #d7d3d8
input.placeholderForeground #a29fa3
inputOption.activeBackground #0c7fb3
inputOption.activeBorder #00000000
inputOption.activeForeground #f6f2f7
list.activeSelectionBackground #545456
list.activeSelectionForeground #d7d3d8
list.dropBackground #61b5ed33
list.focusBackground #61b5ed
list.focusForeground #d7d3d8
list.highlightForeground #61b5ed
list.hoverBackground #303032
list.hoverForeground #d7d3d8
list.inactiveSelectionBackground #303032
list.inactiveSelectionForeground #d7d3d8
listFilterWidget.background #61b5eda0
listFilterWidget.noMatchesOutline #00000000
listFilterWidget.outline #d7d3d8
menu.background #303032
menu.border #00000000
menu.foreground #d7d3d8
menu.selectionBackground #61b5ed20
menu.selectionBorder #00000000
menu.selectionForeground #d7d3d8
menu.separatorBackground #444446
menubar.selectionBackground #303032
menubar.selectionBorder #00000000
menubar.selectionForeground #d7d3d8
merge.commonContentBackground #30303220
merge.commonHeaderBackground #54545640
merge.currentContentBackground #df61ed20
merge.currentHeaderBackground #df61ed40
merge.incomingContentBackground #61eddf20
merge.incomingHeaderBackground #61eddf40
minimap.background #212122
minimap.errorHighlight #ed616f
minimap.findMatchHighlight #61b5ed33
minimap.selectionHighlight #61b5ed4d
minimap.warningHighlight #eddf61
minimapGutter.addedBackground #61ed9980
minimapGutter.deletedBackground #874149
minimapGutter.modifiedBackground #878042
notificationCenter.border #444446
notificationCenterHeader.background #303032
notificationCenterHeader.foreground #d7d3d8
notifications.background #262627
notifications.border #303032
notifications.foreground #d7d3d8
notificationsErrorIcon.foreground #ed616f
notificationsInfoIcon.foreground #61b5ed
notificationsWarningIcon.foreground #eddf61
notificationToast.border #444446
panel.background #1b1b1d
panel.border #303032
panelSection.border #303032
panelTitle.activeBorder #61b5ed
panelTitle.activeForeground #61b5ed
panelTitle.inactiveForeground #a29fa3
peekView.border #df61ed80
peekViewEditor.background #262627
peekViewEditor.matchHighlightBackground #61b5ed4d
peekViewEditor.matchHighlightBorder #00000000
peekViewEditorGutter.background #303032
peekViewResult.background #1b1b1d
peekViewResult.fileForeground #f6f2f7
peekViewResult.lineForeground #df61ed
peekViewResult.matchHighlightBackground #61ed994d
peekViewResult.selectionBackground #61b5ed4d
peekViewResult.selectionForeground #f6f2f7
peekViewTitle.background #131315
peekViewTitleDescription.foreground #888589
peekViewTitleLabel.foreground #f6f2f7
pickerGroup.border #00000000
pickerGroup.foreground #61b5ed
progressBar.background #0c7fb3
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #545456
scrollbarSlider.background #303032
scrollbarSlider.hoverBackground #444446
selection.background #61b5ed4d
settings.focusedRowBackground #ffffff07
settings.headerForeground #f6f2f7
sideBar.background #262627
sideBar.border #00000000
sideBar.dropBackground #61b5ed33
sideBar.foreground #d7d3d8
sideBarSectionHeader.background #1b1b1d
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #d7d3d8
sideBarTitle.foreground #d7d3d8
statusBar.background #262627
statusBar.border #00000000
statusBar.debuggingBackground #ed9961
statusBar.debuggingBorder #262627
statusBar.debuggingForeground #131315
statusBar.foreground #d7d3d8
statusBar.noFolderBackground #212122
statusBar.noFolderBorder #262627
statusBar.noFolderForeground #d7d3d8
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #61b5ed20
statusBarItem.remoteBackground #262627
statusBarItem.remoteForeground #d7d3d8
tab.activeBackground #1b1b1d
tab.activeBorder #00000000
tab.activeBorderTop #d7d3d8
tab.activeForeground #d7d3d8
tab.border #00000000
tab.hoverBackground #303032
tab.hoverBorder #00000000
tab.hoverForeground #d7d3d8
tab.inactiveBackground #262627
tab.inactiveForeground #a29fa3
terminal.ansiBlack #868686
terminal.ansiBlue #469DF1
terminal.ansiBrightBlack #ABABAB
terminal.ansiBrightBlue #74BCFF
terminal.ansiBrightCyan #74F2FF
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFE05B
terminal.ansiCyan #39CDE2
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #D4D4D4
terminal.ansiYellow #E1C542
terminal.border #303032
terminal.foreground #C5C5C5
terminal.selectionBackground #61b5ed20
terminalCursor.background #61b5ed20
terminalCursor.foreground #bebabf
textLink.foreground #61b5ed
titleBar.activeBackground #262627
titleBar.activeForeground #d7d3d8
titleBar.border #00000000
titleBar.inactiveBackground #262627
titleBar.inactiveForeground #d7d3d8
tree.indentGuidesStroke #545456
walkThrough.embeddedEditorBackground #00000050
widget.shadow #1b1b1d #ed616f
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #bebabf —
variable.parameter.function.language.special.self.python #eddf61 —
storage.modifier.lifetime.rust #bebabf —
support.function.std.rust #61b5ed —
entity.name.lifetime.rust #eddf61 —
variable.language.rust #ed616f —
support.constant.edge #df61ed —
constant.other.character-class.regexp #ed616f —
keyword.operator.quantifier.regexp #ed9961 —
punctuation.definition.string.begin,punctuation.definition.string.end #61ed99 —
variable.parameter.function #bebabf —
comment markup.link #888589 —
markup.changed.diff #eddf61 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61b5ed —
markup.inserted.diff #61ed99 —
markup.deleted.diff #ed616f —
meta.function.c,meta.function.cpp #ed616f —
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 #bebabf —
punctuation.separator.key-value #bebabf —
keyword.operator.expression.import #61b5ed —
support.constant.math #eddf61 —
support.constant.property.math #ed9961 —
variable.other.constant #eddf61 —
storage.type.annotation.java, storage.type.object.array.java #eddf61 —
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 #bebabf —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #eddf61 —
keyword.operator.instanceof.java #df61ed —
meta.definition.variable.name.java #ed616f —
keyword.operator.logical #61eddf —
keyword.operator.bitwise #61eddf —
keyword.operator.channel #61eddf —
support.constant.property-value.scss,support.constant.property-value.css #ed9961 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #61eddf —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ed9961 —
punctuation.separator.list.comma.css #bebabf —
support.constant.color.w3c-standard-color-name.css #ed9961 —
support.type.vendored.property-name.css #61eddf —
support.module.node,support.type.object.module,support.module.node #eddf61 —
entity.name.type.module #eddf61 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ed616f —
support.constant.json #ed9961 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #df61ed —
support.type.object.console #ed616f —
support.variable.property.process #ed9961 —
entity.name.function,support.function.console #61b5ed —
keyword.operator.misc.rust #bebabf —
keyword.operator.sigil.rust #df61ed —
keyword.operator.delete #df61ed —
support.type.object.dom #61eddf —
support.variable.dom,support.variable.property.dom #ed616f —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #61eddf —
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 #df61ed —
punctuation.separator.delimiter #bebabf —
punctuation.separator.c,punctuation.separator.cpp #df61ed —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #61eddf —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #df61ed —
variable.parameter.function.language.python #ed9961 —
support.type.python #61eddf —
keyword.operator.logical.python #df61ed —
variable.parameter.function.python #ed9961 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #bebabf —
meta.function-call.generic.python #61b5ed —
constant.character.format.placeholder.other.python #ed9961 —
keyword.operator.assignment.compound #df61ed —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #61eddf —
entity.name.namespace #eddf61 —
variable.language #eddf61 —
token.variable.parameter.java #bebabf —
import.storage.java #eddf61 —
token.package.keyword #df61ed —
entity.name.function, meta.require, support.function.any-method, variable.function #61b5ed —
entity.name.type.namespace #eddf61 —
support.class, entity.name.type.class #eddf61 —
entity.name.class.identifier.namespace.type #eddf61 —
entity.name.class, variable.other.class.js, variable.other.class.ts #eddf61 —
variable.other.class.php #ed616f —
control.elements, keyword.operator.less #ed9961 —
keyword.other.special-method #61b5ed —
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 #df61ed —
token.storage.type.java #eddf61 —
support.type.property-name #bebabf —
support.constant.property-value #bebabf —
support.constant.font-name #ed9961 —
entity.other.inherited-class #eddf61 —
constant.other.symbol #61eddf —
punctuation.definition.constant #ed9961 —
entity.other.attribute-name #ed9961 —
entity.other.attribute-name.id #61b5ed normal
entity.other.attribute-name.class.css #ed9961 normal
markup.heading punctuation.definition.heading, entity.name.section #61b5ed —
keyword.other.unit #ed616f —
markup.bold,todo.bold #ed9961 —
punctuation.definition.bold #eddf61 —
markup.italic, punctuation.definition.italic,todo.emphasis #df61ed —
entity.name.section.markdown #ed616f —
punctuation.definition.heading.markdown #ed616f —
punctuation.definition.list.begin.markdown #ed616f —
markup.heading.setext #bebabf —
punctuation.definition.bold.markdown #ed9961 —
markup.inline.raw.markdown #61ed99 —
markup.inline.raw.string.markdown #61ed99 —
punctuation.definition.list.markdown #ed616f —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ed616f —
beginning.punctuation.definition.list.markdown #ed616f —
punctuation.definition.metadata.markdown #ed616f —
markup.underline.link.markdown,markup.underline.link.image.markdown #df61ed —
string.other.link.title.markdown,string.other.link.description.markdown #61b5ed —
constant.character.escape #61eddf —
punctuation.section.embedded, variable.interpolation #ed616f —
punctuation.section.embedded.begin,punctuation.section.embedded.end #df61ed —
invalid.illegal.bad-ampersand.html #bebabf —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ed616f —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ed616f —
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 #61ed99 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #61eddf —
support.type.property-name.json #ed616f —
support.type.property-name.json punctuation #ed616f —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #df61ed —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #df61ed —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #eddf61 —
keyword.operator.error-control.php #df61ed —
keyword.operator.type.php #df61ed —
punctuation.section.array.begin.php #bebabf —
punctuation.section.array.end.php #bebabf —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #eddf61 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61b5ed —
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 #bebabf —
support.constant.core.rust #ed9961 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ed9961 —
entity.name.goto-label.php,support.other.php #61b5ed —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #61eddf —
keyword.operator.regexp.php #df61ed —
keyword.operator.comparison.php #61eddf —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #df61ed —
meta.function.decorator.python #61b5ed —
support.token.decorator.python,meta.function.decorator.identifier.python #61eddf —
function.parameter #bebabf —
function.parameter.ruby, function.parameter.cs #bebabf —
constant.language.symbol.ruby #61eddf —
inline-color-decoration rgb-value #ed9961 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #eddf61 —
block.scope.end,block.scope.begin #bebabf —
entity.name.variable.local.cs #ed616f —
token.error-token #f44747 —
token.debug-token #df61ed —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #df61ed —
meta.template.expression #bebabf —
keyword.operator.module #df61ed —
support.type.type.flowtype #61b5ed —
support.type.primitive #eddf61 —
meta.property.object #ed616f —
variable.parameter.function.js #ed616f —
keyword.other.template.begin #61ed99 —
keyword.other.template.end #61ed99 —
keyword.other.substitution.begin #61ed99 —
keyword.other.substitution.end #61ed99 —
keyword.operator.assignment #61eddf —
keyword.operator.assignment.go #eddf61 —
keyword.operator.arithmetic.go, keyword.operator.address.go #df61ed —
entity.name.package.go #eddf61 —
support.type.prelude.elm #61eddf —
support.constant.elm #ed9961 —
punctuation.quasi.element #df61ed —
constant.character.entity #ed616f —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #61eddf —
entity.global.clojure #eddf61 —
meta.symbol.clojure #ed616f —
constant.keyword.clojure #61eddf —
meta.arguments.coffee, variable.parameter.function.coffee #ed616f —
meta.scope.prerequisites.makefile #ed616f —
storage.modifier.import.groovy #eddf61 —
meta.method.groovy #61b5ed —
meta.definition.variable.name.groovy #ed616f —
meta.definition.class.inherited.classes.groovy #61ed99 —
support.variable.semantic.hlsl #eddf61 —
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 #df61ed —
text.variable, text.bracketed #ed616f —
support.type.swift, support.type.vb.asp #eddf61 —
entity.name.function.xi #eddf61 —
entity.name.class.xi #61eddf —
constant.character.character-class.regexp.xi #ed616f —
constant.regexp.xi #df61ed —
keyword.control.xi #61eddf —
beginning.punctuation.definition.quote.markdown.xi #61ed99 —
beginning.punctuation.definition.list.markdown.xi #888589 —
constant.character.xi #61b5ed —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #888589 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #eddf61 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ed616f —
meta.brace.square #bebabf —
comment, punctuation.definition.comment #888589 italic
markup.quote.markdown #888589 —
punctuation.definition.block.sequence.item.yaml #bebabf —
constant.language.symbol.elixir #61eddf —
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 } !` ;
}
Living Twilight | Coding Theme