Skip to main content
Home Theme VS Code Night Already Hey, it's night already! Perfect mixture of contrast and comfort. This theme is well suitable for anyone who loves dark themes.
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 #0d111a activityBar.border #b3fce1 activityBar.foreground #00ff9f activityBar.inactiveForeground #2aa577 activityBarBadge.background #00cc63 activityBarBadge.foreground #000000 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 #00ffa9 — variable.other.generic-type.haskell #18c97d — storage.type.haskell #00b464 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Night Already — Night Already
badge.background
#00cc63
badge.foreground #000000
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #0d111a
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #20865b
button.foreground #ffffff
button.hoverBackground #31c084
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #0d111a
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #0d111a
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #0d111a
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #494949
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #ececec
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #242d36
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #0d111a
editorGroupHeader.tabsBackground #0d111a
editorGroupHeader.tabsBorder #494949
editorGutter.addedBackground #587c0c
editorGutter.background #0d111a
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #252526
editorHoverWidget.border #494949
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #858585
editorLink.activeForeground #5dffc2
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #0d111a
editorSuggestWidget.border #494949
editorSuggestWidget.foreground #9ed7c4
editorSuggestWidget.highlightForeground #69d18e
editorSuggestWidget.selectedBackground #151c2a
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #00d471
foreground #cccccc
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 #cccccc
input.background #0d111a
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #00d45d66
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #05a5535e
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #2a2d2e
list.hoverForeground #cccccc
list.inactiveSelectionBackground #37373d
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #252526
menu.border #15993085
menu.foreground #cccccc
menu.selectionBackground #016046
menu.selectionBorder #00000000
menu.selectionForeground #d7d7d7
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #0d111a
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a
minimap.selectionHighlight #242d36
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #0d111a
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #0d111a
panel.border #494949
panelSection.border #494949
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #00cc29
peekViewEditor.background #011019
peekViewEditor.matchHighlightBackground #1f241e99
peekViewEditor.matchHighlightBorder #203423
peekViewEditorGutter.background #0d111a
peekViewResult.background #0d111a
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #ffffff
peekViewResult.matchHighlightBackground #43c76a4d
peekViewResult.selectionBackground #92ff9433
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #0d111a
peekViewTitleDescription.foreground #969696b3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #11a730
progressBar.background #0ec05c
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #20664c
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #0d111a
sideBar.border #494949
sideBar.dropBackground #383b3d
sideBar.foreground #cccccc
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #bbbbbb
statusBar.background #0d111a
statusBar.border #494949
statusBar.debuggingBackground #0d111a
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #0d111a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #0d111a
statusBarItem.remoteForeground #ffffff
tab.activeBackground #0d111a
tab.activeBorder #0d111a
tab.activeBorderTop #00000000
tab.activeForeground #f0efef
tab.border #252526
tab.hoverBackground #1a1d24
tab.hoverForeground #ffffff
tab.inactiveBackground #0d111a
tab.inactiveForeground #ffffff80
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 #494949
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #000000
terminalCursor.foreground #ffffff
textLink.foreground #31c062
titleBar.activeBackground #0d111a
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #0d111a
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #00ffa9
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ececec —
variable.parameter.function.language.special.self.python #b5ffe3 —
storage.modifier.lifetime.rust #ececec —
support.function.std.rust #62ffdd —
entity.name.lifetime.rust #b5ffe3 —
variable.language.rust #00ffa9 —
support.constant.edge #18c97d —
constant.other.character-class.regexp #00ffa9 —
keyword.operator.quantifier.regexp #00b464 —
punctuation.definition.string.begin,punctuation.definition.string.end #98c379 —
variable.parameter.function #ececec —
comment markup.link #7f848e —
markup.changed.diff #b5ffe3 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #62ffdd —
markup.inserted.diff #98c379 —
markup.deleted.diff #00ffa9 —
meta.function.c,meta.function.cpp #00ffa9 —
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 #ececec —
punctuation.separator.key-value #ececec —
keyword.operator.expression.import #62ffdd —
support.constant.math #b5ffe3 —
support.constant.property.math #00b464 —
variable.other.constant #b5ffe3 —
storage.type.annotation.java, storage.type.object.array.java #b5ffe3 —
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 #ececec —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #b5ffe3 —
keyword.operator.instanceof.java #18c97d —
meta.definition.variable.name.java #00ffa9 —
keyword.operator.logical #45ffb0 —
keyword.operator.bitwise #45ffb0 —
keyword.operator.channel #45ffb0 —
support.constant.property-value.scss,support.constant.property-value.css #00b464 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #45ffb0 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #00b464 —
punctuation.separator.list.comma.css #ececec —
support.constant.color.w3c-standard-color-name.css #00b464 —
support.type.vendored.property-name.css #45ffb0 —
support.module.node,support.type.object.module,support.module.node #b5ffe3 —
entity.name.type.module #b5ffe3 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #00ffa9 —
support.constant.json #00b464 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #18c97d —
support.type.object.console #00ffa9 —
support.variable.property.process #00b464 —
entity.name.function,support.function.console #62ffdd —
keyword.operator.misc.rust #ececec —
keyword.operator.sigil.rust #18c97d —
keyword.operator.delete #18c97d —
support.type.object.dom #45ffb0 —
support.variable.dom,support.variable.property.dom #00ffa9 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #45ffb0 —
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 #18c97d —
punctuation.separator.delimiter #ececec —
punctuation.separator.c,punctuation.separator.cpp #18c97d —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #45ffb0 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #18c97d —
variable.parameter.function.language.python #00b464 —
support.type.python #45ffb0 —
keyword.operator.logical.python #18c97d —
variable.parameter.function.python #00b464 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ececec —
meta.function-call.generic.python #62ffdd —
constant.character.format.placeholder.other.python #00b464 —
keyword.operator.assignment.compound #18c97d —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #45ffb0 —
entity.name.namespace #b5ffe3 —
variable.language #b5ffe3 —
token.variable.parameter.java #ececec —
import.storage.java #b5ffe3 —
token.package.keyword #18c97d —
entity.name.function, meta.require, support.function.any-method, variable.function #62ffdd —
entity.name.type.namespace #b5ffe3 —
support.class, entity.name.type.class #b5ffe3 —
entity.name.class.identifier.namespace.type #b5ffe3 —
entity.name.class, variable.other.class.js, variable.other.class.ts #b5ffe3 —
variable.other.class.php #00ffa9 —
control.elements, keyword.operator.less #00b464 —
keyword.other.special-method #62ffdd —
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 #18c97d —
token.storage.type.java #b5ffe3 —
support.type.property-name #ececec —
support.constant.property-value #ececec —
support.constant.font-name #00b464 —
entity.other.inherited-class #b5ffe3 —
constant.other.symbol #45ffb0 —
punctuation.definition.constant #00b464 —
entity.other.attribute-name #00b464 —
entity.other.attribute-name.id #62ffdd
entity.other.attribute-name.class.css #00b464
markup.heading punctuation.definition.heading, entity.name.section #62ffdd —
keyword.other.unit #00ffa9 —
markup.bold,todo.bold #00b464 —
punctuation.definition.bold #b5ffe3 —
markup.italic, punctuation.definition.italic,todo.emphasis #18c97d —
entity.name.section.markdown #00ffa9 —
punctuation.definition.heading.markdown #00ffa9 —
punctuation.definition.list.begin.markdown #00ffa9 —
markup.heading.setext #ececec —
punctuation.definition.bold.markdown #00b464 —
markup.inline.raw.markdown #98c379 —
markup.inline.raw.string.markdown #98c379 —
punctuation.definition.list.markdown #00ffa9 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #00ffa9 —
beginning.punctuation.definition.list.markdown #00ffa9 —
punctuation.definition.metadata.markdown #00ffa9 —
markup.underline.link.markdown,markup.underline.link.image.markdown #18c97d —
string.other.link.title.markdown,string.other.link.description.markdown #62ffdd —
constant.character.escape #45ffb0 —
punctuation.section.embedded, variable.interpolation #00ffa9 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #18c97d —
invalid.illegal.bad-ampersand.html #ececec —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #00ffa9 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #00ffa9 —
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 #98c379 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #45ffb0 —
support.type.property-name.json #00ffa9 —
support.type.property-name.json punctuation #00ffa9 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #18c97d —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #18c97d —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #b5ffe3 —
keyword.operator.error-control.php #18c97d —
keyword.operator.type.php #18c97d —
punctuation.section.array.begin.php #ececec —
punctuation.section.array.end.php #ececec —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #b5ffe3 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #62ffdd —
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 #ececec —
support.constant.core.rust #00b464 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #00b464 —
entity.name.goto-label.php,support.other.php #62ffdd —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #45ffb0 —
keyword.operator.regexp.php #18c97d —
keyword.operator.comparison.php #45ffb0 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #18c97d —
meta.function.decorator.python #62ffdd —
support.token.decorator.python,meta.function.decorator.identifier.python #45ffb0 —
function.parameter #ececec —
function.parameter.ruby, function.parameter.cs #ececec —
constant.language.symbol.ruby #45ffb0 —
inline-color-decoration rgb-value #00b464 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #b5ffe3 —
block.scope.end,block.scope.begin #ececec —
entity.name.variable.local.cs #00ffa9 —
token.error-token #f44747 —
token.debug-token #18c97d —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #18c97d —
meta.template.expression #ececec —
keyword.operator.module #18c97d —
support.type.type.flowtype #62ffdd —
support.type.primitive #b5ffe3 —
meta.property.object #00ffa9 —
variable.parameter.function.js #00ffa9 —
keyword.other.template.begin #98c379 —
keyword.other.template.end #98c379 —
keyword.other.substitution.begin #98c379 —
keyword.other.substitution.end #98c379 —
keyword.operator.assignment #45ffb0 —
keyword.operator.assignment.go #b5ffe3 —
keyword.operator.arithmetic.go, keyword.operator.address.go #18c97d —
entity.name.package.go #b5ffe3 —
support.type.prelude.elm #45ffb0 —
support.constant.elm #00b464 —
punctuation.quasi.element #18c97d —
constant.character.entity #00ffa9 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #45ffb0 —
entity.global.clojure #b5ffe3 —
meta.symbol.clojure #00ffa9 —
constant.keyword.clojure #45ffb0 —
meta.arguments.coffee, variable.parameter.function.coffee #00ffa9 —
meta.scope.prerequisites.makefile #00ffa9 —
storage.modifier.import.groovy #b5ffe3 —
meta.method.groovy #62ffdd —
meta.definition.variable.name.groovy #00ffa9 —
meta.definition.class.inherited.classes.groovy #98c379 —
support.variable.semantic.hlsl #b5ffe3 —
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 #18c97d —
text.variable, text.bracketed #00ffa9 —
support.type.swift, support.type.vb.asp #b5ffe3 —
entity.name.function.xi #b5ffe3 —
entity.name.class.xi #45ffb0 —
constant.character.character-class.regexp.xi #00ffa9 —
constant.regexp.xi #18c97d —
keyword.control.xi #45ffb0 —
beginning.punctuation.definition.quote.markdown.xi #98c379 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #62ffdd —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #7f848e —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #b5ffe3 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #00ffa9 —
meta.brace.square #ececec —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #7f848e —
punctuation.definition.block.sequence.item.yaml #ececec —
constant.language.symbol.elixir #45ffb0 —
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 } !` ;
}
Night Already | Coding Theme