Skip to main content
Home Theme VS Code Stack Manibu Overflow Theme based stack overflow colors. But, its better!
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 #2c2c2c activityBar.foreground #ffffff activityBar.inactiveForeground #ffffff66 activityBarBadge.background #007acc activityBarBadge.foreground #ffffff badge.background #c4c4c4 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 #2f3337 — variable.other.generic-type.haskell #015493 — storage.type.haskell #b75301 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Stack Manibu Overflow — Stack Manibu Overflow
badge.foreground
#333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #ffffff
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #616161cc
button.background #007acc
button.foreground #ffffff
button.hoverBackground #0062a3
button.secondaryBackground #5f6a79
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4c5561
checkbox.background #ffffff
checkbox.border #00000000
checkbox.foreground #616161
debugExceptionWidget.background #f3f3f3
debugExceptionWidget.border #d5d5d5
debugToolBar.background #f3f3f3
debugToolBar.border #d5d5d5
diffEditor.border #d7d7d7
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #616161
editor.background #f6f6f6
editor.findMatchBackground #a8ac94
editor.findMatchBorder #979b83
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #b4b4b44d
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #add6ff4d
editor.foreground #000000
editor.hoverHighlightBackground #add6ff26
editor.inactiveSelectionBackground #e5ebf1
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #eeeeee
editor.rangeHighlightBackground #fdff0033
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #add6ff
editor.selectionHighlightBackground #add6ff80
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #57575740
editor.wordHighlightStrongBackground #0e639c40
editorBracketMatch.background #0064001a
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #000000
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #e51400
editorGroup.border #e7e7e7
editorGroup.emptyBackground #f6f6f6
editorGroupHeader.tabsBackground #f3f3f3
editorGutter.addedBackground #81b88b
editorGutter.background #fafafa
editorGutter.commentRangeForeground #424242
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #424242
editorGutter.modifiedBackground #66afe0
editorHoverWidget.background #f3f3f3
editorHoverWidget.border #c8c8c8
editorHoverWidget.foreground #616161
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #d3d3d3
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #0b216f
editorLineNumber.foreground #237893
editorLink.activeForeground #0000ff
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #e51400
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #e9a700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #d3d3d3
editorSuggestWidget.background #f3f3f3
editorSuggestWidget.border #c8c8c8
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #0066bf
editorSuggestWidget.selectedBackground #d6ebff
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #33333333
editorWidget.background #f3f3f3
editorWidget.foreground #616161
editorWidget.resizeBorder #c7c7c7
focusBorder #0090f1
foreground #616161
gitDecoration.addedResourceForeground #587c0c
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #ad0707
gitDecoration.ignoredResourceForeground #8e8e90
gitDecoration.modifiedResourceForeground #895503
gitDecoration.stageDeletedResourceForeground #ad0707
gitDecoration.stageModifiedResourceForeground #895503
gitDecoration.submoduleResourceForeground #1258a7
gitDecoration.untrackedResourceForeground #007100
icon.foreground #616161
input.background #ffffff
input.border #00000000
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #0090f133
inputOption.activeBorder #007acc00
inputOption.activeForeground #000000
list.activeSelectionBackground #0060c0
list.activeSelectionForeground #ffffff
list.dropBackground #d6ebff
list.focusBackground #d6ebff
list.focusForeground #333
list.focusHighlightForeground #d6ebff
list.highlightForeground #0060c0
list.hoverBackground #e8e8e8
list.hoverForeground #616161
list.inactiveSelectionBackground #e4e6f1
list.inactiveSelectionForeground #616161
listFilterWidget.background #efc1ad
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #ffffff
menu.border #00000085
menu.foreground #616161
menu.selectionBackground #0060c0
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #888888
menubar.selectionBackground #0000001a
menubar.selectionForeground #333333
merge.commonContentBackground #E5E5E5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #f6f6f6
minimap.errorHighlight #e51400
minimap.findMatchHighlight #a8ac94
minimap.selectionHighlight #add6ff
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #66afe0
notificationCenter.border #d5d5d5
notificationCenterHeader.background #e7e7e7
notificationCenterHeader.foreground #616161
notifications.background #f3f3f3
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #e51400
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #007acc
peekViewEditor.background #f2f8fc
peekViewEditor.matchHighlightBackground #f5d802de
peekViewEditor.matchHighlightBorder #dbc417
peekViewEditorGutter.background #f2f8fc
peekViewResult.background #f3f3f3
peekViewResult.fileForeground #1e1e1e
peekViewResult.lineForeground #646465
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #333333
pickerGroup.border #cccedb
pickerGroup.foreground #0066bf
progressBar.background #0e70c0
scrollbar.shadow #dddddd
scrollbarSlider.activeBackground #00000099
scrollbarSlider.background #64646466
scrollbarSlider.hoverBackground #646464b3
selection.background #b0daff
settings.focusedRowBackground #ffffff07
settings.headerForeground #616161
sideBar.background #fbfbfb
sideBar.dropBackground #d6ebff
sideBar.foreground #616161
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #61616130
sideBarSectionHeader.foreground #616161
sideBarTitle.foreground #6f6f6f
statusBar.background #ffffff
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #2f3337
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #333333
tab.border #f3f3f3
tab.inactiveBackground #ececec
tab.inactiveForeground #333333b3
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce14
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #00000040
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #006ab1
titleBar.activeBackground #dddddd
titleBar.activeForeground #333333
titleBar.border #00000000
titleBar.inactiveBackground #dddddd99
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #a9a9a9
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #2f3337
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #000000 —
variable.parameter.function.language.special.self.python #2f3337 —
storage.modifier.lifetime.rust #000000 —
support.function.std.rust #b75301 —
entity.name.lifetime.rust #2f3337 —
variable.language.rust #2f3337 —
support.constant.edge #015493 —
constant.other.character-class.regexp #2f3337 —
keyword.operator.quantifier.regexp #b75301 —
punctuation.definition.string.begin,punctuation.definition.string.end #567a0d —
variable.parameter.function #000000 —
comment markup.link #666f78 —
markup.changed.diff #2f3337 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #b75301 —
markup.inserted.diff #567a0d —
markup.deleted.diff #2f3337 —
meta.function.c,meta.function.cpp #2f3337 —
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 #000000 —
punctuation.separator.key-value #000000 —
keyword.operator.expression.import #b75301 —
support.constant.math #2f3337 —
support.constant.property.math #b75301 —
variable.other.constant #2f3337 —
storage.type.annotation.java, storage.type.object.array.java #2f3337 —
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 #000000 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #2f3337 —
keyword.operator.instanceof.java #015493 —
meta.definition.variable.name.java #2f3337 —
keyword.operator.logical #2f3337 —
keyword.operator.bitwise #2f3337 —
keyword.operator.channel #2f3337 —
support.constant.property-value.scss,support.constant.property-value.css #b75301 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #2f3337 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #b75301 —
punctuation.separator.list.comma.css #000000 —
support.constant.color.w3c-standard-color-name.css #b75301 —
support.type.vendored.property-name.css #2f3337 —
support.module.node,support.type.object.module,support.module.node #2f3337 —
entity.name.type.module #2f3337 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #2f3337 —
support.constant.json #b75301 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #015493 —
support.type.object.console #2f3337 —
support.variable.property.process #b75301 —
entity.name.function,support.function.console #b75301 —
keyword.operator.misc.rust #000000 —
keyword.operator.sigil.rust #015493 —
keyword.operator.delete #015493 —
support.type.object.dom #2f3337 —
support.variable.dom,support.variable.property.dom #2f3337 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #2f3337 —
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 #015493 —
punctuation.separator.delimiter #000000 —
punctuation.separator.c,punctuation.separator.cpp #015493 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #2f3337 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #015493 —
variable.parameter.function.language.python #b75301 —
support.type.python #2f3337 —
keyword.operator.logical.python #015493 —
variable.parameter.function.python #b75301 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #000000 —
meta.function-call.generic.python #b75301 —
constant.character.format.placeholder.other.python #b75301 —
keyword.operator.assignment.compound #015493 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #2f3337 —
entity.name.namespace #2f3337 —
variable.language #2f3337 —
token.variable.parameter.java #000000 —
import.storage.java #2f3337 —
token.package.keyword #015493 —
entity.name.function, meta.require, support.function.any-method, variable.function #b75301 —
entity.name.type.namespace #2f3337 —
support.class, entity.name.type.class #2f3337 —
entity.name.class.identifier.namespace.type #2f3337 —
entity.name.class, variable.other.class.js, variable.other.class.ts #2f3337 —
variable.other.class.php #2f3337 —
control.elements, keyword.operator.less #b75301 —
keyword.other.special-method #b75301 —
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 #015493 —
token.storage.type.java #2f3337 —
support.type.property-name #000000 —
support.constant.property-value #000000 —
support.constant.font-name #b75301 —
entity.other.inherited-class #2f3337 —
constant.other.symbol #2f3337 —
punctuation.definition.constant #b75301 —
entity.other.attribute-name #b75301 —
entity.other.attribute-name.id #b75301 normal
entity.other.attribute-name.class.css #b75301 normal
markup.heading punctuation.definition.heading, entity.name.section #b75301 —
keyword.other.unit #2f3337 —
markup.bold,todo.bold #b75301 —
punctuation.definition.bold #2f3337 —
markup.italic, punctuation.definition.italic,todo.emphasis #015493 —
entity.name.section.markdown #2f3337 —
punctuation.definition.heading.markdown #2f3337 —
punctuation.definition.list.begin.markdown #2f3337 —
markup.heading.setext #000000 —
punctuation.definition.bold.markdown #b75301 —
markup.inline.raw.markdown #567a0d —
markup.inline.raw.string.markdown #567a0d —
punctuation.definition.list.markdown #2f3337 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #2f3337 —
beginning.punctuation.definition.list.markdown #2f3337 —
punctuation.definition.metadata.markdown #2f3337 —
markup.underline.link.markdown,markup.underline.link.image.markdown #015493 —
string.other.link.title.markdown,string.other.link.description.markdown #b75301 —
constant.character.escape #2f3337 —
punctuation.section.embedded, variable.interpolation #2f3337 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #015493 —
invalid.illegal.bad-ampersand.html #000000 —
invalid.deprecated #b75301 —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #2f3337 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #2f3337 —
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 #567a0d —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #2f3337 —
support.type.property-name.json #2f3337 —
support.type.property-name.json punctuation #2f3337 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #015493 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #015493 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #2f3337 —
keyword.operator.error-control.php #015493 —
keyword.operator.type.php #015493 —
punctuation.section.array.begin.php #000000 —
punctuation.section.array.end.php #000000 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #2f3337 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #b75301 —
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 #000000 —
support.constant.core.rust #b75301 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #b75301 —
entity.name.goto-label.php,support.other.php #b75301 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #2f3337 —
keyword.operator.regexp.php #015493 —
keyword.operator.comparison.php #2f3337 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #015493 —
meta.function.decorator.python #b75301 —
support.token.decorator.python,meta.function.decorator.identifier.python #2f3337 —
function.parameter #000000 —
function.parameter.ruby, function.parameter.cs #000000 —
constant.language.symbol.ruby #2f3337 —
inline-color-decoration rgb-value #b75301 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #2f3337 —
block.scope.end,block.scope.begin #000000 —
entity.name.variable.local.cs #2f3337 —
token.error-token #f44747 —
token.debug-token #015493 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #015493 —
meta.template.expression #000000 —
keyword.operator.module #015493 —
support.type.type.flowtype #b75301 —
support.type.primitive #2f3337 —
meta.property.object #2f3337 —
variable.parameter.function.js #2f3337 —
keyword.other.template.begin #567a0d —
keyword.other.template.end #567a0d —
keyword.other.substitution.begin #567a0d —
keyword.other.substitution.end #567a0d —
keyword.operator.assignment #2f3337 —
keyword.operator.assignment.go #2f3337 —
keyword.operator.arithmetic.go, keyword.operator.address.go #015493 —
entity.name.package.go #2f3337 —
support.type.prelude.elm #2f3337 —
support.constant.elm #b75301 —
punctuation.quasi.element #015493 —
constant.character.entity #2f3337 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #2f3337 —
entity.global.clojure #2f3337 —
meta.symbol.clojure #2f3337 —
constant.keyword.clojure #2f3337 —
meta.arguments.coffee, variable.parameter.function.coffee #2f3337 —
meta.scope.prerequisites.makefile #2f3337 —
storage.modifier.import.groovy #2f3337 —
meta.method.groovy #b75301 —
meta.definition.variable.name.groovy #2f3337 —
meta.definition.class.inherited.classes.groovy #567a0d —
support.variable.semantic.hlsl #2f3337 —
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 #015493 —
text.variable, text.bracketed #2f3337 —
support.type.swift, support.type.vb.asp #2f3337 —
entity.name.function.xi #2f3337 —
entity.name.class.xi #2f3337 —
constant.character.character-class.regexp.xi #2f3337 —
constant.regexp.xi #015493 —
keyword.control.xi #2f3337 —
beginning.punctuation.definition.quote.markdown.xi #567a0d —
beginning.punctuation.definition.list.markdown.xi #666f78 —
constant.character.xi #b75301 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #666f78 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #2f3337 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #2f3337 —
meta.brace.square #000000 —
comment, punctuation.definition.comment #666f78
markup.quote.markdown #666f78 —
punctuation.definition.block.sequence.item.yaml #000000 —
constant.language.symbol.elixir #2f3337 —
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 #666f78
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
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
fetchUser
31
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 } !` ;
}
Stack Manibu Overflow | Coding Theme