Skip to main content
Home Theme VS Code Rider Melon Night theme Rider Melon Night theme for Visual Studio Code
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 #4b4b4b activityBar.background #2b2b2b activityBar.border #1c1c1c activityBar.foreground #ced0d6 activityBar.inactiveForeground #ffffff66 activityBarBadge.background #306047 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 #adeb96 — variable.other.generic-type.haskell #6c95eb — storage.type.haskell #ed94c0 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Rider Melon Night theme — Rider Melon Night
activityBarBadge.foreground
#ffffff
badge.background #306047
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #2b2b2b
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #3574f0
button.foreground #ffffff
button.hoverBackground #295bbd
button.secondaryBackground #4b4b4b
button.secondaryForeground #ffffff
button.secondaryHoverBackground #3d3d3d
checkbox.background #2b2b2b
checkbox.border #4b4b4b
checkbox.foreground #ffffff
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #2b2b2b
dropdown.border #4b4b4b
dropdown.foreground #ffffff
editor.background #262626
editor.findMatchBackground #484012
editor.findMatchBorder #f0f0f0
editor.findMatchHighlightBackground #484012
editor.findMatchHighlightBorder #ff000000
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #232e465c
editor.foreground #d0d0d0
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #08335e
editor.lineHighlightBackground #202424
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #08335e
editor.selectionHighlightBackground #232e46
editor.selectionHighlightBorder #495f7700
editor.wordHighlightBackground #232e46
editor.wordHighlightBorder #e8141400
editor.wordHighlightStrongBackground #232e46
editor.wordHighlightStrongBorder #ff000000
editorBracketMatch.background #422240
editorBracketMatch.border #88888800
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #f0f0f0
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #262626
editorGroupHeader.border #393939
editorGroupHeader.tabsBackground #1c1c1c
editorGroupHeader.tabsBorder #393939
editorGutter.addedBackground #2c4722
editorGutter.background #262626
editorGutter.commentRangeForeground #646464
editorGutter.deletedBackground #493927
editorGutter.foldingControlForeground #646464
editorGutter.modifiedBackground #293a5f
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #404040
editorIndentGuide.background #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #ffffffcf
editorLineNumber.foreground #ffffff70
editorLink.activeForeground #6c95eb
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #404040
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #062f4a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #393939
foreground #ffffff
gitDecoration.addedResourceForeground #61964e
gitDecoration.conflictingResourceForeground #e579f5
gitDecoration.deletedResourceForeground #946f6f
gitDecoration.ignoredResourceForeground #83840b
gitDecoration.modifiedResourceForeground #64b4e0
gitDecoration.stageDeletedResourceForeground #797979
gitDecoration.stageModifiedResourceForeground #64b4e093
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #d06652
icon.foreground #ffffff
input.background #2b2b2b
input.border #4b4b4b
input.foreground #ffffff
input.placeholderForeground #777777
inputOption.activeBackground #4b4b4b
inputOption.activeBorder #515151
inputOption.activeForeground #ffffff
list.activeSelectionBackground #2e436e
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #2e436e
list.focusForeground #cccccc
list.highlightForeground #0ae08f
list.hoverBackground #ffffff00
list.hoverForeground #ffffff
list.inactiveSelectionBackground #454545
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #52c27e62
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #252526
menu.border #454545
menu.foreground #cccccc
menu.selectionBackground #2e436e
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #585858
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 #262626
minimap.errorHighlight #f48771
minimap.findMatchHighlight #484012
minimap.selectionHighlight #08335e
minimap.warningHighlight #cca700
minimapGutter.addedBackground #2c4722
minimapGutter.deletedBackground #493927
minimapGutter.modifiedBackground #293a5f
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #323232
panel.border #1c1c1c
panelSection.border #1c1c1c
panelTitle.activeBorder #295bbd
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #376d54
peekViewEditor.background #1a3629
peekViewEditor.matchHighlightBackground #484012
peekViewEditor.matchHighlightBorder #ee931e00
peekViewEditorGutter.background #1a3629
peekViewResult.background #1c1c1c
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #2c89e633
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1c1c1c
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #4f4f9400
pickerGroup.foreground #3794ff
progressBar.background #466932
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #3e3e42
scrollbarSlider.hoverBackground #646464b3
selection.background #08335e
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #2b2b2b
sideBar.border #1c1c1c
sideBar.dropBackground #383b3d
sideBar.foreground #ccced3
sideBarSectionHeader.background #00000022
sideBarSectionHeader.border #cccccc08
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #bbbbbb
statusBar.background #2b2b2b
statusBar.border #1c1c1c
statusBar.debuggingBackground #276b6f
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #80808000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #393939
statusBarItem.remoteBackground #2b2b2b
statusBarItem.remoteForeground #ffffff
tab.activeBackground #00000000
tab.activeBorder #3574f0
tab.activeBorderTop #3574f000
tab.activeForeground #ffffff
tab.border #1c1e26
tab.hoverBackground #ffffff00
tab.hoverBorder #00000000
tab.hoverForeground #ffffff
tab.inactiveBackground #00000000
tab.inactiveForeground #999999
terminal.ansiBlack #303030
terminal.ansiBlue #4099ff
terminal.ansiBrightBlack #535353
terminal.ansiBrightBlue #5eb7f7
terminal.ansiBrightCyan #dcf4ff
terminal.ansiBrightGreen #9dff91
terminal.ansiBrightMagenta #ff9dff
terminal.ansiBrightRed #f07070
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffe48b
terminal.ansiCyan #bed6ff
terminal.ansiGreen #7fe173
terminal.ansiMagenta #f680ff
terminal.ansiRed #d25252
terminal.ansiWhite #eeeeec
terminal.ansiYellow #ffc66d
terminal.border #1c1c1c
terminal.foreground #cccccc
terminal.selectionBackground #08335e
terminalCursor.background #166f40
terminalCursor.foreground #ffffff
textLink.foreground #4da0ff
titleBar.activeBackground #2b2b2b
titleBar.activeForeground #ffffffc3
titleBar.border #393939
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #58585800
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000032 #adeb96
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #d0d0d0 —
variable.parameter.function.language.special.self.python #c9a26d —
storage.modifier.lifetime.rust #d0d0d0 —
support.function.std.rust #c191ff —
entity.name.lifetime.rust #c9a26d —
variable.language.rust #adeb96 —
support.constant.edge #6c95eb —
constant.other.character-class.regexp #adeb96 —
keyword.operator.quantifier.regexp #ed94c0 —
punctuation.definition.string.begin,punctuation.definition.string.end #66c3cc —
variable.parameter.function #d0d0d0 —
comment markup.link #909090 —
markup.changed.diff #c9a26d —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #c191ff —
markup.inserted.diff #66c3cc —
markup.deleted.diff #adeb96 —
meta.function.c,meta.function.cpp #adeb96 —
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 #d0d0d0 —
punctuation.separator.key-value #d0d0d0 —
keyword.operator.expression.import #c191ff —
support.constant.math #c9a26d —
support.constant.property.math #ed94c0 —
variable.other.constant #c9a26d —
storage.type.annotation.java, storage.type.object.array.java #c9a26d —
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 #d0d0d0 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #c9a26d —
keyword.operator.instanceof.java #6c95eb —
meta.definition.variable.name.java #adeb96 —
keyword.operator.logical #bdbdbd —
keyword.operator.bitwise #bdbdbd —
keyword.operator.channel #bdbdbd —
support.constant.property-value.scss,support.constant.property-value.css #ed94c0 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #bdbdbd —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ed94c0 —
punctuation.separator.list.comma.css #d0d0d0 —
support.constant.color.w3c-standard-color-name.css #ed94c0 —
support.type.vendored.property-name.css #bdbdbd —
support.module.node,support.type.object.module,support.module.node #c9a26d —
entity.name.type.module #c9a26d —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #adeb96 —
support.constant.json #ed94c0 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #6c95eb —
support.type.object.console #adeb96 —
support.variable.property.process #ed94c0 —
entity.name.function,support.function.console #c191ff —
keyword.operator.misc.rust #d0d0d0 —
keyword.operator.sigil.rust #6c95eb —
keyword.operator.delete #6c95eb —
support.type.object.dom #bdbdbd —
support.variable.dom,support.variable.property.dom #adeb96 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #bdbdbd —
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 #6c95eb —
punctuation.separator.delimiter #d0d0d0 —
punctuation.separator.c,punctuation.separator.cpp #6c95eb —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #bdbdbd —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #6c95eb —
variable.parameter.function.language.python #ed94c0 —
support.type.python #bdbdbd —
keyword.operator.logical.python #6c95eb —
variable.parameter.function.python #ed94c0 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #d0d0d0 —
meta.function-call.generic.python #c191ff —
constant.character.format.placeholder.other.python #ed94c0 —
keyword.operator.assignment.compound #6c95eb —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #bdbdbd —
entity.name.namespace #c9a26d —
variable.language #c9a26d —
token.variable.parameter.java #d0d0d0 —
import.storage.java #c9a26d —
token.package.keyword #6c95eb —
entity.name.function, meta.require, support.function.any-method, variable.function #c191ff —
entity.name.type.namespace #c9a26d —
support.class, entity.name.type.class #c9a26d —
entity.name.class.identifier.namespace.type #c9a26d —
entity.name.class, variable.other.class.js, variable.other.class.ts #c9a26d —
variable.other.class.php #adeb96 —
control.elements, keyword.operator.less #ed94c0 —
keyword.other.special-method #c191ff —
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 #6c95eb —
token.storage.type.java #c9a26d —
support.type.property-name #d0d0d0 —
support.constant.property-value #d0d0d0 —
support.constant.font-name #ed94c0 —
entity.other.inherited-class #c9a26d —
constant.other.symbol #bdbdbd —
punctuation.definition.constant #ed94c0 —
entity.other.attribute-name #ed94c0 —
entity.other.attribute-name.id #c191ff normal
entity.other.attribute-name.class.css #ed94c0 normal
markup.heading punctuation.definition.heading, entity.name.section #c191ff —
keyword.other.unit #adeb96 —
markup.bold,todo.bold #ed94c0 —
punctuation.definition.bold #c9a26d —
markup.italic, punctuation.definition.italic,todo.emphasis #6c95eb —
entity.name.section.markdown #adeb96 —
punctuation.definition.heading.markdown #adeb96 —
punctuation.definition.list.begin.markdown #adeb96 —
markup.heading.setext #d0d0d0 —
punctuation.definition.bold.markdown #ed94c0 —
markup.inline.raw.markdown #66c3cc —
markup.inline.raw.string.markdown #66c3cc —
punctuation.definition.list.markdown #adeb96 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #adeb96 —
beginning.punctuation.definition.list.markdown #adeb96 —
punctuation.definition.metadata.markdown #adeb96 —
markup.underline.link.markdown,markup.underline.link.image.markdown #6c95eb —
string.other.link.title.markdown,string.other.link.description.markdown #c191ff —
constant.character.escape #bdbdbd —
punctuation.section.embedded, variable.interpolation #adeb96 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #6c95eb —
invalid.illegal.bad-ampersand.html #d0d0d0 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #adeb96 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #adeb96 —
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 #66c3cc —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #bdbdbd —
support.type.property-name.json #adeb96 —
support.type.property-name.json punctuation #adeb96 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #6c95eb —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #6c95eb —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #c9a26d —
keyword.operator.error-control.php #6c95eb —
keyword.operator.type.php #6c95eb —
punctuation.section.array.begin.php #d0d0d0 —
punctuation.section.array.end.php #d0d0d0 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #c9a26d —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #c191ff —
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 #d0d0d0 —
support.constant.core.rust #ed94c0 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ed94c0 —
entity.name.goto-label.php,support.other.php #c191ff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #bdbdbd —
keyword.operator.regexp.php #6c95eb —
keyword.operator.comparison.php #bdbdbd —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #6c95eb —
meta.function.decorator.python #c191ff —
support.token.decorator.python,meta.function.decorator.identifier.python #bdbdbd —
function.parameter #d0d0d0 —
function.parameter.ruby, function.parameter.cs #d0d0d0 —
constant.language.symbol.ruby #bdbdbd —
inline-color-decoration rgb-value #ed94c0 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #c9a26d —
block.scope.end,block.scope.begin #d0d0d0 —
entity.name.variable.local.cs #adeb96 —
token.error-token #f44747 —
token.debug-token #6c95eb —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #6c95eb —
meta.template.expression #d0d0d0 —
keyword.operator.module #6c95eb —
support.type.type.flowtype #c191ff —
support.type.primitive #c9a26d —
meta.property.object #adeb96 —
variable.parameter.function.js #adeb96 —
keyword.other.template.begin #66c3cc —
keyword.other.template.end #66c3cc —
keyword.other.substitution.begin #66c3cc —
keyword.other.substitution.end #66c3cc —
keyword.operator.assignment #bdbdbd —
keyword.operator.assignment.go #c9a26d —
keyword.operator.arithmetic.go, keyword.operator.address.go #6c95eb —
entity.name.package.go #c9a26d —
support.type.prelude.elm #bdbdbd —
support.constant.elm #ed94c0 —
punctuation.quasi.element #6c95eb —
constant.character.entity #adeb96 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #bdbdbd —
entity.global.clojure #c9a26d —
meta.symbol.clojure #adeb96 —
constant.keyword.clojure #bdbdbd —
meta.arguments.coffee, variable.parameter.function.coffee #adeb96 —
meta.scope.prerequisites.makefile #adeb96 —
storage.modifier.import.groovy #c9a26d —
meta.method.groovy #c191ff —
meta.definition.variable.name.groovy #adeb96 —
meta.definition.class.inherited.classes.groovy #66c3cc —
support.variable.semantic.hlsl #c9a26d —
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 #6c95eb —
text.variable, text.bracketed #adeb96 —
support.type.swift, support.type.vb.asp #c9a26d —
entity.name.function.xi #c9a26d —
entity.name.class.xi #bdbdbd —
constant.character.character-class.regexp.xi #adeb96 —
constant.regexp.xi #6c95eb —
keyword.control.xi #bdbdbd —
beginning.punctuation.definition.quote.markdown.xi #66c3cc —
beginning.punctuation.definition.list.markdown.xi #909090 —
constant.character.xi #c191ff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #909090 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #c9a26d —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #adeb96 —
meta.brace.square #d0d0d0 —
comment, punctuation.definition.comment #909090 italic
markup.quote.markdown #909090 —
punctuation.definition.block.sequence.item.yaml #d0d0d0 —
constant.language.symbol.elixir #bdbdbd —
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 } !` ;
}
Rider Melon Night theme | Coding Theme