Skip to main content
Home Theme VS Code Nautilus Dark Theme "Plongez dans les profondeurs avec le Nautilus Dark Theme, inspiré par le puissant titan des abysses de League of Legends. Ce thème sombre et élégant enveloppe votre environnement de développement dans une atmosphère immersive, où chaque ligne de code émerge des ténèbres comme une ancre jetée dans l
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 #0d0c0c activityBar.background #0d0c0c activityBar.border #6078fb activityBar.foreground #edff19 activityBar.inactiveForeground #f5f5f5 activityBarBadge.background #ffef00 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 #fffb00 — variable.other.generic-type.haskell #ff0084 — storage.type.haskell #f0a836 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Nautilus Dark Theme — Nautilus Dark Theme Nautilus Dark Theme | Coding Theme
activityBarBadge.foreground
#926565
badge.background #414141
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #0d0c0c
breadcrumb.background #0d0c0c
breadcrumb.focusForeground #0d0c0c
breadcrumb.foreground #ffffff
button.background #033c62
button.foreground #ffffff
button.hoverBackground #1177bb
button.secondaryBackground #1f4579
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #241f1f
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #4f0000
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #241f1f
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #0d0c0c
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #ffffff55
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #ffef00
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d4100
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #4e5e5930
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0045001a
editorBracketMatch.border #fff4f4
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #f0ffe0
editorError.background #ff0c0000
editorError.border #ffffff00
editorError.foreground #d12300
editorGroup.border #1f0707
editorGroup.emptyBackground #0d0c0c
editorGroupHeader.tabsBackground #0f0c0c
editorGroupHeader.tabsBorder #0f0c0c
editorGutter.addedBackground #587c0c
editorGutter.background #0d0c0c
editorGutter.commentRangeForeground #e6cdcd
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #e6cdcd
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #222226
editorHoverWidget.border #aba1a1
editorHoverWidget.foreground #928383
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #69a1d3
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #ffffff
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #161617
editorMarkerNavigationError.background #ff6b4d
editorMarkerNavigationInfo.background #282828
editorMarkerNavigationWarning.background #000000
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #151212
editorSuggestWidget.background #211f1f
editorSuggestWidget.border #ea7f7f
editorSuggestWidget.foreground #70c2db
editorSuggestWidget.highlightForeground #fb5b2b
editorSuggestWidget.selectedBackground #2c2d2ea1
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #151313
foreground #ffffff
gitDecoration.addedResourceForeground #81b88b
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 #ffffff
input.background #241f1f
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #043658
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0099ff
list.hoverBackground #ffffff00
list.hoverForeground #7b5050
list.inactiveSelectionBackground #00000014
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #fbf0f0
menu.background #171717
menu.border #ead5d5
menu.foreground #ffffff
menu.selectionBackground #cfb8b820
menu.selectionBorder #cb0d0d00
menu.selectionForeground #ffffff
menu.separatorBackground #ffffff
menubar.selectionBackground #ffffff00
menubar.selectionBorder #ffffff
menubar.selectionForeground #ffffff
merge.commonContentBackground #38343400
merge.commonHeaderBackground #38383800
merge.currentContentBackground #27403b00
merge.currentHeaderBackground #36736600
merge.incomingContentBackground #28384b00
merge.incomingHeaderBackground #39608f00
minimap.background #0d0c0c
minimap.errorHighlight #d12300
minimap.findMatchHighlight #515c6a00
minimap.selectionHighlight #4e5e5930
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #cb7878
notificationCenterHeader.background #151517
notificationCenterHeader.foreground #fbfbfb
notifications.background #ffffff
notifications.border #e3e3e4
notifications.foreground #000000
notificationsErrorIcon.foreground #ea4422
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #ff0000
panel.background #0f0c0c
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #000000
peekViewEditor.background #111010
peekViewEditor.matchHighlightBackground #1f1d1999
peekViewEditor.matchHighlightBorder #cd0b0b
peekViewEditorGutter.background #131212
peekViewResult.background #252526
peekViewResult.fileForeground #f7ff00
peekViewResult.lineForeground #ffffff
peekViewResult.matchHighlightBackground #1915124d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #f2f2f2
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #3794ff
progressBar.background #c02f0e
scrollbar.shadow #cf7676
scrollbarSlider.activeBackground #0d0c0c
scrollbarSlider.background #47454566
scrollbarSlider.hoverBackground #0d0c0c
selection.background #256aa7
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #0f0d0d
sideBar.border #0f0d0d
sideBar.dropBackground #383b3d
sideBar.foreground #ffffff
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #ffffff00
sideBarSectionHeader.foreground #c7ff00
sideBarTitle.foreground #ebff00
statusBar.background #0f0c0c
statusBar.border #0f0c0c
statusBar.debuggingBackground #0f0c0c
statusBar.debuggingBorder #111010
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #0f0c0c
statusBar.noFolderBorder #ab7474
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff30
statusBarItem.remoteBackground #0f0c0c
statusBarItem.remoteForeground #ffffff
tab.activeBackground #0f0c0c
tab.activeBorder #0f0c0c
tab.activeBorderTop #0f0c0c
tab.activeForeground #ffffff
tab.border #0f0c0c
tab.hoverBackground #343030
tab.hoverBorder #f2f2f2
tab.hoverForeground #ffffff
tab.inactiveBackground #0f0c0c
tab.inactiveForeground #ffffff
terminal.ansiBlack #000000
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 #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #0f0c0c
titleBar.activeForeground #ffffff
titleBar.border #0f0c0c
titleBar.inactiveBackground #0f0c0c
titleBar.inactiveForeground #ffffff
tree.indentGuidesStroke #ffffff
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #fffb00
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffef00 —
variable.parameter.function.language.special.self.python #12f9c3 —
storage.modifier.lifetime.rust #ffef00 —
support.function.std.rust #00ffff —
entity.name.lifetime.rust #12f9c3 —
variable.language.rust #fffb00 —
support.constant.edge #ff0084 —
constant.other.character-class.regexp #fffb00 —
keyword.operator.quantifier.regexp #f0a836 —
punctuation.definition.string.begin,punctuation.definition.string.end #56d932 —
variable.parameter.function #ffef00 —
comment markup.link #19ff49 —
markup.changed.diff #12f9c3 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #00ffff —
markup.inserted.diff #56d932 —
markup.deleted.diff #fffb00 —
meta.function.c,meta.function.cpp #fffb00 —
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 #ffef00 —
punctuation.separator.key-value #ffef00 —
keyword.operator.expression.import #00ffff —
support.constant.math #12f9c3 —
support.constant.property.math #f0a836 —
variable.other.constant #12f9c3 —
storage.type.annotation.java, storage.type.object.array.java #12f9c3 —
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 #ffef00 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #12f9c3 —
keyword.operator.instanceof.java #ff0084 —
meta.definition.variable.name.java #fffb00 —
keyword.operator.logical #0ddbf5 —
keyword.operator.bitwise #0ddbf5 —
keyword.operator.channel #0ddbf5 —
support.constant.property-value.scss,support.constant.property-value.css #f0a836 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #0ddbf5 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #f0a836 —
punctuation.separator.list.comma.css #ffef00 —
support.constant.color.w3c-standard-color-name.css #f0a836 —
support.type.vendored.property-name.css #0ddbf5 —
support.module.node,support.type.object.module,support.module.node #12f9c3 —
entity.name.type.module #12f9c3 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #fffb00 —
support.constant.json #f0a836 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #ff0084 —
support.type.object.console #fffb00 —
support.variable.property.process #f0a836 —
entity.name.function,support.function.console #00ffff —
keyword.operator.misc.rust #ffef00 —
keyword.operator.sigil.rust #ff0084 —
keyword.operator.delete #ff0084 —
support.type.object.dom #0ddbf5 —
support.variable.dom,support.variable.property.dom #fffb00 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #0ddbf5 —
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 #ff0084 —
punctuation.separator.delimiter #ffef00 —
punctuation.separator.c,punctuation.separator.cpp #ff0084 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #0ddbf5 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #ff0084 —
variable.parameter.function.language.python #f0a836 —
support.type.python #0ddbf5 —
keyword.operator.logical.python #ff0084 —
variable.parameter.function.python #f0a836 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ffef00 —
meta.function-call.generic.python #00ffff —
constant.character.format.placeholder.other.python #f0a836 —
keyword.operator.assignment.compound #ff0084 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #0ddbf5 —
entity.name.namespace #12f9c3 —
variable.language #12f9c3 —
token.variable.parameter.java #ffef00 —
import.storage.java #12f9c3 —
token.package.keyword #ff0084 —
entity.name.function, meta.require, support.function.any-method, variable.function #00ffff —
entity.name.type.namespace #12f9c3 —
support.class, entity.name.type.class #12f9c3 —
entity.name.class.identifier.namespace.type #12f9c3 —
entity.name.class, variable.other.class.js, variable.other.class.ts #12f9c3 —
variable.other.class.php #fffb00 —
control.elements, keyword.operator.less #f0a836 —
keyword.other.special-method #00ffff —
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 #ff0084 —
token.storage.type.java #12f9c3 —
support.type.property-name #ffef00 —
support.constant.property-value #ffef00 —
support.constant.font-name #f0a836 —
entity.other.inherited-class #12f9c3 —
constant.other.symbol #0ddbf5 —
punctuation.definition.constant #f0a836 —
entity.other.attribute-name #f0a836 —
entity.other.attribute-name.id #00ffff bold strikethrough
entity.other.attribute-name.class.css #f0a836 bold strikethrough
markup.heading punctuation.definition.heading, entity.name.section #00ffff —
keyword.other.unit #fffb00 —
markup.bold,todo.bold #f0a836 —
punctuation.definition.bold #12f9c3 —
markup.italic, punctuation.definition.italic,todo.emphasis #ff0084 —
entity.name.section.markdown #fffb00 —
punctuation.definition.heading.markdown #fffb00 —
punctuation.definition.list.begin.markdown #fffb00 —
markup.heading.setext #ffef00 —
punctuation.definition.bold.markdown #f0a836 —
markup.inline.raw.markdown #56d932 —
markup.inline.raw.string.markdown #56d932 —
punctuation.definition.list.markdown #fffb00 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #fffb00 —
beginning.punctuation.definition.list.markdown #fffb00 —
punctuation.definition.metadata.markdown #fffb00 —
markup.underline.link.markdown,markup.underline.link.image.markdown #ff0084 —
string.other.link.title.markdown,string.other.link.description.markdown #00ffff —
constant.character.escape #0ddbf5 —
punctuation.section.embedded, variable.interpolation #fffb00 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #ff0084 —
invalid.illegal.bad-ampersand.html #ffef00 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #fffb00 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #fffb00 —
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 #56d932 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #0ddbf5 —
support.type.property-name.json #fffb00 —
support.type.property-name.json punctuation #fffb00 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #ff0084 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #ff0084 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #12f9c3 —
keyword.operator.error-control.php #ff0084 —
keyword.operator.type.php #ff0084 —
punctuation.section.array.begin.php #ffef00 —
punctuation.section.array.end.php #ffef00 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #12f9c3 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #00ffff —
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 #ffef00 —
support.constant.core.rust #f0a836 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #f0a836 —
entity.name.goto-label.php,support.other.php #00ffff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #0ddbf5 —
keyword.operator.regexp.php #ff0084 —
keyword.operator.comparison.php #0ddbf5 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #ff0084 —
meta.function.decorator.python #00ffff —
support.token.decorator.python,meta.function.decorator.identifier.python #0ddbf5 —
function.parameter #ffef00 —
function.parameter.ruby, function.parameter.cs #ffef00 —
constant.language.symbol.ruby #0ddbf5 —
inline-color-decoration rgb-value #f0a836 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #12f9c3 —
block.scope.end,block.scope.begin #ffef00 —
entity.name.variable.local.cs #fffb00 —
token.error-token #f44747 —
token.debug-token #ff0084 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #ff0084 —
meta.template.expression #ffef00 —
keyword.operator.module #ff0084 —
support.type.type.flowtype #00ffff —
support.type.primitive #12f9c3 —
meta.property.object #fffb00 —
variable.parameter.function.js #fffb00 —
keyword.other.template.begin #56d932 —
keyword.other.template.end #56d932 —
keyword.other.substitution.begin #56d932 —
keyword.other.substitution.end #56d932 —
keyword.operator.assignment #0ddbf5 —
keyword.operator.assignment.go #12f9c3 —
keyword.operator.arithmetic.go, keyword.operator.address.go #ff0084 —
entity.name.package.go #12f9c3 —
support.type.prelude.elm #0ddbf5 —
support.constant.elm #f0a836 —
punctuation.quasi.element #ff0084 —
constant.character.entity #fffb00 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #0ddbf5 —
entity.global.clojure #12f9c3 —
meta.symbol.clojure #fffb00 —
constant.keyword.clojure #0ddbf5 —
meta.arguments.coffee, variable.parameter.function.coffee #fffb00 —
meta.scope.prerequisites.makefile #fffb00 —
storage.modifier.import.groovy #12f9c3 —
meta.method.groovy #00ffff —
meta.definition.variable.name.groovy #fffb00 —
meta.definition.class.inherited.classes.groovy #56d932 —
support.variable.semantic.hlsl #12f9c3 —
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 #ff0084 —
text.variable, text.bracketed #fffb00 —
support.type.swift, support.type.vb.asp #12f9c3 —
entity.name.function.xi #12f9c3 —
entity.name.class.xi #0ddbf5 —
constant.character.character-class.regexp.xi #fffb00 —
constant.regexp.xi #ff0084 —
keyword.control.xi #0ddbf5 —
beginning.punctuation.definition.quote.markdown.xi #56d932 —
beginning.punctuation.definition.list.markdown.xi #19ff49 —
constant.character.xi #00ffff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #19ff49 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #12f9c3 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #fffb00 —
meta.brace.square #ffef00 —
comment, punctuation.definition.comment #19ff49 italic
markup.quote.markdown #19ff49 —
punctuation.definition.block.sequence.item.yaml #ffef00 —
constant.language.symbol.elixir #0ddbf5 —
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...
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 } !` ;
}