Skip to main content
Home Theme VS Code Real Nights Tema com cores vibrantes, neon. Estiloso e simples, desenvolvido para noites reais no desenvolvimento de aplicações.
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 #131212 activityBar.background #000000 activityBar.border #00000000 activityBar.foreground #ff0083 activityBar.inactiveForeground #9700ff activityBarBadge.background #23272a 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 #614aff — variable.other.generic-type.haskell #ffa700 — storage.type.haskell #ffffff — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Real Nights — Real Nights Dark Theme
activityBarBadge.foreground
#97ff00
badge.background #ff0000
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1f1f1f
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #434343
button.foreground #ffffff
button.hoverBackground #231b4b
button.secondaryBackground #dbca3c
button.secondaryForeground #000000
button.secondaryHoverBackground #ffffff9f
checkbox.background #191919
checkbox.border #00000000
checkbox.foreground #00ffc3
debugExceptionWidget.background #0f0f0f
debugExceptionWidget.border #363636
debugToolBar.background #0f0f0f
debugToolBar.border #363636
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #191919
dropdown.border #00000000
dropdown.foreground #00ffc3
editor.background #000000
editor.findMatchBackground #474747
editor.findMatchBorder #ffffff
editor.findMatchHighlightBackground #ff636355
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #47474766
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #ff6c00
editor.hoverHighlightBackground #6d717540
editor.inactiveSelectionBackground #3d3f41
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #3e315a
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #ff3c00
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #969696b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #ffffff
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #ff0000
editorGroup.border #444444
editorGroup.emptyBackground #000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #b0b0b0
editorGutter.addedBackground #00ffab
editorGutter.background #0f0f0f
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #ff000c
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #ffffff
editorHoverWidget.background #363636
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #ffffff
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #ffffff
editorLineNumber.activeForeground #ff40ea
editorLineNumber.foreground #bbff00
editorLink.activeForeground #4cff4ecd
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #ff2b00
editorMarkerNavigationInfo.background #00f3ff
editorMarkerNavigationWarning.background #ffd100
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #ff00b3
editorSuggestWidget.selectedBackground #5a5a5a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #ff9b00
editorWhitespace.foreground #d9d9d929
editorWidget.background #252526
editorWidget.foreground #ffffff
editorWidget.resizeBorder #5F5F5F
focusBorder #a300ff
foreground #2cff00
gitDecoration.addedResourceForeground #00ff87
gitDecoration.conflictingResourceForeground #5555ff
gitDecoration.deletedResourceForeground #ff0000
gitDecoration.ignoredResourceForeground #999999
gitDecoration.modifiedResourceForeground #ff9900
gitDecoration.stageDeletedResourceForeground #ff5353
gitDecoration.stageModifiedResourceForeground #04c4ff
gitDecoration.submoduleResourceForeground #ffffff
gitDecoration.untrackedResourceForeground #a4ff00
icon.foreground #2cff00
input.background #191919
input.border #00000000
input.foreground #00ffc3
input.placeholderForeground #ffffff
inputOption.activeBackground #8e8e8e66
inputOption.activeBorder #ffffff00
inputOption.activeForeground #a5f000
list.activeSelectionBackground #808080
list.activeSelectionForeground #ffffff
list.dropBackground #000000
list.focusBackground #d3ff01
list.focusForeground #000000
list.highlightForeground #a300ff
list.hoverBackground #1d1d1d
list.hoverForeground #b4b4b4
list.inactiveSelectionBackground #1d1d1d
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #ff4d00
listFilterWidget.noMatchesOutline #f2968d00
listFilterWidget.outline #00000000
menu.background #000000
menu.border #54545485
menu.foreground #ffffff
menu.selectionBackground #00ffff
menu.selectionBorder #00000000
menu.selectionForeground #000000
menu.separatorBackground #a3ff00
menubar.selectionBackground #a5a5a522
menubar.selectionBorder #ff000000
menubar.selectionForeground #00ffff
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #61cdb6
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #000000
minimap.errorHighlight #ff0000
minimap.findMatchHighlight #474747
minimap.selectionHighlight #3e315a
minimap.warningHighlight #ff9b00
minimapGutter.addedBackground #00ffab
minimapGutter.deletedBackground #ff000c
minimapGutter.modifiedBackground #ffffff
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #ff0000
notificationsInfoIcon.foreground #00cfff
notificationsWarningIcon.foreground #ebff00
notificationToast.border #474747
panel.background #1e1e1e
panel.border #80808059
panelSection.border #ffffff59
panelTitle.activeBorder #ff3c00
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #d3d3d399
peekView.border #00ffb7
peekViewEditor.background #01453f
peekViewEditor.matchHighlightBackground #00000099
peekViewEditor.matchHighlightBorder #ff8f00
peekViewEditorGutter.background #2c2c2c
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 #3f3f46
pickerGroup.foreground #ff0083
progressBar.background #f7ff00
scrollbar.shadow #f700ff
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #b0b0b066
scrollbarSlider.hoverBackground #929292b3
selection.background #000000
settings.focusedRowBackground #ffffff07
settings.headerForeground #2cff00
sideBar.background #000000
sideBar.border #564a4a00
sideBar.dropBackground #000000
sideBar.foreground #ffffff
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #ffffff00
sideBarSectionHeader.foreground #a3ff00
sideBarTitle.foreground #ff0083
statusBar.background #ff3000
statusBar.border #ffffff00
statusBar.debuggingBackground #00ffcf
statusBar.debuggingBorder #ff000000
statusBar.debuggingForeground #000000
statusBar.foreground #ffffff
statusBar.noFolderBackground #410051
statusBar.noFolderBorder #7d171700
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #ffffff
statusBarItem.remoteForeground #000000
tab.activeBackground #1e1e1e
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #252526
tab.inactiveBackground #2d2d2d
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 #ffffff59
terminal.foreground #80ff00
terminal.selectionBackground #ffffff40
terminalCursor.background #585858
terminalCursor.foreground #ffffff
textLink.foreground #ff6c00
titleBar.activeBackground #000000
titleBar.activeForeground #bbff00
titleBar.border #00000000
titleBar.inactiveBackground #00000099
titleBar.inactiveForeground #bbff00af
tree.indentGuidesStroke #00f3ff
walkThrough.embeddedEditorBackground #00000050
widget.shadow #ffffff5c #614aff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ff6c00 —
variable.parameter.function.language.special.self.python #ff00d7 —
storage.modifier.lifetime.rust #ff6c00 —
support.function.std.rust #00d12a —
entity.name.lifetime.rust #ff00d7 —
variable.language.rust #614aff —
support.constant.edge #ffa700 —
constant.other.character-class.regexp #614aff —
keyword.operator.quantifier.regexp #ffffff —
punctuation.definition.string.begin,punctuation.definition.string.end #00fff3 —
variable.parameter.function #ff6c00 —
comment markup.link #11aad958 —
markup.changed.diff #ff00d7 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #00d12a —
markup.inserted.diff #00fff3 —
markup.deleted.diff #614aff —
meta.function.c,meta.function.cpp #614aff —
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 #ff6c00 —
punctuation.separator.key-value #ff6c00 —
keyword.operator.expression.import #00d12a —
support.constant.math #ff00d7 —
support.constant.property.math #ffffff —
variable.other.constant #ff00d7 —
storage.type.annotation.java, storage.type.object.array.java #ff00d7 —
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 #ff6c00 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ff00d7 —
keyword.operator.instanceof.java #ffa700 —
meta.definition.variable.name.java #614aff —
keyword.operator.logical #906fd9 —
keyword.operator.bitwise #906fd9 —
keyword.operator.channel #906fd9 —
support.constant.property-value.scss,support.constant.property-value.css #ffffff —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #906fd9 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ffffff —
punctuation.separator.list.comma.css #ff6c00 —
support.constant.color.w3c-standard-color-name.css #ffffff —
support.type.vendored.property-name.css #906fd9 —
support.module.node,support.type.object.module,support.module.node #ff00d7 —
entity.name.type.module #ff00d7 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #614aff —
support.constant.json #ffffff —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #ffa700 —
support.type.object.console #614aff —
support.variable.property.process #ffffff —
entity.name.function,support.function.console #00d12a —
keyword.operator.misc.rust #ff6c00 —
keyword.operator.sigil.rust #ffa700 —
keyword.operator.delete #ffa700 —
support.type.object.dom #906fd9 —
support.variable.dom,support.variable.property.dom #614aff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #906fd9 —
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 #ffa700 —
punctuation.separator.delimiter #ff6c00 —
punctuation.separator.c,punctuation.separator.cpp #ffa700 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #906fd9 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #ffa700 —
variable.parameter.function.language.python #ffffff —
support.type.python #906fd9 —
keyword.operator.logical.python #ffa700 —
variable.parameter.function.python #ffffff —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ff6c00 —
meta.function-call.generic.python #00d12a —
constant.character.format.placeholder.other.python #ffffff —
keyword.operator.assignment.compound #ffa700 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #906fd9 —
entity.name.namespace #ff00d7 —
variable.language #ff00d7 —
token.variable.parameter.java #ff6c00 —
import.storage.java #ff00d7 —
token.package.keyword #ffa700 —
entity.name.function, meta.require, support.function.any-method, variable.function #00d12a —
entity.name.type.namespace #ff00d7 —
support.class, entity.name.type.class #ff00d7 —
entity.name.class.identifier.namespace.type #ff00d7 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ff00d7 —
variable.other.class.php #614aff —
control.elements, keyword.operator.less #ffffff —
keyword.other.special-method #00d12a —
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 #ffa700 —
token.storage.type.java #ff00d7 —
support.type.property-name #ff6c00 —
support.constant.property-value #ff6c00 —
support.constant.font-name #ffffff —
entity.other.inherited-class #ff00d7 —
constant.other.symbol #906fd9 —
punctuation.definition.constant #ffffff —
entity.other.attribute-name #ffffff —
entity.other.attribute-name.id #00d12a italic
entity.other.attribute-name.class.css #ffffff bold
markup.heading punctuation.definition.heading, entity.name.section #00d12a —
keyword.other.unit #614aff —
markup.bold,todo.bold #ffffff —
punctuation.definition.bold #ff00d7 —
markup.italic, punctuation.definition.italic,todo.emphasis #ffa700 —
entity.name.section.markdown #614aff —
punctuation.definition.heading.markdown #614aff —
punctuation.definition.list.begin.markdown #614aff —
markup.heading.setext #ff6c00 —
punctuation.definition.bold.markdown #ffffff —
markup.inline.raw.markdown #00fff3 —
markup.inline.raw.string.markdown #00fff3 —
punctuation.definition.list.markdown #614aff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #614aff —
beginning.punctuation.definition.list.markdown #614aff —
punctuation.definition.metadata.markdown #614aff —
markup.underline.link.markdown,markup.underline.link.image.markdown #ffa700 —
string.other.link.title.markdown,string.other.link.description.markdown #00d12a —
constant.character.escape #906fd9 —
punctuation.section.embedded, variable.interpolation #614aff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #ffa700 —
invalid.illegal.bad-ampersand.html #ff6c00 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #614aff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #614aff —
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 #00fff3 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #906fd9 —
support.type.property-name.json #614aff —
support.type.property-name.json punctuation #614aff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #ffa700 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #ffa700 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ff00d7 —
keyword.operator.error-control.php #ffa700 —
keyword.operator.type.php #ffa700 —
punctuation.section.array.begin.php #ff6c00 —
punctuation.section.array.end.php #ff6c00 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ff00d7 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #00d12a —
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 #ff6c00 —
support.constant.core.rust #ffffff —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ffffff —
entity.name.goto-label.php,support.other.php #00d12a —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #906fd9 —
keyword.operator.regexp.php #ffa700 —
keyword.operator.comparison.php #906fd9 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #ffa700 —
meta.function.decorator.python #00d12a —
support.token.decorator.python,meta.function.decorator.identifier.python #906fd9 —
function.parameter #ff6c00 —
function.parameter.ruby, function.parameter.cs #ff6c00 —
constant.language.symbol.ruby #906fd9 —
inline-color-decoration rgb-value #ffffff —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ff00d7 —
block.scope.end,block.scope.begin #ff6c00 —
entity.name.variable.local.cs #614aff —
token.error-token #f44747 —
token.debug-token #ffa700 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #ffa700 —
meta.template.expression #ff6c00 —
keyword.operator.module #ffa700 —
support.type.type.flowtype #00d12a —
support.type.primitive #ff00d7 —
meta.property.object #614aff —
variable.parameter.function.js #614aff —
keyword.other.template.begin #00fff3 —
keyword.other.template.end #00fff3 —
keyword.other.substitution.begin #00fff3 —
keyword.other.substitution.end #00fff3 —
keyword.operator.assignment #906fd9 —
keyword.operator.assignment.go #ff00d7 —
keyword.operator.arithmetic.go, keyword.operator.address.go #ffa700 —
entity.name.package.go #ff00d7 —
support.type.prelude.elm #906fd9 —
support.constant.elm #ffffff —
punctuation.quasi.element #ffa700 —
constant.character.entity #614aff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #906fd9 —
entity.global.clojure #ff00d7 —
meta.symbol.clojure #614aff —
constant.keyword.clojure #906fd9 —
meta.arguments.coffee, variable.parameter.function.coffee #614aff —
meta.scope.prerequisites.makefile #614aff —
storage.modifier.import.groovy #ff00d7 —
meta.method.groovy #00d12a —
meta.definition.variable.name.groovy #614aff —
meta.definition.class.inherited.classes.groovy #00fff3 —
support.variable.semantic.hlsl #ff00d7 —
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 #ffa700 —
text.variable, text.bracketed #614aff —
support.type.swift, support.type.vb.asp #ff00d7 —
entity.name.function.xi #ff00d7 —
entity.name.class.xi #906fd9 —
constant.character.character-class.regexp.xi #614aff —
constant.regexp.xi #ffa700 —
keyword.control.xi #906fd9 —
beginning.punctuation.definition.quote.markdown.xi #00fff3 —
beginning.punctuation.definition.list.markdown.xi #11aad958 —
constant.character.xi #00d12a —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #11aad958 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ff00d7 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #614aff —
meta.brace.square #ff6c00 —
comment, punctuation.definition.comment #11aad958 italic
markup.quote.markdown #11aad958 —
punctuation.definition.block.sequence.item.yaml #ff6c00 —
constant.language.symbol.elixir #906fd9 —
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 } !` ;
}
Real Nights | Coding Theme