Skip to main content
Home Theme VS Code Functional Matrix - Clubcleaver Greens with actual usage considerations, tested for GO, JS, TS, React, HTML, CSS, Tailwind
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 #000000 activityBar.background #000000 activityBar.border #ff000000 activityBar.foreground #008835 activityBar.inactiveForeground #007b2566 activityBarBadge.background #00490f 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 #219b00 — variable.other.generic-type.haskell #8bff00 — storage.type.haskell #338427 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Functional Matrix - Clubcleaver — Functional Matrix - Clubcleaver
activityBarBadge.foreground #ffffff
badge.background #4d4d4d
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #0b5800
breadcrumb.background #011100
breadcrumb.focusForeground #0b5800
breadcrumb.foreground #54cf00cc
button.background #00ff7c
button.foreground #000000
button.hoverBackground #86b600
button.secondaryBackground #006606
button.secondaryForeground #000000
button.secondaryHoverBackground #197705
checkbox.background #000000
checkbox.border #00000000
checkbox.foreground #76ff05
debugExceptionWidget.background #000000
debugExceptionWidget.border #0f0f0f
debugToolBar.background #000000
debugToolBar.border #0f0f0f
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #000000
dropdown.border #00000000
dropdown.foreground #76ff05
editor.background #000000
editor.findMatchBackground #00ff1058
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #007f0055
editor.foreground #44ff00
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #49060c8b
editor.lineHighlightBackground #00ff100a
editor.lineHighlightBorder #051500
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #82000078
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.snippetFinalTabstopHighlightBackground #00000000
editor.snippetFinalTabstopHighlightBorder #00000000
editor.snippetTabstopHighlightBackground #00000000
editor.snippetTabstopHighlightBorder #00000000
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketHighlight.foreground1 #00FF41
editorBracketHighlight.foreground2 #00FF41
editorBracketHighlight.foreground3 #00FF41
editorBracketHighlight.foreground4 #00FF41
editorBracketHighlight.foreground5 #00FF41
editorBracketHighlight.foreground6 #00FF41
editorBracketHighlight.unexpectedBracket.foreground #FF0000
editorBracketMatch.background #062f0000
editorBracketMatch.border #000000
editorCodeLens.foreground #ffffff
editorCursor.background #000000
editorCursor.foreground #ff0000
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #ff2b00
editorGroup.border #91ff93
editorGroup.emptyBackground #000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #1d1d1d
editorGutter.addedBackground #587c0c
editorGutter.background #000000
editorGutter.commentRangeForeground #ba0202
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #ba0202
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #000000
editorHoverWidget.border #3c9400
editorHoverWidget.foreground #828282
editorIndentGuide.activeBackground1 #008f00
editorIndentGuide.background1 #036400a1
editorInfo.background #343d4300
editorInfo.border #9f606000
editorInfo.foreground #ffdd75
editorLineNumber.activeForeground #c9ffa5
editorLineNumber.foreground #00620b
editorLink.activeForeground #5fff69
editorMarkerNavigation.background #000000
editorMarkerNavigationError.background #123b00
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #00ccaf
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorSuggestWidget.background #000000
editorSuggestWidget.border #45454500
editorSuggestWidget.foreground #00b402
editorSuggestWidget.highlightForeground #00ff10
editorSuggestWidget.selectedBackground #006b3464
editorSuggestWidget.selectedForeground #00c979
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #000000
editorWidget.foreground #3ca700
editorWidget.resizeBorder #5F5F5F
focusBorder #005a01d7
foreground #00d32b
icon.foreground #00d32b
input.background #000000
input.border #00000000
input.foreground #76ff05
input.placeholderForeground #047300
inputOption.activeBackground #00ff1cb3
inputOption.activeBorder #93afc200
inputOption.activeForeground #000000
list.activeSelectionBackground #43c414
list.activeSelectionForeground #000000
list.dropBackground #050f00
list.focusBackground #00190b
list.focusForeground #2bc200
list.highlightForeground #00fb4b
list.hoverBackground #005e18
list.hoverForeground #cccccc
list.inactiveSelectionBackground #001d09
list.inactiveSelectionForeground #188c00
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #be5d5d00
menu.background #000000
menu.border #5c640085
menu.foreground #00cd5a
menu.selectionBackground #000f00
menu.selectionBorder #00000000
menu.selectionForeground #c5ffc6
menu.separatorBackground #131313
menubar.selectionBackground #1b7b006c
menubar.selectionBorder #b66f6f00
menubar.selectionForeground #ffffff
merge.commonContentBackground #0f0f0ff1
merge.commonHeaderBackground #0b3000e5
merge.currentContentBackground #0f0f0fce
merge.currentHeaderBackground #474747e2
merge.incomingContentBackground #0f0f0fe3
merge.incomingHeaderBackground #001f00e2
minimap.background #000000
minimap.errorHighlight #ff2b00
minimap.findMatchHighlight #00ff1058
minimap.selectionHighlight #82000078
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #00190e
notificationCenterHeader.foreground #9af000
notifications.background #000000
notifications.border #303031
notifications.foreground #a3ff00
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #000000
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #06b400
panelTitle.activeForeground #74ff00
panelTitle.inactiveForeground #34a50099
peekView.border #2dcc00
peekViewEditor.background #000000
peekViewEditor.matchHighlightBackground #ff000056
peekViewEditor.matchHighlightBorder #ee1e1e00
peekViewEditorGutter.background #000000
peekViewResult.background #000000
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #186d0033
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #ffffff
progressBar.background #008068
quickInput.background #000
quickInput.foreground #058d00
scrollbar.shadow #343434
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #003b0666
scrollbarSlider.hoverBackground #2ba300b3
selection.background #00412c
settings.focusedRowBackground #ffffff07
settings.headerForeground #00d32b
sideBar.background #000000
sideBar.border #001705
sideBar.dropBackground #050f00
sideBar.foreground #3ba300
sideBarSectionHeader.background #8a323200
sideBarSectionHeader.border #00e40e33
sideBarSectionHeader.foreground #1cff20
sideBarTitle.foreground #66fb00
statusBar.background #000000
statusBar.border #ff000000
statusBar.debuggingBackground #000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #3b8e63
statusBar.noFolderBackground #000000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #040404
statusBarItem.remoteForeground #ffffff
tab.activeBackground #0a2100
tab.activeBorder #00000000
tab.activeBorderTop #00ff34
tab.activeForeground #a3ff00
tab.border #252526
tab.inactiveBackground #000000
tab.inactiveForeground #00ff0480
terminal.ansiBlack #000000
terminal.ansiBlue #62ff6c
terminal.ansiBrightBlack #d50a0a
terminal.ansiBrightBlue #86c900
terminal.ansiBrightCyan #29B8DB
terminal.ansiBrightGreen #0ef945
terminal.ansiBrightMagenta #5b005b
terminal.ansiBrightRed #ffffff
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #F5F543
terminal.ansiCyan #f11e1e
terminal.ansiGreen #65ff8e
terminal.ansiMagenta #BC3FBC
terminal.ansiRed #008a23
terminal.ansiWhite #8dff97
terminal.ansiYellow #639408
terminal.background #000000
terminal.border #01b72bb3
terminal.foreground #2ba000
terminal.inactiveSelectionBackground #670000ae
terminal.selectionBackground #9e0101c9
terminalCursor.background #e50000
terminalCursor.foreground #b10a0a
textLink.foreground #beffbc
titleBar.activeBackground #000000
titleBar.activeForeground #008e16
titleBar.border #00000000
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #ffffff00
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0f30005c #219b00
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #44ff00 —
variable.parameter.function.language.special.self.python #c4ff7d —
storage.modifier.lifetime.rust #44ff00 —
support.function.std.rust #b5ff82 —
entity.name.lifetime.rust #c4ff7d —
variable.language.rust #219b00 —
support.constant.edge #8bff00 —
constant.other.character-class.regexp #219b00 —
keyword.operator.quantifier.regexp #338427 —
punctuation.definition.string.begin,punctuation.definition.string.end #50be00 —
variable.parameter.function #44ff00 —
comment markup.link #666666 —
markup.changed.diff #c4ff7d —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #b5ff82 —
markup.inserted.diff #50be00 —
markup.deleted.diff #219b00 —
meta.function.c,meta.function.cpp #219b00 —
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 #44ff00 —
punctuation.separator.key-value #44ff00 —
keyword.operator.expression.import #b5ff82 —
support.constant.math #c4ff7d —
support.constant.property.math #338427 —
variable.other.constant #c4ff7d —
storage.type.annotation.java,storage.type.object.array.java #c4ff7d —
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 #44ff00 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #c4ff7d —
keyword.operator.instanceof.java #8bff00 —
meta.definition.variable.name.java #219b00 —
keyword.operator.logical,keyword.operator.bitwise #74ff57 —
keyword.operator.channel #74ff57 —
support.constant.property-value.scss,support.constant.property-value.css #338427 —
keyword.operator.css,keyword.operator.scss #74ff57 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #338427 —
punctuation.separator.list.comma.css #44ff00 —
support.type.vendored.property-name.css #74ff57 —
support.module.node,support.type.object.module #c4ff7d —
entity.name.type.module #c4ff7d —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #219b00 —
support.constant.json #338427 —
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary,keyword.operator.optional,keyword.operator.expression.keyof #8bff00 —
support.type.object.console #219b00 —
support.variable.property.process #338427 —
entity.name.function,support.function.console #b5ff82 —
keyword.operator.misc.rust #44ff00 —
keyword.operator.sigil.rust #8bff00 —
keyword.operator.delete #8bff00 —
support.type.object.dom #74ff57 —
support.variable.dom,support.variable.property.dom #219b00 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #74ff57 —
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 #8bff00 —
punctuation.separator.delimiter #44ff00 —
punctuation.separator.c,punctuation.separator.cpp #8bff00 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #74ff57 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #8bff00 —
variable.parameter.function.language.python #338427 —
support.type.python #74ff57 —
keyword.operator.logical.python #8bff00 —
variable.parameter.function.python #338427 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #44ff00 —
meta.function-call.generic.python #b5ff82 —
constant.character.format.placeholder.other.python #338427 —
keyword.operator.assignment.compound #8bff00 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #74ff57 —
entity.name.namespace #c4ff7d —
variable.language #c4ff7d —
token.variable.parameter.java #44ff00 —
import.storage.java #c4ff7d —
token.package.keyword #8bff00 —
meta.require,support.function.any-method,variable.function #b5ff82 —
entity.name.type.namespace #c4ff7d —
support.class, entity.name.type.class #c4ff7d —
entity.name.class.identifier.namespace.type #c4ff7d —
entity.name.class,variable.other.class.js,variable.other.class.ts #c4ff7d —
variable.other.class.php #219b00 —
control.elements, keyword.operator.less #338427 —
keyword.other.special-method #b5ff82 —
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 #8bff00 —
token.storage.type.java #c4ff7d —
support.type.property-name #44ff00 —
support.constant.property-value #44ff00 —
support.constant.font-name #338427 —
entity.other.inherited-class #c4ff7d —
constant.other.symbol #74ff57 —
punctuation.definition.constant #338427 —
entity.other.attribute-name #338427 —
entity.other.attribute-name.id #b5ff82 —
entity.other.attribute-name.class.css #338427 —
markup.heading punctuation.definition.heading, entity.name.section #b5ff82 —
keyword.other.unit #219b00 —
markup.bold,todo.bold #338427 —
punctuation.definition.bold #c4ff7d —
markup.italic, punctuation.definition.italic,todo.emphasis #8bff00 —
entity.name.section.markdown #219b00 —
punctuation.definition.heading.markdown #219b00 —
punctuation.definition.list.begin.markdown #219b00 —
markup.heading.setext #44ff00 —
punctuation.definition.bold.markdown #338427 —
markup.inline.raw.markdown,markup.inline.raw.string.markdown #50be00 —
punctuation.definition.list.markdown #219b00 —
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown #219b00 —
beginning.punctuation.definition.list.markdown #219b00 —
punctuation.definition.metadata.markdown #219b00 —
markup.underline.link.markdown,markup.underline.link.image.markdown #8bff00 —
string.other.link.title.markdown,string.other.link.description.markdown #b5ff82 —
constant.character.escape #74ff57 —
punctuation.section.embedded, variable.interpolation #219b00 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #8bff00 —
invalid.illegal.bad-ampersand.html #44ff00 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #219b00 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #219b00 —
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 #50be00 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #74ff57 —
support.type.property-name.json #219b00 —
support.type.property-name.json punctuation #219b00 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #8bff00 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #8bff00 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #c4ff7d —
keyword.operator.error-control.php #8bff00 —
keyword.operator.type.php #8bff00 —
punctuation.section.array.begin.php,punctuation.section.array.end.php #44ff00 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #c4ff7d —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #b5ff82 —
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 #44ff00 —
support.constant.core.rust #338427 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #338427 —
entity.name.goto-label.php,support.other.php #b5ff82 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #74ff57 —
keyword.operator.regexp.php #8bff00 —
keyword.operator.comparison.php #74ff57 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #8bff00 —
meta.function.decorator.python #b5ff82 —
support.token.decorator.python,meta.function.decorator.identifier.python #74ff57 —
function.parameter #44ff00 —
function.parameter.ruby, function.parameter.cs #44ff00 —
constant.language.symbol.ruby #74ff57 —
inline-color-decoration rgb-value #338427 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #c4ff7d —
block.scope.end,block.scope.begin #44ff00 —
entity.name.variable.local.cs #219b00 —
token.error-token #f44747 —
token.debug-token #8bff00 —
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.section.embedded #8bff00 —
meta.template.expression #44ff00 —
keyword.operator.module #8bff00 —
support.type.type.flowtype #b5ff82 —
support.type.primitive #c4ff7d —
meta.property.object #219b00 —
variable.parameter.function.js #219b00 —
keyword.other.template.begin,keyword.other.template.end,keyword.other.substitution.begin,keyword.other.substitution.end #50be00 —
keyword.operator.assignment #74ff57 —
keyword.operator.assignment.go #c4ff7d —
keyword.operator.arithmetic.go,keyword.operator.address.go #8bff00 —
entity.name.package.go #c4ff7d —
support.type.prelude.elm #74ff57 —
support.constant.elm #338427 —
punctuation.quasi.element #8bff00 —
constant.character.entity #219b00 —
entity.other.attribute-name.pseudo-element,entity.other.attribute-name.pseudo-class #74ff57 —
entity.global.clojure #c4ff7d —
meta.symbol.clojure #219b00 —
constant.keyword.clojure #74ff57 —
meta.arguments.coffee,variable.parameter.function.coffee #219b00 —
meta.scope.prerequisites.makefile #219b00 —
storage.modifier.import.groovy #c4ff7d —
meta.method.groovy #b5ff82 —
meta.definition.variable.name.groovy #219b00 —
meta.definition.class.inherited.classes.groovy #50be00 —
support.variable.semantic.hlsl #c4ff7d —
support.type.texture.hlsl,support.type.sampler.hlsl,support.type.object.hlsl,support.type.object.rw.hlsl,support.type.fx.hlsl #8bff00 —
text.variable,text.bracketed #219b00 —
support.type.swift,support.type.vb.asp #c4ff7d —
entity.name.function.xi #c4ff7d —
entity.name.class.xi #74ff57 —
constant.character.character-class.regexp.xi #219b00 —
constant.regexp.xi #8bff00 —
keyword.control.xi #74ff57 —
beginning.punctuation.definition.quote.markdown.xi #50be00 —
beginning.punctuation.definition.list.markdown.xi #666666 —
constant.character.xi #b5ff82 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #666666 —
entity.name.label.cs,entity.name.scope-resolution.function.call,entity.name.scope-resolution.function.definition #c4ff7d —
markup.heading.setext.1.markdown,markup.heading.setext.2.markdown #219b00 —
meta.brace.square #44ff00 —
comment, punctuation.definition.comment #666666 italic
markup.quote.markdown #666666 —
punctuation.definition.block.sequence.item.yaml #44ff00 —
constant.language.symbol.elixir #74ff57 —
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
constant.language #74ff57 italic
storage.type, storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.boolean.go, constant.other.placeholder #6fff00 —
storage.modifier, support.variable #00ff44 bold
entity.other.attribute-name.pseudo-element.css, variable.css, ntity.other.attribute-name.pseudo-class.css, meta.at-rule.layer.body.tailwind, source.css entity.other.attribute-name.pseudo-class #00ff44 bold
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*
Functional Matrix - Clubcleaver | 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 } !` ;
}