Skip to main content
Home Theme VS Code Artinpixel Turquoise Theme A light and simple theme with vibrant colors of turquoise shades
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 #205b645e activityBar.background #323638 activityBar.border #0fcce56a activityBar.foreground #0fcce5 activityBar.inactiveForeground #c6ebef60 activityBarBadge.background #11aabe 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 #00aec4 — variable.other.generic-type.haskell #add1d5 — storage.type.haskell #b86666 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Artinpixel Turquoise Theme — Artinpixel Turquoise Theme
activityBarBadge.foreground #ffffff
badge.background #f23d3d
badge.foreground #000000
breadcrumb.activeSelectionForeground #c6ebef
breadcrumb.background #202426
breadcrumb.focusForeground #c6ebef
breadcrumb.foreground #c4ccd1
button.background #0fcce5
button.foreground #ffffff
button.hoverBackground #0e8796
button.secondaryBackground #2a2e30
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #323638
checkbox.border #00000000
checkbox.foreground #c6ebef
debugExceptionWidget.background #323638
debugExceptionWidget.border #47474700
debugToolBar.background #323638
debugToolBar.border #47474700
diffEditor.border #00000000
diffEditor.insertedTextBackground #79943a33
diffEditor.insertedTextBorder #864c4c
diffEditor.removedTextBackground #ff4e4e33
diffEditor.removedTextBorder #8a41418b
dropdown.background #323638
dropdown.border #00000000
dropdown.foreground #c6ebef
editor.background #323638
editor.findMatchBackground #7c7c7c
editor.findMatchBorder #74879f00
editor.findMatchHighlightBackground #0fcce532
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #0fcce514
editor.findRangeHighlightBorder #f2f2f200
editor.foldBackground #2a2c2eb3
editor.foreground #ccd8de
editor.hoverHighlightBackground #a0cfff40
editor.inactiveSelectionBackground #FFFFFF20
editor.lineHighlightBackground #15161744
editor.lineHighlightBorder #28282800
editor.rangeHighlightBackground #f96f6f0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #0fcce536
editor.selectionHighlightBackground #0fcce53a
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #575757b8
editor.wordHighlightBorder #ff000000
editor.wordHighlightStrongBackground #0fcce560
editor.wordHighlightStrongBorder #ff000000
editorBracketMatch.background #ff97281c
editorBracketMatch.border #7c7c7c
editorCodeLens.foreground #9ea19c9b
editorCursor.background #ffffff
editorCursor.foreground #0fcce5
editorError.background #7b444200
editorError.border #ffffff00
editorError.foreground #ff4620
editorGroup.border #00000070
editorGroup.emptyBackground #323638
editorGroupHeader.border #101011
editorGroupHeader.tabsBackground #323638
editorGroupHeader.tabsBorder #0fcce566
editorGutter.addedBackground #55ba0f
editorGutter.background #2d3032
editorGutter.commentRangeForeground #cbc4c4
editorGutter.deletedBackground #c41f26
editorGutter.foldingControlForeground #cbc4c4
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #242628
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #0fcce566
editorIndentGuide.background #0fcce52a
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #5186b6
editorLineNumber.activeForeground #0fcce5
editorLineNumber.foreground #c6ebef36
editorLink.activeForeground #0fcce5
editorMarkerNavigation.background #222526
editorMarkerNavigationError.background #8a4d4d
editorMarkerNavigationInfo.background #527fa7
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #5e5e5e00
editorOverviewRuler.border #c0afaf00
editorRuler.foreground #FFFFFF14
editorSuggestWidget.background #26282a
editorSuggestWidget.border #45454544
editorSuggestWidget.foreground #8da5b6
editorSuggestWidget.highlightForeground #0fcce5
editorSuggestWidget.selectedBackground #171819
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #ffe46c
editorWhitespace.foreground #fbfff829
editorWidget.background #323638
editorWidget.foreground #b2a8a8
editorWidget.resizeBorder #0fcce5
focusBorder #0fcce52e
foreground #CECECE
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #CECECE
input.background #323638
input.border #00000000
input.foreground #c6ebef
input.placeholderForeground #7c7c7c
inputOption.activeBackground #0fcce53a
inputOption.activeBorder #0fcce504
inputOption.activeForeground #ffffff
list.activeSelectionBackground #40d1e828
list.activeSelectionForeground #0fcce5
list.dropBackground #292e30
list.focusBackground #0fcce532
list.focusForeground #e0e0e0
list.highlightForeground #0fcce5
list.hoverBackground #0fcce564
list.hoverForeground #ffffff
list.inactiveSelectionBackground #0fcce520
list.inactiveSelectionForeground #0fcce5
listFilterWidget.background #d7c4c450
listFilterWidget.noMatchesOutline #f0564700
listFilterWidget.outline #c2bdbd00
menu.background #2a2d2e
menu.border #8a7b7b00
menu.foreground #c6ebef
menu.selectionBackground #0fcce51c
menu.selectionBorder #00000000
menu.selectionForeground #0fcce5
menu.separatorBackground #434749
menubar.selectionBackground #0fcce530
menubar.selectionBorder #e60f0f00
menubar.selectionForeground #0fcce5
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #043136
merge.incomingHeaderBackground #29818c
minimap.background #323638
minimap.errorHighlight #ff4620
minimap.findMatchHighlight #7c7c7c
minimap.selectionHighlight #0fcce536
minimap.warningHighlight #ffe46c
minimapGutter.addedBackground #55ba0f
minimapGutter.deletedBackground #c41f26
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #47474700
notificationCenterHeader.background #1d1e1f
notificationCenterHeader.foreground #fbfbfb
notifications.background #323638
notifications.border #c6ebef36
notifications.foreground #c6ebef
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #ffffff00
panel.background #2a2d2e
panel.border #191a1b
panelSection.border #0fcce548
panelTitle.activeBorder #0fcce56e
panelTitle.activeForeground #0fcce5
panelTitle.inactiveForeground #c6ebef99
peekView.border #678386
peekViewEditor.background #1e2021
peekViewEditor.matchHighlightBackground #ee860056
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #26282a
peekViewResult.background #141617
peekViewResult.fileForeground #0da8bc
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #141617
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #0fcce5
pickerGroup.border #51517100
pickerGroup.foreground #9f9e9e
progressBar.background #0fcce5
scrollbar.shadow #323638
scrollbarSlider.activeBackground #ffffff20
scrollbarSlider.background #7c7c7c7c
scrollbarSlider.hoverBackground #7c7c7cab
selection.background #0fcce546
settings.focusedRowBackground #ffffff07
settings.headerForeground #CECECE
sideBar.background #323638
sideBar.border #1e2021
sideBar.dropBackground #292e30
sideBar.foreground #daeaec
sideBarSectionHeader.background #212426
sideBarSectionHeader.border #323638
sideBarSectionHeader.foreground #7c7c7c
sideBarTitle.foreground #c6ebef
statusBar.background #323638
statusBar.border #000000
statusBar.debuggingBackground #0e8594
statusBar.debuggingBorder #323638
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #7c7c7c
statusBar.noFolderBorder #323638
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #0fcce52a
statusBarItem.remoteBackground #07383f
statusBarItem.remoteForeground #f8fcff
tab.activeBackground #323638
tab.activeBorder #0fcce5
tab.activeBorderTop #5affb200
tab.activeForeground #c6ebef
tab.border #1f2121
tab.hoverBackground #ffffff20
tab.hoverBorder #00000000
tab.inactiveBackground #111315
tab.inactiveForeground #ffffff4c
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 #0fcce548
terminal.foreground #beb6b6
terminal.selectionBackground #0fcce50e
terminalCursor.background #0fcce5
terminalCursor.foreground #ffffff
textLink.foreground #0fcce5
titleBar.activeBackground #25282a
titleBar.activeForeground #c6ebef
titleBar.border #1b1d1d
titleBar.inactiveBackground #323638
titleBar.inactiveForeground #5b6162
tree.indentGuidesStroke #0e7280
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #00aec4
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ccd8de —
variable.parameter.function.language.special.self.python #67bbc7 —
storage.modifier.lifetime.rust #ccd8de —
support.function.std.rust #95f3ff —
entity.name.lifetime.rust #67bbc7 —
variable.language.rust #00aec4 —
support.constant.edge #add1d5 —
constant.other.character-class.regexp #00aec4 —
keyword.operator.quantifier.regexp #b86666 —
punctuation.definition.string.begin,punctuation.definition.string.end #c9aa34 —
variable.parameter.function #ccd8de —
comment markup.link #5f626b —
markup.changed.diff #67bbc7 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #95f3ff —
markup.inserted.diff #c9aa34 —
markup.deleted.diff #00aec4 —
meta.function.c,meta.function.cpp #00aec4 —
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 #ccd8de —
punctuation.separator.key-value #ccd8de —
keyword.operator.expression.import #95f3ff —
support.constant.math #67bbc7 —
support.constant.property.math #b86666 —
variable.other.constant #67bbc7 —
storage.type.annotation.java, storage.type.object.array.java #67bbc7 —
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 #ccd8de —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #67bbc7 —
keyword.operator.instanceof.java #add1d5 —
meta.definition.variable.name.java #00aec4 —
keyword.operator.logical #adcfd3 —
keyword.operator.bitwise #adcfd3 —
keyword.operator.channel #adcfd3 —
support.constant.property-value.scss,support.constant.property-value.css #b86666 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #adcfd3 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #b86666 —
punctuation.separator.list.comma.css #ccd8de —
support.constant.color.w3c-standard-color-name.css #b86666 —
support.type.vendored.property-name.css #adcfd3 —
support.module.node,support.type.object.module,support.module.node #67bbc7 —
entity.name.type.module #67bbc7 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #00aec4 —
support.constant.json #b86666 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #add1d5 —
support.type.object.console #00aec4 —
support.variable.property.process #b86666 —
entity.name.function,support.function.console #95f3ff —
keyword.operator.misc.rust #ccd8de —
keyword.operator.sigil.rust #add1d5 —
keyword.operator.delete #add1d5 —
support.type.object.dom #adcfd3 —
support.variable.dom,support.variable.property.dom #00aec4 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #adcfd3 —
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 #add1d5 —
punctuation.separator.delimiter #ccd8de —
punctuation.separator.c,punctuation.separator.cpp #add1d5 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #adcfd3 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #add1d5 —
variable.parameter.function.language.python #b86666 —
support.type.python #adcfd3 —
keyword.operator.logical.python #add1d5 —
variable.parameter.function.python #b86666 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ccd8de —
meta.function-call.generic.python #95f3ff —
constant.character.format.placeholder.other.python #b86666 —
keyword.operator.assignment.compound #add1d5 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #adcfd3 —
entity.name.namespace #67bbc7 —
variable.language #67bbc7 —
token.variable.parameter.java #ccd8de —
import.storage.java #67bbc7 —
token.package.keyword #add1d5 —
entity.name.function, meta.require, support.function.any-method, variable.function #95f3ff —
entity.name.type.namespace #67bbc7 —
support.class, entity.name.type.class #67bbc7 —
entity.name.class.identifier.namespace.type #67bbc7 —
entity.name.class, variable.other.class.js, variable.other.class.ts #67bbc7 —
variable.other.class.php #00aec4 —
control.elements, keyword.operator.less #b86666 —
keyword.other.special-method #95f3ff —
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 #add1d5 —
token.storage.type.java #67bbc7 —
support.type.property-name #ccd8de —
support.constant.property-value #ccd8de —
support.constant.font-name #b86666 —
entity.other.inherited-class #67bbc7 —
constant.other.symbol #adcfd3 —
punctuation.definition.constant #b86666 —
entity.other.attribute-name #b86666 —
entity.other.attribute-name.id #95f3ff normal
entity.other.attribute-name.class.css #b86666 normal
markup.heading punctuation.definition.heading, entity.name.section #95f3ff —
keyword.other.unit #00aec4 —
markup.bold,todo.bold #b86666 —
punctuation.definition.bold #67bbc7 —
markup.italic, punctuation.definition.italic,todo.emphasis #add1d5 —
entity.name.section.markdown #00aec4 —
punctuation.definition.heading.markdown #00aec4 —
punctuation.definition.list.begin.markdown #00aec4 —
markup.heading.setext #ccd8de —
punctuation.definition.bold.markdown #b86666 —
markup.inline.raw.markdown #c9aa34 —
markup.inline.raw.string.markdown #c9aa34 —
punctuation.definition.list.markdown #00aec4 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #00aec4 —
beginning.punctuation.definition.list.markdown #00aec4 —
punctuation.definition.metadata.markdown #00aec4 —
markup.underline.link.markdown,markup.underline.link.image.markdown #add1d5 —
string.other.link.title.markdown,string.other.link.description.markdown #95f3ff —
constant.character.escape #adcfd3 —
punctuation.section.embedded, variable.interpolation #00aec4 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #add1d5 —
invalid.illegal.bad-ampersand.html #ccd8de —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #00aec4 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #00aec4 —
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 #c9aa34 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #adcfd3 —
support.type.property-name.json #00aec4 —
support.type.property-name.json punctuation #00aec4 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #add1d5 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #add1d5 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #67bbc7 —
keyword.operator.error-control.php #add1d5 —
keyword.operator.type.php #add1d5 —
punctuation.section.array.begin.php #ccd8de —
punctuation.section.array.end.php #ccd8de —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #67bbc7 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #95f3ff —
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 #ccd8de —
support.constant.core.rust #b86666 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #b86666 —
entity.name.goto-label.php,support.other.php #95f3ff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #adcfd3 —
keyword.operator.regexp.php #add1d5 —
keyword.operator.comparison.php #adcfd3 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #add1d5 —
meta.function.decorator.python #95f3ff —
support.token.decorator.python,meta.function.decorator.identifier.python #adcfd3 —
function.parameter #ccd8de —
function.parameter.ruby, function.parameter.cs #ccd8de —
constant.language.symbol.ruby #adcfd3 —
inline-color-decoration rgb-value #b86666 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #67bbc7 —
block.scope.end,block.scope.begin #ccd8de —
entity.name.variable.local.cs #00aec4 —
token.error-token #f44747 —
token.debug-token #add1d5 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #add1d5 —
meta.template.expression #ccd8de —
keyword.operator.module #add1d5 —
support.type.type.flowtype #95f3ff —
support.type.primitive #67bbc7 —
meta.property.object #00aec4 —
variable.parameter.function.js #00aec4 —
keyword.other.template.begin #c9aa34 —
keyword.other.template.end #c9aa34 —
keyword.other.substitution.begin #c9aa34 —
keyword.other.substitution.end #c9aa34 —
keyword.operator.assignment #adcfd3 —
keyword.operator.assignment.go #67bbc7 —
keyword.operator.arithmetic.go, keyword.operator.address.go #add1d5 —
entity.name.package.go #67bbc7 —
support.type.prelude.elm #adcfd3 —
support.constant.elm #b86666 —
punctuation.quasi.element #add1d5 —
constant.character.entity #00aec4 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #adcfd3 —
entity.global.clojure #67bbc7 —
meta.symbol.clojure #00aec4 —
constant.keyword.clojure #adcfd3 —
meta.arguments.coffee, variable.parameter.function.coffee #00aec4 —
meta.scope.prerequisites.makefile #00aec4 —
storage.modifier.import.groovy #67bbc7 —
meta.method.groovy #95f3ff —
meta.definition.variable.name.groovy #00aec4 —
meta.definition.class.inherited.classes.groovy #c9aa34 —
support.variable.semantic.hlsl #67bbc7 —
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 #add1d5 —
text.variable, text.bracketed #00aec4 —
support.type.swift, support.type.vb.asp #67bbc7 —
entity.name.function.xi #67bbc7 —
entity.name.class.xi #adcfd3 —
constant.character.character-class.regexp.xi #00aec4 —
constant.regexp.xi #add1d5 —
keyword.control.xi #adcfd3 —
beginning.punctuation.definition.quote.markdown.xi #c9aa34 —
beginning.punctuation.definition.list.markdown.xi #5f626b —
constant.character.xi #95f3ff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5f626b —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #67bbc7 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #00aec4 —
meta.brace.square #ccd8de —
comment, punctuation.definition.comment #5f626b italic
markup.quote.markdown #5f626b —
punctuation.definition.block.sequence.item.yaml #ccd8de —
constant.language.symbol.elixir #adcfd3 —
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*
Artinpixel Turquoise Theme | Coding Theme 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 } !` ;
}