Skip to main content
Home Theme VS Code Nezuko Dark Theme Theme inspired by the demon slayer character Nezuko!
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.background #281717 activityBar.foreground #903048 activityBar.inactiveForeground #ffffff93 activityBarBadge.background #903048 activityBarBadge.foreground #ffffff badge.background #903048 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 #f9c0c0 — variable.other.generic-type.haskell #a86078 — storage.type.haskell #60884e — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Nezuko Dark Theme — Nezuko Dark Theme
badge.foreground
#fffff0
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #903048bd
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #903048
button.foreground #ffffff
button.hoverBackground #9030488f
button.secondaryBackground #484848
button.secondaryForeground #ffffff
button.secondaryHoverBackground #484848a1
checkbox.background #210000
checkbox.border #00000000
checkbox.foreground #fffff0
debugExceptionWidget.background #210000
debugExceptionWidget.border #47474700
debugToolBar.background #210000
debugToolBar.border #47474700
diffEditor.border #444444
diffEditor.insertedTextBackground #c0d5b433
diffEditor.removedTextBackground #f2686833
dropdown.background #210000
dropdown.border #00000000
dropdown.foreground #fffff0
editor.background #1f1f1f
editor.findMatchBackground #515c6a
editor.findMatchBorder #903048
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #cd8888
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #2e1f1f
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #2e1f1f
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #d8789032
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #c22f2f
editorGroup.border #444444
editorGroup.emptyBackground #1f1f1f
editorGroupHeader.tabsBackground #281515
editorGutter.addedBackground #d87890
editorGutter.background #1e1e1e
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #cd8a48
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #7860a8
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #903048
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #903048
editorMarkerNavigationWarning.background #d87890
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #d87890
editorSuggestWidget.selectedBackground #561e2c62
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #fff675
editorWhitespace.foreground #e3e4e229
editorWidget.background #210000
editorWidget.foreground #cccccc
editorWidget.resizeBorder #d87890
focusBorder #cd5c5c00
foreground #903048
gitDecoration.addedResourceForeground #60a8d8
gitDecoration.conflictingResourceForeground #7860a8
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #928f8f
gitDecoration.modifiedResourceForeground #c09078
gitDecoration.stageDeletedResourceForeground #903048
gitDecoration.stageModifiedResourceForeground #c09078
gitDecoration.submoduleResourceForeground #78c0f0
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #903048
input.background #210000
input.border #00000000
input.foreground #fffff0
input.placeholderForeground #a6a6a6
inputOption.activeBackground #fffff02c
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #210000
list.activeSelectionForeground #ffffff
list.dropBackground #21000046
list.focusBackground #2c0707d5
list.focusForeground #cccccc
list.highlightForeground #dedada
list.hoverBackground #2c0707d5
list.hoverForeground #dedada
list.inactiveSelectionBackground #210000
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #301818
listFilterWidget.noMatchesOutline #be110000
listFilterWidget.outline #00000000
menu.background #342323
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #210000
menu.selectionBorder #00000000
menu.selectionForeground #fffff0
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #fffff0
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #392b56
merge.currentHeaderBackground #7860a8
merge.incomingContentBackground #541f2c
merge.incomingHeaderBackground #903048
minimap.background #1f1f1f
minimap.errorHighlight #c22f2f
minimap.findMatchHighlight #515c6a
minimap.selectionHighlight #2e1f1f
minimap.warningHighlight #fff675
minimapGutter.addedBackground #d87890
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #cd8a48
notificationCenter.border #47474700
notificationCenterHeader.background #210000
notificationCenterHeader.foreground #fffff0
notifications.background #342323
notifications.border #d87890
notifications.foreground #fffff0
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #47474700
panel.background #210000
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #903048
pickerGroup.foreground #d87890
progressBar.background #903048
scrollbar.shadow #262626
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #3419192c
settings.focusedRowBackground #ffffff07
settings.headerForeground #903048
sideBar.background #342323
sideBar.dropBackground #21000046
sideBar.foreground #d8c0a8
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #ded6d6
sideBarTitle.foreground #cd5c5c
statusBar.background #210000
statusBar.debuggingBackground #903048
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #210000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #903048
statusBarItem.remoteForeground #ffffff
tab.activeBackground #210000
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #fffff0
tab.border #903048
tab.inactiveBackground #281515
tab.inactiveForeground #fffff0ad
terminal.ansiBlack #7860a8
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.border #80808059
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #483030
terminalCursor.foreground #fffff0
textLink.foreground #d87890
titleBar.activeBackground #210000
titleBar.activeForeground #fffff0
titleBar.border #00000000
titleBar.inactiveBackground #210000
titleBar.inactiveForeground #fffff0
tree.indentGuidesStroke #903048
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #f9c0c0
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #cd8888 —
variable.parameter.function.language.special.self.python #96cb6a —
storage.modifier.lifetime.rust #cd8888 —
support.function.std.rust #61afef —
entity.name.lifetime.rust #96cb6a —
variable.language.rust #f9c0c0 —
support.constant.edge #a86078 —
constant.other.character-class.regexp #f9c0c0 —
keyword.operator.quantifier.regexp #60884e —
punctuation.definition.string.begin,punctuation.definition.string.end #e0b268 —
variable.parameter.function #cd8888 —
comment markup.link #6b7384 —
markup.changed.diff #96cb6a —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61afef —
markup.inserted.diff #e0b268 —
markup.deleted.diff #f9c0c0 —
meta.function.c,meta.function.cpp #f9c0c0 —
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 #cd8888 —
punctuation.separator.key-value #cd8888 —
keyword.operator.expression.import #61afef —
support.constant.math #96cb6a —
support.constant.property.math #60884e —
variable.other.constant #96cb6a —
storage.type.annotation.java, storage.type.object.array.java #96cb6a —
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 #cd8888 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #96cb6a —
keyword.operator.instanceof.java #a86078 —
meta.definition.variable.name.java #f9c0c0 —
keyword.operator.logical #1db5f0 —
keyword.operator.bitwise #1db5f0 —
keyword.operator.channel #1db5f0 —
support.constant.property-value.scss,support.constant.property-value.css #60884e —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #1db5f0 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #60884e —
punctuation.separator.list.comma.css #cd8888 —
support.constant.color.w3c-standard-color-name.css #60884e —
support.type.vendored.property-name.css #1db5f0 —
support.module.node,support.type.object.module,support.module.node #96cb6a —
entity.name.type.module #96cb6a —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #f9c0c0 —
support.constant.json #60884e —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #a86078 —
support.type.object.console #f9c0c0 —
support.variable.property.process #60884e —
entity.name.function,support.function.console #61afef —
keyword.operator.misc.rust #cd8888 —
keyword.operator.sigil.rust #a86078 —
keyword.operator.delete #a86078 —
support.type.object.dom #1db5f0 —
support.variable.dom,support.variable.property.dom #f9c0c0 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #1db5f0 —
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 #a86078 —
punctuation.separator.delimiter #cd8888 —
punctuation.separator.c,punctuation.separator.cpp #a86078 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #1db5f0 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #a86078 —
variable.parameter.function.language.python #60884e —
support.type.python #1db5f0 —
keyword.operator.logical.python #a86078 —
variable.parameter.function.python #60884e —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #cd8888 —
meta.function-call.generic.python #61afef —
constant.character.format.placeholder.other.python #60884e —
keyword.operator.assignment.compound #a86078 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #1db5f0 —
entity.name.namespace #96cb6a —
variable.language #96cb6a —
token.variable.parameter.java #cd8888 —
import.storage.java #96cb6a —
token.package.keyword #a86078 —
entity.name.function, meta.require, support.function.any-method, variable.function #61afef —
entity.name.type.namespace #96cb6a —
support.class, entity.name.type.class #96cb6a —
entity.name.class.identifier.namespace.type #96cb6a —
entity.name.class, variable.other.class.js, variable.other.class.ts #96cb6a —
variable.other.class.php #f9c0c0 —
control.elements, keyword.operator.less #60884e —
keyword.other.special-method #61afef —
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 #a86078 —
token.storage.type.java #96cb6a —
support.type.property-name #cd8888 —
support.constant.property-value #cd8888 —
support.constant.font-name #60884e —
entity.other.inherited-class #96cb6a —
constant.other.symbol #1db5f0 —
punctuation.definition.constant #60884e —
entity.other.attribute-name #60884e —
entity.other.attribute-name.id #61afef normal
entity.other.attribute-name.class.css #60884e normal
markup.heading punctuation.definition.heading, entity.name.section #61afef —
keyword.other.unit #f9c0c0 —
markup.bold,todo.bold #60884e —
punctuation.definition.bold #96cb6a —
markup.italic, punctuation.definition.italic,todo.emphasis #a86078 —
entity.name.section.markdown #f9c0c0 —
punctuation.definition.heading.markdown #f9c0c0 —
punctuation.definition.list.begin.markdown #f9c0c0 —
markup.heading.setext #cd8888 —
punctuation.definition.bold.markdown #60884e —
markup.inline.raw.markdown #e0b268 —
markup.inline.raw.string.markdown #e0b268 —
punctuation.definition.list.markdown #f9c0c0 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #f9c0c0 —
beginning.punctuation.definition.list.markdown #f9c0c0 —
punctuation.definition.metadata.markdown #f9c0c0 —
markup.underline.link.markdown,markup.underline.link.image.markdown #a86078 —
string.other.link.title.markdown,string.other.link.description.markdown #61afef —
constant.character.escape #1db5f0 —
punctuation.section.embedded, variable.interpolation #f9c0c0 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #a86078 —
invalid.illegal.bad-ampersand.html #cd8888 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #f9c0c0 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #f9c0c0 —
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 #e0b268 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #1db5f0 —
support.type.property-name.json #f9c0c0 —
support.type.property-name.json punctuation #f9c0c0 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #a86078 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #a86078 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #96cb6a —
keyword.operator.error-control.php #a86078 —
keyword.operator.type.php #a86078 —
punctuation.section.array.begin.php #cd8888 —
punctuation.section.array.end.php #cd8888 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #96cb6a —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61afef —
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 #cd8888 —
support.constant.core.rust #60884e —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #60884e —
entity.name.goto-label.php,support.other.php #61afef —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #1db5f0 —
keyword.operator.regexp.php #a86078 —
keyword.operator.comparison.php #1db5f0 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #a86078 —
meta.function.decorator.python #61afef —
support.token.decorator.python,meta.function.decorator.identifier.python #1db5f0 —
function.parameter #cd8888 —
function.parameter.ruby, function.parameter.cs #cd8888 —
constant.language.symbol.ruby #1db5f0 —
inline-color-decoration rgb-value #60884e —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #96cb6a —
block.scope.end,block.scope.begin #cd8888 —
entity.name.variable.local.cs #f9c0c0 —
token.error-token #f44747 —
token.debug-token #a86078 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #a86078 —
meta.template.expression #cd8888 —
keyword.operator.module #a86078 —
support.type.type.flowtype #61afef —
support.type.primitive #96cb6a —
meta.property.object #f9c0c0 —
variable.parameter.function.js #f9c0c0 —
keyword.other.template.begin #e0b268 —
keyword.other.template.end #e0b268 —
keyword.other.substitution.begin #e0b268 —
keyword.other.substitution.end #e0b268 —
keyword.operator.assignment #1db5f0 —
keyword.operator.assignment.go #96cb6a —
keyword.operator.arithmetic.go, keyword.operator.address.go #a86078 —
entity.name.package.go #96cb6a —
support.type.prelude.elm #1db5f0 —
support.constant.elm #60884e —
punctuation.quasi.element #a86078 —
constant.character.entity #f9c0c0 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #1db5f0 —
entity.global.clojure #96cb6a —
meta.symbol.clojure #f9c0c0 —
constant.keyword.clojure #1db5f0 —
meta.arguments.coffee, variable.parameter.function.coffee #f9c0c0 —
meta.scope.prerequisites.makefile #f9c0c0 —
storage.modifier.import.groovy #96cb6a —
meta.method.groovy #61afef —
meta.definition.variable.name.groovy #f9c0c0 —
meta.definition.class.inherited.classes.groovy #e0b268 —
support.variable.semantic.hlsl #96cb6a —
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 #a86078 —
text.variable, text.bracketed #f9c0c0 —
support.type.swift, support.type.vb.asp #96cb6a —
entity.name.function.xi #96cb6a —
entity.name.class.xi #1db5f0 —
constant.character.character-class.regexp.xi #f9c0c0 —
constant.regexp.xi #a86078 —
keyword.control.xi #1db5f0 —
beginning.punctuation.definition.quote.markdown.xi #e0b268 —
beginning.punctuation.definition.list.markdown.xi #6b7384 —
constant.character.xi #61afef —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #6b7384 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #96cb6a —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #f9c0c0 —
meta.brace.square #cd8888 —
comment, punctuation.definition.comment #6b7384 italic
markup.quote.markdown #6b7384 —
punctuation.definition.block.sequence.item.yaml #cd8888 —
constant.language.symbol.elixir #1db5f0 —
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
text.html.derivative #fffff0 —
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 } !` ;
}
Nezuko Dark Theme | Coding Theme