Skip to main content
Home Theme VS Code polar0-github-theme Theme for VSCode simulating GitHub syntax highlightinh
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 #141414 activityBar.foreground #a06cd5 activityBar.inactiveForeground #ffffffa9 activityBarBadge.background #a06cd5 activityBarBadge.foreground #ffffff badge.background #d6bfed8b 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 #ffffff — variable.other.generic-type.haskell #ee8277 — storage.type.haskell #89befa — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
polar0-github-theme — polar0 theme
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #ffffff
breadcrumb.background #191919
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #cccccccc
button.background #a06cd5
button.foreground #ffffff
button.hoverBackground #8247be
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #141414
debugExceptionWidget.border #141414
debugToolBar.background #141414
debugToolBar.border #141414
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #141414
editor.findMatchBackground #8247becd
editor.findMatchBorder #d6bfed7e
editor.findMatchHighlightBackground #c08df599
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #a06cd54c
editor.foreground #d4d4d4
editor.hoverHighlightBackground #a06cd54c
editor.inactiveSelectionBackground #5f4d716a
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #8247be6a
editor.selectionHighlightBackground #8247be8f
editor.selectionHighlightBorder #8247beed
editor.wordHighlightBackground #5e58648d
editor.wordHighlightBorder #5e58648d
editor.wordHighlightStrongBackground #a06cd58d
editorBracketMatch.background #ffb8b844
editorBracketMatch.border #FFFFFF24
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #c5c4c7b3
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #141414
editorGroupHeader.border #be3b3b00
editorGroupHeader.tabsBackground #141414
editorGroupHeader.tabsBorder #141414
editorGutter.addedBackground #587c0c
editorGutter.background #141414
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #858585
editorLink.activeForeground #40BBD4
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #ffffff
editorSuggestWidget.highlightForeground #a06cd5
editorSuggestWidget.selectedBackground #d6bfed36
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #191919
editorWidget.foreground #cccccc
editorWidget.resizeBorder #d6bfedaf
focusBorder #a06cd5
foreground #a06cd5
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 #a06cd5
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #d6bfed
inputOption.activeBorder #d6bfed
inputOption.activeForeground #ffffff
list.activeSelectionBackground #a06cd5
list.activeSelectionForeground #ffffff
list.dropBackground #38353b
list.focusBackground #8247bea9
list.focusForeground #ffffff
list.highlightForeground #a06cd5
list.hoverBackground #a06cd5a9
list.hoverForeground #cccccc
list.inactiveSelectionBackground #48444d
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #8247be
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #a06cd5
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 #141414
minimap.errorHighlight #f48771
minimap.findMatchHighlight #8247becd
minimap.selectionHighlight #8247be6a
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #252526
notificationCenterHeader.background #252526
notificationCenterHeader.foreground #cccccc
notifications.background #141414
notifications.border #252526
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #d6bfed
notificationsWarningIcon.foreground #cca700
notificationToast.border #141414
panel.background #141414
panel.border #14141464
panelSection.border #80808059
panelTitle.activeBorder #d6bfed
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #a06cd5
peekViewEditor.background #101010
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #8247be42
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #8247bea1
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f4600
pickerGroup.foreground #a06cd5
progressBar.background #a06cd5
scrollbar.shadow #000000
scrollbarSlider.activeBackground #d6bfed97
scrollbarSlider.background #d6bfed36
scrollbarSlider.hoverBackground #d6bfed7a
selection.background #8247be
settings.focusedRowBackground #ffffff07
settings.headerForeground #a06cd5
sideBar.background #191919
sideBar.border #191919
sideBar.dropBackground #38353b
sideBar.foreground #c0c0c0
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #bbbbbb
statusBar.background #8247be
statusBar.border #8247be
statusBar.debuggingBackground #ee9048cf
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #8247be
statusBarItem.remoteForeground #ffffff
tab.activeBackground #8247be89
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #141414
tab.hoverBackground #8247be66
tab.hoverForeground #ffffff
tab.inactiveBackground #141414
tab.inactiveForeground #ffffff80
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 #80808059
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #a06cd5d1
terminalCursor.foreground #ffffff
textLink.foreground #af7de2
titleBar.activeBackground #141414
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #5b595c
walkThrough.embeddedEditorBackground #00000050
widget.shadow #14141442 #ffffff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #d4d4d4 —
variable.parameter.function.language.special.self.python #f2aa65 —
storage.modifier.lifetime.rust #d4d4d4 —
support.function.std.rust #cbaaf9 —
entity.name.lifetime.rust #f2aa65 —
variable.language.rust #ffffff —
support.constant.edge #ee8277 —
constant.other.character-class.regexp #ffffff —
keyword.operator.quantifier.regexp #89befa —
punctuation.definition.string.begin,punctuation.definition.string.end #98c379 —
variable.parameter.function #d4d4d4 —
comment markup.link #7f848e —
markup.changed.diff #f2aa65 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #cbaaf9 —
markup.inserted.diff #98c379 —
markup.deleted.diff #ffffff —
meta.function.c,meta.function.cpp #ffffff —
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 #d4d4d4 —
punctuation.separator.key-value #d4d4d4 —
keyword.operator.expression.import #cbaaf9 —
support.constant.math #f2aa65 —
support.constant.property.math #89befa —
variable.other.constant #f2aa65 —
storage.type.annotation.java, storage.type.object.array.java #f2aa65 —
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 #d4d4d4 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #f2aa65 —
keyword.operator.instanceof.java #ee8277 —
meta.definition.variable.name.java #ffffff —
keyword.operator.logical #89befa —
keyword.operator.bitwise #89befa —
keyword.operator.channel #89befa —
support.constant.property-value.scss,support.constant.property-value.css #89befa —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #89befa —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #89befa —
punctuation.separator.list.comma.css #d4d4d4 —
support.constant.color.w3c-standard-color-name.css #89befa —
support.type.vendored.property-name.css #89befa —
support.module.node,support.type.object.module,support.module.node #f2aa65 —
entity.name.type.module #f2aa65 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ffffff —
support.constant.json #89befa —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #ee8277 —
support.type.object.console #ffffff —
support.variable.property.process #89befa —
entity.name.function,support.function.console #cbaaf9 —
keyword.operator.misc.rust #d4d4d4 —
keyword.operator.sigil.rust #ee8277 —
keyword.operator.delete #ee8277 —
support.type.object.dom #89befa —
support.variable.dom,support.variable.property.dom #ffffff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #89befa —
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 #ee8277 —
punctuation.separator.delimiter #d4d4d4 —
punctuation.separator.c,punctuation.separator.cpp #ee8277 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #89befa —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #ee8277 —
variable.parameter.function.language.python #89befa —
support.type.python #89befa —
keyword.operator.logical.python #ee8277 —
variable.parameter.function.python #89befa —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #d4d4d4 —
meta.function-call.generic.python #cbaaf9 —
constant.character.format.placeholder.other.python #89befa —
keyword.operator.assignment.compound #ee8277 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #89befa —
entity.name.namespace #f2aa65 —
variable.language #f2aa65 —
token.variable.parameter.java #d4d4d4 —
import.storage.java #f2aa65 —
token.package.keyword #ee8277 —
entity.name.function, meta.require, support.function.any-method, variable.function #cbaaf9 —
entity.name.type.namespace #f2aa65 —
support.class, entity.name.type.class #f2aa65 —
entity.name.class.identifier.namespace.type #f2aa65 —
entity.name.class, variable.other.class.js, variable.other.class.ts #f2aa65 —
variable.other.class.php #ffffff —
control.elements, keyword.operator.less #89befa —
keyword.other.special-method #cbaaf9 —
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 #ee8277 —
token.storage.type.java #f2aa65 —
support.type.property-name #d4d4d4 —
support.constant.property-value #d4d4d4 —
support.constant.font-name #89befa —
entity.other.inherited-class #f2aa65 —
constant.other.symbol #89befa —
punctuation.definition.constant #89befa —
entity.other.attribute-name #89befa —
entity.other.attribute-name.id #cbaaf9 normal
entity.other.attribute-name.class.css #89befa normal
markup.heading punctuation.definition.heading, entity.name.section #cbaaf9 —
keyword.other.unit #ffffff —
markup.bold,todo.bold #89befa —
punctuation.definition.bold #f2aa65 —
markup.italic, punctuation.definition.italic,todo.emphasis #ee8277 —
entity.name.section.markdown #ffffff —
punctuation.definition.heading.markdown #ffffff —
punctuation.definition.list.begin.markdown #ffffff —
markup.heading.setext #d4d4d4 —
punctuation.definition.bold.markdown #89befa —
markup.inline.raw.markdown #98c379 —
markup.inline.raw.string.markdown #98c379 —
punctuation.definition.list.markdown #ffffff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ffffff —
beginning.punctuation.definition.list.markdown #ffffff —
punctuation.definition.metadata.markdown #ffffff —
markup.underline.link.markdown,markup.underline.link.image.markdown #ee8277 —
string.other.link.title.markdown,string.other.link.description.markdown #cbaaf9 —
constant.character.escape #89befa —
punctuation.section.embedded, variable.interpolation #ffffff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #ee8277 —
invalid.illegal.bad-ampersand.html #d4d4d4 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ffffff —
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 #98c379 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #89befa —
support.type.property-name.json #ffffff —
support.type.property-name.json punctuation #ffffff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #ee8277 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #ee8277 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #f2aa65 —
keyword.operator.error-control.php #ee8277 —
keyword.operator.type.php #ee8277 —
punctuation.section.array.begin.php #d4d4d4 —
punctuation.section.array.end.php #d4d4d4 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #f2aa65 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #cbaaf9 —
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 #d4d4d4 —
support.constant.core.rust #89befa —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #89befa —
entity.name.goto-label.php,support.other.php #cbaaf9 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #89befa —
keyword.operator.regexp.php #ee8277 —
keyword.operator.comparison.php #89befa —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #ee8277 —
meta.function.decorator.python #cbaaf9 —
support.token.decorator.python,meta.function.decorator.identifier.python #89befa —
function.parameter #d4d4d4 —
function.parameter.ruby, function.parameter.cs #d4d4d4 —
constant.language.symbol.ruby #89befa —
inline-color-decoration rgb-value #89befa —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #f2aa65 —
block.scope.end,block.scope.begin #d4d4d4 —
entity.name.variable.local.cs #ffffff —
token.error-token #f44747 —
token.debug-token #ee8277 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #ee8277 —
meta.template.expression #d4d4d4 —
keyword.operator.module #ee8277 —
support.type.type.flowtype #cbaaf9 —
support.type.primitive #f2aa65 —
meta.property.object #ffffff —
variable.parameter.function.js #ffffff —
keyword.other.template.begin #98c379 —
keyword.other.template.end #98c379 —
keyword.other.substitution.begin #98c379 —
keyword.other.substitution.end #98c379 —
keyword.operator.assignment #89befa —
keyword.operator.assignment.go #f2aa65 —
keyword.operator.arithmetic.go, keyword.operator.address.go #ee8277 —
entity.name.package.go #f2aa65 —
support.type.prelude.elm #89befa —
support.constant.elm #89befa —
punctuation.quasi.element #ee8277 —
constant.character.entity #ffffff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #89befa —
entity.global.clojure #f2aa65 —
meta.symbol.clojure #ffffff —
constant.keyword.clojure #89befa —
meta.arguments.coffee, variable.parameter.function.coffee #ffffff —
meta.scope.prerequisites.makefile #ffffff —
storage.modifier.import.groovy #f2aa65 —
meta.method.groovy #cbaaf9 —
meta.definition.variable.name.groovy #ffffff —
meta.definition.class.inherited.classes.groovy #98c379 —
support.variable.semantic.hlsl #f2aa65 —
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 #ee8277 —
text.variable, text.bracketed #ffffff —
support.type.swift, support.type.vb.asp #f2aa65 —
entity.name.function.xi #f2aa65 —
entity.name.class.xi #89befa —
constant.character.character-class.regexp.xi #ffffff —
constant.regexp.xi #ee8277 —
keyword.control.xi #89befa —
beginning.punctuation.definition.quote.markdown.xi #98c379 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #cbaaf9 —
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 #f2aa65 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ffffff —
meta.brace.square #d4d4d4 —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #7f848e —
punctuation.definition.block.sequence.item.yaml #d4d4d4 —
constant.language.symbol.elixir #89befa —
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*
polar0-github-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 } !` ;
}