Skip to main content
Home Theme VS Code habamix vscode theme based on habamax color theme shipped with vim
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.background #333333 activityBar.foreground #bcbcbc activityBar.inactiveForeground #bcbcbc54 activityBarBadge.background #51575c activityBarBadge.foreground #bcbcbc badge.background #4d4d4d 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 #afafcb — variable.other.generic-type.haskell #87afd7 — storage.type.haskell #d7875f — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1e1e1e
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #0e639c
button.foreground #ffffff
button.hoverBackground #1177bb
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1c1c1c
editor.findMatchBackground #515c6a8d
editor.findMatchBorder #87afaf
editor.findMatchHighlightBackground #f5773862
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #bcbcbc
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #303234
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #1d518870
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #87afaf
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #587d7d00
editorBracketMatch.border #acacac
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #bcbcbc
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #d75f5f
editorGroup.border #444444
editorGroup.emptyBackground #1c1c1c
editorGroupHeader.tabsBackground #252526
editorGutter.addedBackground #65a965b1
editorGutter.background #1e1e1e
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #d75f5fcb
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9dd7
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #d7875f
editorLineNumber.foreground #767676
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #d76a5f
editorMarkerNavigationInfo.background #6a89a7
editorMarkerNavigationWarning.background #adad4d
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #767676
editorSuggestWidget.selectedBackground #062f4a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #bcbcbc
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #62a1cb
foreground #cccccc
gitDecoration.addedResourceForeground #87af87
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #d75f5f
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #d75f5f
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #87afd7
gitDecoration.untrackedResourceForeground #8cbe8c
icon.foreground #cccccc
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #094771
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #87afd7
list.hoverBackground #2a2d2e
list.hoverForeground #cccccc
list.inactiveSelectionBackground #37373d
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #d75f5f
listFilterWidget.outline #00000000
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #094771
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #1c1c1c
minimap.errorHighlight #d75f5f
minimap.findMatchHighlight #515c6a8d
minimap.selectionHighlight #1d518870
minimap.warningHighlight #cca700
minimapGutter.addedBackground #65a965b1
minimapGutter.deletedBackground #d75f5fcb
minimapGutter.modifiedBackground #0c7d9dd7
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #171717
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #3794ff
progressBar.background #4aa1e8
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #2675c970
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #252526
sideBar.border #1d1d1d
sideBar.dropBackground #383b3d
sideBar.foreground #cccccc
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #bbbbbb
statusBar.background #2a2a2a
statusBar.border #2a2a2a
statusBar.debuggingBackground #3f141c70
statusBar.debuggingForeground #cbcbcb
statusBar.foreground #cbcbcb
statusBar.noFolderBackground #4f4f5674
statusBar.noFolderForeground #cbcbcb
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #5f87af
statusBarItem.remoteForeground #ffffff
tab.activeBackground #1e1e1e
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #252526
tab.inactiveBackground #2d2d2d
tab.inactiveForeground #ffffff80
terminal.ansiBlack #2c2c2c
terminal.ansiBlue #5f87af
terminal.ansiBrightBlack #767676
terminal.ansiBrightBlue #87afd7
terminal.ansiBrightCyan #87afaf
terminal.ansiBrightGreen #afd7af
terminal.ansiBrightMagenta #d7afd7
terminal.ansiBrightRed #d7875f
terminal.ansiBrightWhite #bcbcbc
terminal.ansiBrightYellow #d7d787
terminal.ansiCyan #5f8787
terminal.ansiGreen #87af87
terminal.ansiMagenta #af87af
terminal.ansiRed #d75f5f
terminal.ansiWhite #b4b4b4
terminal.ansiYellow #afaf87
terminal.border #80808059
terminal.foreground #9e9e9e
terminal.selectionBackground #ffffff40
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #252526
titleBar.activeForeground #cccccc
titleBar.border #1d1d1d
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #afafcb
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #bcbcbc —
variable.parameter.function.language.special.self.python #bcbcbc —
storage.modifier.lifetime.rust #bcbcbc —
support.function.std.rust #87afaf —
entity.name.lifetime.rust #bcbcbc —
variable.language.rust #afafcb —
support.constant.edge #87afd7 —
constant.other.character-class.regexp #afafcb —
keyword.operator.quantifier.regexp #d7875f —
punctuation.definition.string.begin,punctuation.definition.string.end #86b087 —
variable.parameter.function #bcbcbc —
comment markup.link #7f848e —
markup.changed.diff #bcbcbc —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #87afaf —
markup.inserted.diff #86b087 —
markup.deleted.diff #afafcb —
meta.function.c,meta.function.cpp #afafcb —
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 #bcbcbc —
punctuation.separator.key-value #bcbcbc —
keyword.operator.expression.import #87afaf —
support.constant.math #bcbcbc —
support.constant.property.math #d7875f —
variable.other.constant #bcbcbc —
storage.type.annotation.java, storage.type.object.array.java #bcbcbc —
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 #bcbcbc —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #bcbcbc —
keyword.operator.instanceof.java #87afd7 —
meta.definition.variable.name.java #afafcb —
keyword.operator.logical #af87ae —
keyword.operator.bitwise #af87ae —
keyword.operator.channel #af87ae —
support.constant.property-value.scss,support.constant.property-value.css #d7875f —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #af87ae —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #d7875f —
punctuation.separator.list.comma.css #bcbcbc —
support.constant.color.w3c-standard-color-name.css #d7875f —
support.type.vendored.property-name.css #af87ae —
support.module.node,support.type.object.module,support.module.node #bcbcbc —
entity.name.type.module #bcbcbc —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #afafcb —
support.constant.json #d7875f —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #87afd7 —
support.type.object.console #afafcb —
support.variable.property.process #d7875f —
entity.name.function,support.function.console #87afaf —
keyword.operator.misc.rust #bcbcbc —
keyword.operator.sigil.rust #87afd7 —
keyword.operator.delete #87afd7 —
support.type.object.dom #af87ae —
support.variable.dom,support.variable.property.dom #afafcb —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #af87ae —
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 #87afd7 —
punctuation.separator.delimiter #bcbcbc —
punctuation.separator.c,punctuation.separator.cpp #87afd7 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #af87ae —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #87afd7 —
variable.parameter.function.language.python #d7875f —
support.type.python #af87ae —
keyword.operator.logical.python #87afd7 —
variable.parameter.function.python #d7875f —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #bcbcbc —
meta.function-call.generic.python #87afaf —
constant.character.format.placeholder.other.python #d7875f —
keyword.operator.assignment.compound #87afd7 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #af87ae —
entity.name.namespace #bcbcbc —
variable.language #bcbcbc —
token.variable.parameter.java #bcbcbc —
import.storage.java #bcbcbc —
token.package.keyword #87afd7 —
entity.name.function, meta.require, support.function.any-method, variable.function #87afaf —
entity.name.type.namespace #bcbcbc —
support.class, entity.name.type.class #bcbcbc —
entity.name.class.identifier.namespace.type #bcbcbc —
entity.name.class, variable.other.class.js, variable.other.class.ts #bcbcbc —
variable.other.class.php #afafcb —
control.elements, keyword.operator.less #d7875f —
keyword.other.special-method #87afaf —
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 #87afd7 —
token.storage.type.java #bcbcbc —
support.type.property-name #bcbcbc —
support.constant.property-value #bcbcbc —
support.constant.font-name #d7875f —
entity.other.inherited-class #bcbcbc —
constant.other.symbol #af87ae —
punctuation.definition.constant #d7875f —
entity.other.attribute-name #d7875f —
entity.other.attribute-name.id #87afaf
entity.other.attribute-name.class.css #d7875f
markup.heading punctuation.definition.heading, entity.name.section #87afaf —
keyword.other.unit #afafcb —
markup.bold,todo.bold #d7875f —
punctuation.definition.bold #bcbcbc —
markup.italic, punctuation.definition.italic,todo.emphasis #87afd7 —
entity.name.section.markdown #afafcb —
punctuation.definition.heading.markdown #afafcb —
punctuation.definition.list.begin.markdown #afafcb —
markup.heading.setext #bcbcbc —
punctuation.definition.bold.markdown #d7875f —
markup.inline.raw.markdown #86b087 —
markup.inline.raw.string.markdown #86b087 —
punctuation.definition.list.markdown #afafcb —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #afafcb —
beginning.punctuation.definition.list.markdown #afafcb —
punctuation.definition.metadata.markdown #afafcb —
markup.underline.link.markdown,markup.underline.link.image.markdown #87afd7 —
string.other.link.title.markdown,string.other.link.description.markdown #87afaf —
constant.character.escape #af87ae —
punctuation.section.embedded, variable.interpolation #afafcb —
punctuation.section.embedded.begin,punctuation.section.embedded.end #87afd7 —
invalid.illegal.bad-ampersand.html #bcbcbc —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #afafcb —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #afafcb —
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 #86b087 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #af87ae —
support.type.property-name.json #afafcb —
support.type.property-name.json punctuation #afafcb —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #87afd7 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #87afd7 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #bcbcbc —
keyword.operator.error-control.php #87afd7 —
keyword.operator.type.php #87afd7 —
punctuation.section.array.begin.php #bcbcbc —
punctuation.section.array.end.php #bcbcbc —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #bcbcbc —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #87afaf —
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 #bcbcbc —
support.constant.core.rust #d7875f —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #d7875f —
entity.name.goto-label.php,support.other.php #87afaf —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #af87ae —
keyword.operator.regexp.php #87afd7 —
keyword.operator.comparison.php #af87ae —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #87afd7 —
meta.function.decorator.python #87afaf —
support.token.decorator.python,meta.function.decorator.identifier.python #af87ae —
function.parameter #bcbcbc —
function.parameter.ruby, function.parameter.cs #bcbcbc —
constant.language.symbol.ruby #af87ae —
inline-color-decoration rgb-value #d7875f —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #bcbcbc —
block.scope.end,block.scope.begin #bcbcbc —
entity.name.variable.local.cs #afafcb —
token.error-token #f44747 —
token.debug-token #87afd7 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #87afd7 —
meta.template.expression #bcbcbc —
keyword.operator.module #87afd7 —
support.type.type.flowtype #87afaf —
support.type.primitive #bcbcbc —
meta.property.object #afafcb —
variable.parameter.function.js #afafcb —
keyword.other.template.begin #86b087 —
keyword.other.template.end #86b087 —
keyword.other.substitution.begin #86b087 —
keyword.other.substitution.end #86b087 —
keyword.operator.assignment #af87ae —
keyword.operator.assignment.go #bcbcbc —
keyword.operator.arithmetic.go, keyword.operator.address.go #87afd7 —
entity.name.package.go #bcbcbc —
support.type.prelude.elm #af87ae —
support.constant.elm #d7875f —
punctuation.quasi.element #87afd7 —
constant.character.entity #afafcb —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #af87ae —
entity.global.clojure #bcbcbc —
meta.symbol.clojure #afafcb —
constant.keyword.clojure #af87ae —
meta.arguments.coffee, variable.parameter.function.coffee #afafcb —
meta.scope.prerequisites.makefile #afafcb —
storage.modifier.import.groovy #bcbcbc —
meta.method.groovy #87afaf —
meta.definition.variable.name.groovy #afafcb —
meta.definition.class.inherited.classes.groovy #86b087 —
support.variable.semantic.hlsl #bcbcbc —
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 #87afd7 —
text.variable, text.bracketed #afafcb —
support.type.swift, support.type.vb.asp #bcbcbc —
entity.name.function.xi #bcbcbc —
entity.name.class.xi #af87ae —
constant.character.character-class.regexp.xi #afafcb —
constant.regexp.xi #87afd7 —
keyword.control.xi #af87ae —
beginning.punctuation.definition.quote.markdown.xi #86b087 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #87afaf —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #7f848e —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #bcbcbc —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #afafcb —
meta.brace.square #bcbcbc —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #7f848e —
punctuation.definition.block.sequence.item.yaml #bcbcbc —
constant.language.symbol.elixir #af87ae —
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*
habamix | 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 } !` ;
}