Skip to main content
Home Theme VS Code Cosmic Iris Cosmic Iris is a captivating dark theme with deep purples and iridescent shades, inspired by the beauty of the cosmos and the vibrant iris flower.
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 #ff0e0e00 activityBar.background #111111 activityBar.border #2a2a2a activityBar.foreground #c681ff activityBar.inactiveForeground #8781b066 activityBarBadge.background #494182 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 #a0ddff — variable.other.generic-type.haskell #9084e7 — storage.type.haskell #95d484 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground #f7f7f7
badge.background #2e2d49
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #c5b7e6
breadcrumb.background #111111
breadcrumb.focusForeground #c5b7e6
breadcrumb.foreground #ada8cd
button.background #444d6f
button.foreground #ebe9ff
button.hoverBackground #9f69cb
button.secondaryBackground #26263d
button.secondaryForeground #a099e8
button.secondaryHoverBackground #2d2d49
checkbox.background #0d0d0d
checkbox.border #00000000
checkbox.foreground #a9a5ff
debugExceptionWidget.background #2d2932
debugExceptionWidget.border #47474700
debugToolBar.background #2d2932
debugToolBar.border #47474700
diffEditor.border #00000000
diffEditor.insertedTextBackground #222032
diffEditor.insertedTextBorder #4a4875
diffEditor.removedTextBackground #79404033
diffEditor.removedTextBorder #9969695e
dropdown.background #0d0d0d
dropdown.border #00000000
dropdown.foreground #a9a5ff
editor.background #111111
editor.findMatchBackground #28263f
editor.findMatchBorder #d95285
editor.findMatchHighlightBackground #28263f
editor.findMatchHighlightBorder #817ad1
editor.findRangeHighlightBackground #1d1c24
editor.findRangeHighlightBorder #b6999900
editor.foldBackground #2831564d
editor.foreground #dbc8e0
editor.hoverHighlightBackground #37354f
editor.inactiveSelectionBackground #14111b
editor.lineHighlightBackground #141419
editor.lineHighlightBorder #28282800
editor.rangeHighlightBackground #141317
editor.rangeHighlightBorder #f7f7f700
editor.selectionBackground #211d2a
editor.selectionHighlightBackground #28263f
editor.selectionHighlightBorder #868acd
editor.wordHighlightBackground #353256
editor.wordHighlightBorder #7073ab
editor.wordHighlightStrongBackground #303145
editor.wordHighlightStrongBorder #7274b2
editorBracketMatch.background #ff97281c
editorBracketMatch.border #8277ff
editorCodeLens.foreground #9ea19c9b
editorCursor.background #1b1732
editorCursor.foreground #b3b4b2
editorError.background #7b444200
editorError.border #ffffff00
editorError.foreground #ff2069
editorGroup.border #00000070
editorGroup.emptyBackground #111111
editorGroupHeader.border #21212100
editorGroupHeader.tabsBackground #111111
editorGroupHeader.tabsBorder #ff787800
editorGutter.addedBackground #44ba88
editorGutter.background #111111
editorGutter.commentRangeForeground #9b98f5
editorGutter.deletedBackground #ff4d4d
editorGutter.foldingControlForeground #9b98f5
editorGutter.modifiedBackground #7484ff
editorHoverWidget.background #1c1721
editorHoverWidget.border #323047
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #514d82
editorIndentGuide.background #2a2a2a
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #3982f5
editorLineNumber.activeForeground #867ccb
editorLineNumber.foreground #595573
editorLink.activeForeground #6d76ff
editorMarkerNavigation.background #0d0d0d
editorMarkerNavigationError.background #884d8a
editorMarkerNavigationInfo.background #80808000
editorMarkerNavigationWarning.background #674a8400
editorOverviewRuler.background #5e5e5e00
editorOverviewRuler.border #c0afaf00
editorRuler.foreground #373b54
editorSuggestWidget.background #111111
editorSuggestWidget.border #45454544
editorSuggestWidget.foreground #a7a9cd
editorSuggestWidget.highlightForeground #c36ecf
editorSuggestWidget.selectedBackground #1e1d2a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #ffe46c
editorWhitespace.foreground #d7c9ec29
editorWidget.background #0d0d0d
editorWidget.foreground #6f708c
editorWidget.resizeBorder #eacf7f
focusBorder #62f74300
foreground #c2c2c2
gitDecoration.addedResourceForeground #78f7c1
gitDecoration.conflictingResourceForeground #ff9df5
gitDecoration.deletedResourceForeground #fd5b6a
gitDecoration.ignoredResourceForeground #c8cbde
gitDecoration.modifiedResourceForeground #9ba6ff
gitDecoration.stageDeletedResourceForeground #ff8873
gitDecoration.stageModifiedResourceForeground #ffd79c
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #27e0ce
icon.foreground #c2c2c2
input.background #0d0d0d
input.border #00000000
input.foreground #a9a5ff
input.placeholderForeground #635d99
inputOption.activeBackground #1e1d2a
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #261a25
list.activeSelectionForeground #9b91e6
list.dropBackground #1b1a26
list.focusBackground #1b1a26
list.focusForeground #b1a7ff
list.highlightForeground #7b70d1
list.hoverBackground #3f3c5e
list.hoverForeground #b1a7ff
list.inactiveSelectionBackground #15141d
list.inactiveSelectionForeground #d9d4ff
listFilterWidget.background #1b1a24
listFilterWidget.noMatchesOutline #f0564700
listFilterWidget.outline #62626200
menu.background #161317fb
menu.border #8a7b7b00
menu.foreground #a89fe4
menu.selectionBackground #5a4568
menu.selectionBorder #00000000
menu.selectionForeground #ffd5f3
menu.separatorBackground #3b3a418b
menubar.selectionBackground #1b1a26
menubar.selectionBorder #e60f0f00
menubar.selectionForeground #cccaff
merge.commonContentBackground #222330
merge.commonHeaderBackground #2c2d3b
merge.currentContentBackground #212238
merge.currentHeaderBackground #272843
merge.incomingContentBackground #15131d
merge.incomingHeaderBackground #1c1a28
minimap.background #111111
minimap.errorHighlight #ff2069
minimap.findMatchHighlight #28263f
minimap.selectionHighlight #211d2a
minimap.warningHighlight #ffe46c
minimapGutter.addedBackground #44ba88
minimapGutter.deletedBackground #ff4d4d
minimapGutter.modifiedBackground #7484ff
notificationCenter.border #47474700
notificationCenterHeader.background #1d1b28
notificationCenterHeader.foreground #a2a0d7
notifications.background #16151f
notifications.border #30303100
notifications.foreground #aeaad7
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #47a8ff
notificationsWarningIcon.foreground #cca700
notificationToast.border #47474700
panel.background #111111
panel.border #191919
panelSection.border #24232aad
panelTitle.activeBorder #de70c8
panelTitle.activeForeground #de70c8
panelTitle.inactiveForeground #676a8e99
peekView.border #cb70de
peekViewEditor.background #111010
peekViewEditor.matchHighlightBackground #544b9256
peekViewEditor.matchHighlightBorder #7a70de
peekViewEditorGutter.background #171515
peekViewResult.background #0d0b0b
peekViewResult.fileForeground #8586b4
peekViewResult.lineForeground #d1d1d1
peekViewResult.matchHighlightBackground #5e40a187
peekViewResult.selectionBackground #49415e33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1a1721
peekViewTitleDescription.foreground #ffffff
peekViewTitleLabel.foreground #c1b2e4
pickerGroup.border #51517100
pickerGroup.foreground #775476
progressBar.background #d8aaffc7
scrollbar.shadow #28282800
scrollbarSlider.activeBackground #493f64
scrollbarSlider.background #433f8820
scrollbarSlider.hoverBackground #292a4d
selection.background #47344b
settings.focusedRowBackground #ffffff07
settings.headerForeground #c2c2c2
sideBar.background #111111
sideBar.border #11111100
sideBar.dropBackground #1b1a26
sideBar.foreground #cef1ff
sideBarSectionHeader.background #ffffff00
sideBarSectionHeader.border #111111
sideBarSectionHeader.foreground #f2e7a8
sideBarTitle.foreground #f9aaaa
statusBar.background #111111
statusBar.border #11111100
statusBar.debuggingBackground #362e54
statusBar.debuggingBorder #111111
statusBar.debuggingForeground #a797e6
statusBar.foreground #8782b8
statusBar.noFolderBackground #111111
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #1b1a26
statusBarItem.remoteBackground #111111
statusBarItem.remoteForeground #ff5ace
tab.activeBackground #1b1b1b
tab.activeBorder #7a70de
tab.activeBorderTop #5affb200
tab.activeForeground #c6c0ee
tab.border #25252600
tab.hoverBackground #151414
tab.hoverBorder #39365c
tab.inactiveBackground #111111
tab.inactiveForeground #79759b
terminal.ansiBlack #545454
terminal.ansiBlue #277ad5
terminal.ansiBrightBlack #777777
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 #31c089
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #a1a1a1
terminal.ansiYellow #e5e510
terminal.border #24232aad
terminal.foreground #615f90
terminal.selectionBackground #31294344
terminalCursor.background #141324
terminalCursor.foreground #9c98ff
textLink.foreground #9490c4
titleBar.activeBackground #111111
titleBar.activeForeground #8782b8
titleBar.border #0d0d0d00
titleBar.inactiveBackground #0d0d0d
titleBar.inactiveForeground #716e90
tree.indentGuidesStroke #2f2d3d
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000000 #a0ddff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #dbc8e0 —
variable.parameter.function.language.special.self.python #fd83d3 —
storage.modifier.lifetime.rust #dbc8e0 —
support.function.std.rust #f4b860 —
entity.name.lifetime.rust #fd83d3 —
variable.language.rust #a0ddff —
support.constant.edge #9084e7 —
constant.other.character-class.regexp #a0ddff —
keyword.operator.quantifier.regexp #95d484 —
punctuation.definition.string.begin,punctuation.definition.string.end #ff6744 —
variable.parameter.function #dbc8e0 —
comment markup.link #a288a6 —
markup.changed.diff #fd83d3 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #f4b860 —
markup.inserted.diff #ff6744 —
markup.deleted.diff #a0ddff —
meta.function.c,meta.function.cpp #a0ddff —
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 #dbc8e0 —
punctuation.separator.key-value #dbc8e0 —
keyword.operator.expression.import #f4b860 —
support.constant.math #fd83d3 —
support.constant.property.math #95d484 —
variable.other.constant #fd83d3 —
storage.type.annotation.java, storage.type.object.array.java #fd83d3 —
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 #dbc8e0 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #fd83d3 —
keyword.operator.instanceof.java #9084e7 —
meta.definition.variable.name.java #a0ddff —
keyword.operator.logical #e8ebe4 —
keyword.operator.bitwise #e8ebe4 —
keyword.operator.channel #e8ebe4 —
support.constant.property-value.scss,support.constant.property-value.css #95d484 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #e8ebe4 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #95d484 —
punctuation.separator.list.comma.css #dbc8e0 —
support.constant.color.w3c-standard-color-name.css #95d484 —
support.type.vendored.property-name.css #e8ebe4 —
support.module.node,support.type.object.module,support.module.node #fd83d3 —
entity.name.type.module #fd83d3 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #a0ddff —
support.constant.json #95d484 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #9084e7 —
support.type.object.console #a0ddff —
support.variable.property.process #95d484 —
entity.name.function,support.function.console #f4b860 —
keyword.operator.misc.rust #dbc8e0 —
keyword.operator.sigil.rust #9084e7 —
keyword.operator.delete #9084e7 —
support.type.object.dom #e8ebe4 —
support.variable.dom,support.variable.property.dom #a0ddff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #e8ebe4 —
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 #9084e7 —
punctuation.separator.delimiter #dbc8e0 —
punctuation.separator.c,punctuation.separator.cpp #9084e7 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #e8ebe4 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #9084e7 —
variable.parameter.function.language.python #95d484 —
support.type.python #e8ebe4 —
keyword.operator.logical.python #9084e7 —
variable.parameter.function.python #95d484 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #dbc8e0 —
meta.function-call.generic.python #f4b860 —
constant.character.format.placeholder.other.python #95d484 —
keyword.operator.assignment.compound #9084e7 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #e8ebe4 —
entity.name.namespace #fd83d3 —
variable.language #fd83d3 —
token.variable.parameter.java #dbc8e0 —
import.storage.java #fd83d3 —
token.package.keyword #9084e7 —
entity.name.function, meta.require, support.function.any-method, variable.function #f4b860 —
entity.name.type.namespace #fd83d3 —
support.class, entity.name.type.class #fd83d3 —
entity.name.class.identifier.namespace.type #fd83d3 —
entity.name.class, variable.other.class.js, variable.other.class.ts #fd83d3 —
variable.other.class.php #a0ddff —
control.elements, keyword.operator.less #95d484 —
keyword.other.special-method #f4b860 —
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 #9084e7 —
token.storage.type.java #fd83d3 —
support.type.property-name #dbc8e0 —
support.constant.property-value #dbc8e0 —
support.constant.font-name #95d484 —
entity.other.inherited-class #fd83d3 —
constant.other.symbol #e8ebe4 —
punctuation.definition.constant #95d484 —
entity.other.attribute-name #95d484 —
entity.other.attribute-name.id #f4b860 normal
entity.other.attribute-name.class.css #95d484 normal
markup.heading punctuation.definition.heading, entity.name.section #f4b860 —
keyword.other.unit #a0ddff —
markup.bold,todo.bold #95d484 —
punctuation.definition.bold #fd83d3 —
markup.italic, punctuation.definition.italic,todo.emphasis #9084e7 —
entity.name.section.markdown #a0ddff —
punctuation.definition.heading.markdown #a0ddff —
punctuation.definition.list.begin.markdown #a0ddff —
markup.heading.setext #dbc8e0 —
punctuation.definition.bold.markdown #95d484 —
markup.inline.raw.markdown #ff6744 —
markup.inline.raw.string.markdown #ff6744 —
punctuation.definition.list.markdown #a0ddff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #a0ddff —
beginning.punctuation.definition.list.markdown #a0ddff —
punctuation.definition.metadata.markdown #a0ddff —
markup.underline.link.markdown,markup.underline.link.image.markdown #9084e7 —
string.other.link.title.markdown,string.other.link.description.markdown #f4b860 —
constant.character.escape #e8ebe4 —
punctuation.section.embedded, variable.interpolation #a0ddff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #9084e7 —
invalid.illegal.bad-ampersand.html #dbc8e0 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #a0ddff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #a0ddff —
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 #ff6744 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #e8ebe4 —
support.type.property-name.json #a0ddff —
support.type.property-name.json punctuation #a0ddff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #9084e7 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #9084e7 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #fd83d3 —
keyword.operator.error-control.php #9084e7 —
keyword.operator.type.php #9084e7 —
punctuation.section.array.begin.php #dbc8e0 —
punctuation.section.array.end.php #dbc8e0 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #fd83d3 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #f4b860 —
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 #dbc8e0 —
support.constant.core.rust #95d484 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #95d484 —
entity.name.goto-label.php,support.other.php #f4b860 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #e8ebe4 —
keyword.operator.regexp.php #9084e7 —
keyword.operator.comparison.php #e8ebe4 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #9084e7 —
meta.function.decorator.python #f4b860 —
support.token.decorator.python,meta.function.decorator.identifier.python #e8ebe4 —
function.parameter #dbc8e0 —
function.parameter.ruby, function.parameter.cs #dbc8e0 —
constant.language.symbol.ruby #e8ebe4 —
inline-color-decoration rgb-value #95d484 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #fd83d3 —
block.scope.end,block.scope.begin #dbc8e0 —
entity.name.variable.local.cs #a0ddff —
token.error-token #f44747 —
token.debug-token #9084e7 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #9084e7 —
meta.template.expression #dbc8e0 —
keyword.operator.module #9084e7 —
support.type.type.flowtype #f4b860 —
support.type.primitive #fd83d3 —
meta.property.object #a0ddff —
variable.parameter.function.js #a0ddff —
keyword.other.template.begin #ff6744 —
keyword.other.template.end #ff6744 —
keyword.other.substitution.begin #ff6744 —
keyword.other.substitution.end #ff6744 —
keyword.operator.assignment #e8ebe4 —
keyword.operator.assignment.go #fd83d3 —
keyword.operator.arithmetic.go, keyword.operator.address.go #9084e7 —
entity.name.package.go #fd83d3 —
support.type.prelude.elm #e8ebe4 —
support.constant.elm #95d484 —
punctuation.quasi.element #9084e7 —
constant.character.entity #a0ddff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #e8ebe4 —
entity.global.clojure #fd83d3 —
meta.symbol.clojure #a0ddff —
constant.keyword.clojure #e8ebe4 —
meta.arguments.coffee, variable.parameter.function.coffee #a0ddff —
meta.scope.prerequisites.makefile #a0ddff —
storage.modifier.import.groovy #fd83d3 —
meta.method.groovy #f4b860 —
meta.definition.variable.name.groovy #a0ddff —
meta.definition.class.inherited.classes.groovy #ff6744 —
support.variable.semantic.hlsl #fd83d3 —
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 #9084e7 —
text.variable, text.bracketed #a0ddff —
support.type.swift, support.type.vb.asp #fd83d3 —
entity.name.function.xi #fd83d3 —
entity.name.class.xi #e8ebe4 —
constant.character.character-class.regexp.xi #a0ddff —
constant.regexp.xi #9084e7 —
keyword.control.xi #e8ebe4 —
beginning.punctuation.definition.quote.markdown.xi #ff6744 —
beginning.punctuation.definition.list.markdown.xi #a288a6 —
constant.character.xi #f4b860 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #a288a6 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #fd83d3 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #a0ddff —
meta.brace.square #dbc8e0 —
comment, punctuation.definition.comment #a288a6 italic
markup.quote.markdown #a288a6 —
punctuation.definition.block.sequence.item.yaml #dbc8e0 —
constant.language.symbol.elixir #e8ebe4 —
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 } !` ;
}
Cosmic Iris | Coding Theme