Skip to main content
Home Theme VS Code Deep Rainforest Explore a deep rainforest of code with lush green hues and serene blue undertones with this VS Code theme.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
badge.background #000e14 badge.foreground #00BFBF breadcrumb.activeSelectionForeground #00BFBF breadcrumb.background #000e14 breadcrumb.focusForeground #00BFBF breadcrumb.foreground #006666 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 #0ac9c9 — variable.other.generic-type.haskell #00825d — storage.type.haskell #58a564 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Deep Rainforest — Deep Rainforest Theme
button.background
#0e639c
button.foreground #00BFBF
button.hoverBackground #1177bb
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #000e14
checkbox.border #000e14
checkbox.foreground #00BFBF
debugExceptionWidget.background #000e14
debugExceptionWidget.border #000e14
debugToolBar.background #000e14
debugToolBar.border #000e14
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #000e14
dropdown.border #000e14
dropdown.foreground #cccccc
editor.background #000e14
editor.findMatchBackground #003438
editor.findMatchBorder #003438
editor.findMatchHighlightBackground #1c7473
editor.findMatchHighlightBorder #1c7473
editor.findRangeHighlightBackground #03272acd
editor.findRangeHighlightBorder #03272a00
editor.foldBackground #264f784d
editor.foreground #006666
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #003334
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #01363bcd
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #003b3c
editor.selectionHighlightBackground #006062
editor.selectionHighlightBorder #006062
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #006666
editorCursor.foreground #00bfbf
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #000e14
editorGroup.emptyBackground #000e14
editorGroupHeader.border #000e14
editorGroupHeader.tabsBackground #000e14
editorGroupHeader.tabsBorder #000e14
editorGutter.addedBackground #587c0c
editorGutter.background #000e14
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #000e14
editorHoverWidget.border #000e14
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #068679b5
editorIndentGuide.background #0686794b
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #00bfbf
editorLineNumber.foreground #006666
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #000e14
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #0c7d9d
editorSuggestWidget.background #000e14
editorSuggestWidget.border #000e14
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0c7d9d
editorSuggestWidget.selectedBackground #0c7d9d
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #00bfbf89
editorWidget.background #000e14
editorWidget.foreground #cccccc
editorWidget.resizeBorder #000e14
focusBorder #000e14
foreground #00343C
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 #33be7e
icon.foreground #cccccc
input.background #000e14
input.border #000e14
input.foreground #cccccc
input.placeholderForeground #a32626
inputOption.activeBackground #007fd466
inputOption.activeBorder #6f7f8a00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #00343C
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #00070A
list.hoverForeground #cccccc
list.inactiveSelectionBackground #00343C
list.inactiveSelectionForeground #000e14
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #000e14
menu.border #000e14
menu.foreground #cccccc
menu.selectionBackground #094771
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #000e14
menubar.selectionBackground #ffffff1a
menubar.selectionBorder #000e14
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #000e14
minimap.errorHighlight #f48771
minimap.findMatchHighlight #003438
minimap.selectionHighlight #003b3c
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #000e14
notificationCenterHeader.background #000e14
notificationCenterHeader.foreground #cccccc
notifications.background #000e14
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #000e14
panel.background #000e14
panel.border #000e14
panelSection.border #000e14
panelTitle.activeBorder #000e14
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #000e14
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #000e14
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #000e14
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #000e14
pickerGroup.foreground #3794ff
progressBar.background #0e70c0
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #256aa7
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #000e14
sideBar.dropBackground #383b3d
sideBar.foreground #006666
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #000e14
statusBarItem.activeBackground #FFFFFF25
tab.activeBackground #000e14
tab.activeBorder #000e14
tab.activeBorderTop #000e14
tab.activeForeground #ffffff
tab.border #000e14
tab.hoverBackground #000e14e1
tab.hoverBorder #000e14e1
tab.inactiveBackground #000e14e1
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 #000e14
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #000e14
titleBar.activeForeground #000e14
titleBar.border #000e14
titleBar.inactiveBackground #000e14e1
titleBar.inactiveForeground #000e14
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #0ac9c9
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #006666 —
variable.parameter.function.language.special.self.python #66f0af —
storage.modifier.lifetime.rust #006666 —
support.function.std.rust #07c09e —
entity.name.lifetime.rust #66f0af —
variable.language.rust #0ac9c9 —
support.constant.edge #00825d —
constant.other.character-class.regexp #0ac9c9 —
keyword.operator.quantifier.regexp #58a564 —
punctuation.definition.string.begin,punctuation.definition.string.end #58a564 —
variable.parameter.function #006666 —
comment markup.link #4e908793 —
markup.changed.diff #66f0af —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #07c09e —
markup.inserted.diff #58a564 —
markup.deleted.diff #0ac9c9 —
meta.function.c,meta.function.cpp #0ac9c9 —
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 #006666 —
punctuation.separator.key-value #006666 —
keyword.operator.expression.import #07c09e —
support.constant.math #66f0af —
support.constant.property.math #58a564 —
variable.other.constant #66f0af —
storage.type.annotation.java, storage.type.object.array.java #66f0af —
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 #006666 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #66f0af —
keyword.operator.instanceof.java #00825d —
meta.definition.variable.name.java #0ac9c9 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #58a564 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #58a564 —
punctuation.separator.list.comma.css #006666 —
support.constant.color.w3c-standard-color-name.css #58a564 —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #66f0af —
entity.name.type.module #66f0af —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #0ac9c9 —
support.constant.json #58a564 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #00825d —
support.type.object.console #0ac9c9 —
support.variable.property.process #58a564 —
entity.name.function,support.function.console #07c09e —
keyword.operator.misc.rust #006666 —
keyword.operator.sigil.rust #00825d —
keyword.operator.delete #00825d —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #0ac9c9 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
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 #00825d —
punctuation.separator.delimiter #006666 —
punctuation.separator.c,punctuation.separator.cpp #00825d —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #00825d —
variable.parameter.function.language.python #58a564 —
support.type.python #56b6c2 —
keyword.operator.logical.python #00825d —
variable.parameter.function.python #58a564 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #006666 —
meta.function-call.generic.python #07c09e —
constant.character.format.placeholder.other.python #58a564 —
keyword.operator.assignment.compound #00825d —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #66f0af —
variable.language #66f0af —
token.variable.parameter.java #006666 —
import.storage.java #66f0af —
token.package.keyword #00825d —
entity.name.function, meta.require, support.function.any-method, variable.function #07c09e —
entity.name.type.namespace #66f0af —
support.class, entity.name.type.class #66f0af —
entity.name.class.identifier.namespace.type #66f0af —
entity.name.class, variable.other.class.js, variable.other.class.ts #66f0af —
variable.other.class.php #0ac9c9 —
control.elements, keyword.operator.less #58a564 —
keyword.other.special-method #07c09e —
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 #00825d —
token.storage.type.java #66f0af —
support.type.property-name #006666 —
support.constant.property-value #006666 —
support.constant.font-name #58a564 —
entity.other.inherited-class #66f0af —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #58a564 —
entity.other.attribute-name #58a564 —
entity.other.attribute-name.id #07c09e normal
entity.other.attribute-name.class.css #58a564 normal
markup.heading punctuation.definition.heading, entity.name.section #07c09e —
keyword.other.unit #0ac9c9 —
markup.bold,todo.bold #58a564 —
punctuation.definition.bold #66f0af —
markup.italic, punctuation.definition.italic,todo.emphasis #00825d —
entity.name.section.markdown #0ac9c9 —
punctuation.definition.heading.markdown #0ac9c9 —
punctuation.definition.list.begin.markdown #0ac9c9 —
markup.heading.setext #006666 —
punctuation.definition.bold.markdown #58a564 —
markup.inline.raw.markdown #58a564 —
markup.inline.raw.string.markdown #58a564 —
punctuation.definition.list.markdown #0ac9c9 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #0ac9c9 —
beginning.punctuation.definition.list.markdown #0ac9c9 —
punctuation.definition.metadata.markdown #0ac9c9 —
markup.underline.link.markdown,markup.underline.link.image.markdown #00825d —
string.other.link.title.markdown,string.other.link.description.markdown #07c09e —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #0ac9c9 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #00825d —
invalid.illegal.bad-ampersand.html #006666 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #0ac9c9 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #0ac9c9 —
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 #58a564 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #0ac9c9 —
support.type.property-name.json punctuation #0ac9c9 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #00825d —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #00825d —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #66f0af —
keyword.operator.error-control.php #00825d —
keyword.operator.type.php #00825d —
punctuation.section.array.begin.php #006666 —
punctuation.section.array.end.php #006666 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #66f0af —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #07c09e —
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 #006666 —
support.constant.core.rust #58a564 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #58a564 —
entity.name.goto-label.php,support.other.php #07c09e —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #00825d —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #00825d —
meta.function.decorator.python #07c09e —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #006666 —
function.parameter.ruby, function.parameter.cs #006666 —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #58a564 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #66f0af —
block.scope.end,block.scope.begin #006666 —
entity.name.variable.local.cs #0ac9c9 —
token.error-token #f44747 —
token.debug-token #00825d —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #00825d —
meta.template.expression #006666 —
keyword.operator.module #00825d —
support.type.type.flowtype #07c09e —
support.type.primitive #66f0af —
meta.property.object #0ac9c9 —
variable.parameter.function.js #0ac9c9 —
keyword.other.template.begin #58a564 —
keyword.other.template.end #58a564 —
keyword.other.substitution.begin #58a564 —
keyword.other.substitution.end #58a564 —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #66f0af —
keyword.operator.arithmetic.go, keyword.operator.address.go #00825d —
entity.name.package.go #66f0af —
support.type.prelude.elm #56b6c2 —
support.constant.elm #58a564 —
punctuation.quasi.element #00825d —
constant.character.entity #0ac9c9 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #66f0af —
meta.symbol.clojure #0ac9c9 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #0ac9c9 —
meta.scope.prerequisites.makefile #0ac9c9 —
storage.modifier.import.groovy #66f0af —
meta.method.groovy #07c09e —
meta.definition.variable.name.groovy #0ac9c9 —
meta.definition.class.inherited.classes.groovy #58a564 —
support.variable.semantic.hlsl #66f0af —
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 #00825d —
text.variable, text.bracketed #0ac9c9 —
support.type.swift, support.type.vb.asp #66f0af —
entity.name.function.xi #66f0af —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #0ac9c9 —
constant.regexp.xi #00825d —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #58a564 —
beginning.punctuation.definition.list.markdown.xi #4e908793 —
constant.character.xi #07c09e —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #4e908793 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #66f0af —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #0ac9c9 —
meta.brace.square #006666 —
comment, punctuation.definition.comment #4e908793 italic
markup.quote.markdown #4e908793 —
punctuation.definition.block.sequence.item.yaml #006666 —
constant.language.symbol.elixir #56b6c2 —
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 } !` ;
}
Deep Rainforest | Coding Theme