Skip to main content
Home Theme VS Code Polar Black A beautiful, comprehensive icon theme with custom file/folder icons and product UI icons for Visual Studio Code
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.activeBorder #D04040 activityBar.background #000000 activityBar.border #00000099 activityBar.foreground #E8D0D0 activityBar.inactiveForeground #E8D0D066 activityBarBadge.background #D04040 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #E8D0D0 — string #E86050 — punctuation, constant.other.symbol #ffffff — constant.character.escape, text.html constant.character.entity.named #E8D0D0 — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Polar Black — Polar Black Red Polar Black | Coding Theme
activityBarBadge.foreground
#000000
activityBarTop.activeBorder #D04040
activityBarTop.background #000000
activityBarTop.foreground #E8D0D0
activityBarTop.inactiveForeground #E8D0D066
activityErrorBadge.background #D04040
activityErrorBadge.foreground #000000
activityWarningBadge.background #D04040
activityWarningBadge.foreground #000000
badge.background #1A0D0D66
badge.foreground #E8D0D0
breadcrumb.activeSelectionForeground #E8D0D0
breadcrumb.background #000000
breadcrumb.focusForeground #E8D0D0
breadcrumb.foreground #6A4848
breadcrumbPicker.background #000000
button.background #D04040
button.foreground #000000
button.hoverBackground #D04040cc
button.secondaryBackground #1A0D0D
button.secondaryForeground #E8D0D0
button.separator #00000033
chat.avatarForeground #E8D0D0
chat.checkpointSeparator #1A0D0D
chat.requestBorder #D040400f
chat.requestBubbleBackground #0A0505
chat.requestBubbleHoverBackground #0A0505
chat.requestCodeBorder #1A0D0D
chat.slashCommandBackground #D0404000
chat.slashCommandForeground #E8D0D0
commandCenter.activeBorder #D04040
commandCenter.activeForeground #E8D0D0
commandCenter.foreground #E8D0D099
contrastActiveBorder #00000000
contrastBorder #00000000
debugConsole.errorForeground #E8D0D0
debugConsole.infoForeground #E8D0D0
debugConsole.warningForeground #E8D0D0
debugToolBar.background #000000
descriptionForeground #E8D0D0cc
diffEditor.insertedLineBackground #D040400f
diffEditor.insertedTextBackground #D0404012
diffEditor.removedLineBackground #D0404014
diffEditor.removedTextBackground #D0404014
disabledForeground #5A3838
dropdown.background #000000
dropdown.border #D0404010
editor.background #000000
editor.findMatchBackground #D0404026
editor.findMatchBorder #D04040
editor.findMatchHighlightBackground #D0404026
editor.findMatchHighlightBorder #D040404d
editor.findMatchHighlightForeground #E8D0D0
editor.findRangeHighlightBackground #D040401a
editor.foreground #E8D0D0
editor.lineHighlightBackground #1A0D0D00
editor.lineHighlightBorder #1A0D0D66
editor.selectionBackground #4A282880
editor.selectionForeground #E8D0D0
editor.selectionHighlightBackground #D0404033
editor.wordHighlightBackground #D040401a
editor.wordHighlightStrongBackground #D040401a
editorBracketMatch.background #000000
editorBracketMatch.border #D0404080
editorCodeLens.foreground #5A3838
editorCursor.background #D04040
editorCursor.foreground #D04040
editorError.foreground #E8D0D0b3
editorGroup.border #D040400f
editorGroupHeader.tabsBackground #000000
editorGutter.addedBackground #D0404099
editorGutter.addedSecondaryBackground #D0404099
editorGutter.deletedBackground #D0404099
editorGutter.deletedSecondaryBackground #D0404099
editorGutter.modifiedBackground #D0404099
editorGutter.modifiedSecondaryBackground #D0404099
editorHoverWidget.background #000000
editorHoverWidget.border #D0404010
editorIndentGuide.activeBackground #1A0D0D
editorIndentGuide.background #1A0D0Db3
editorInfo.foreground #E8D0D0b3
editorLineNumber.activeForeground #6A4848
editorLineNumber.foreground #2A1818
editorLink.activeForeground #E8D0D0
editorMarkerNavigation.background #D040400d
editorOverviewRuler.border #000000
editorOverviewRuler.errorForeground #E8D0D099
editorOverviewRuler.findMatchForeground #E8D0D0
editorOverviewRuler.infoForeground #E8D0D099
editorOverviewRuler.warningForeground #E8D0D099
editorRuler.foreground #1A0D0D
editorStickyScrollHover.background #4A28284d
editorSuggestWidget.background #000000
editorSuggestWidget.border #D0404010
editorSuggestWidget.foreground #E8D0D0
editorSuggestWidget.highlightForeground #E8D0D0
editorSuggestWidget.selectedBackground #1A0D0D66
editorWarning.foreground #E8D0D0b3
editorWhitespace.foreground #2A1818
editorWidget.background #000000
editorWidget.border #D04040
editorWidget.resizeBorder #D04040
extensionBadge.remoteForeground #E8D0D0
extensionButton.background #D0404014
extensionButton.foreground #E8D0D0
extensionButton.hoverBackground #D0404033
extensionButton.prominentBackground #D0404014
extensionButton.prominentForeground #E8D0D0
extensionButton.prominentHoverBackground #D0404033
extensionButton.separator #D0404033
extensionIcon.preReleaseForeground #E8D0D01a
extensionIcon.verifiedForeground #E8D0D0
focusBorder #D0404000
foreground #E8D0D0
gitDecoration.conflictingResourceForeground #E8D0D0e6
gitDecoration.deletedResourceForeground #E8D0D0e6
gitDecoration.ignoredResourceForeground #6A484880
gitDecoration.modifiedResourceForeground #E8D0D0e6
gitDecoration.untrackedResourceForeground #E8D0D0e6
icon.foreground #E8D0D0b3
input.background #0A0505
input.border #D0404010
input.foreground #E8D0D0
input.placeholderForeground #E8D0D099
inputOption.activeBackground #D040404d
inputOption.activeBorder #D040404d
inputValidation.errorBorder #D04040
inputValidation.infoBorder #D04040
inputValidation.warningBorder #D04040
keybindingLabel.border #000000
keybindingLabel.bottomBorder #000000
list.activeSelectionBackground #000000
list.activeSelectionForeground #E8D0D0
list.activeSelectionIconForeground #E8D0D0
list.dropBackground #D040401a
list.dropBetweenBackground #D040401a
list.focusBackground #D0404026
list.focusForeground #E8D0D0
list.highlightForeground #E8D0D0
list.hoverBackground #000000
list.hoverForeground #E8D0D0
list.inactiveSelectionBackground #1A0D0D66
list.inactiveSelectionForeground #E8D0D0
list.inactiveSelectionIconForeground #E8D0D0
listFilterWidget.background #1A0D0D66
listFilterWidget.noMatchesOutline #1A0D0D66
listFilterWidget.outline #1A0D0D66
menu.background #000000
menu.foreground #E8D0D0
menu.selectionBackground #1A0D0D66
menu.selectionBorder #1A0D0D66
menu.selectionForeground #E8D0D0
menu.separatorBackground #D04040
menubar.selectionBackground #1A0D0D66
menubar.selectionBorder #1A0D0D66
menubar.selectionForeground #E8D0D0
merge.border #00000000
merge.currentHeaderBackground #D040401a
merge.incomingHeaderBackground #D040401a
notebook.focusedCellBorder #D04040
notebook.inactiveFocusedCellBorder #D0404080
notificationLink.foreground #E8D0D0
notifications.background #000000
notifications.foreground #E8D0D0
notificationsWarningIcon.foreground #E8D0D0
notificationToast.border #D040400f
panel.background #000000
panel.border #00000099
panel.dropBackground #D040401a
panelTitle.activeBorder #D04040
panelTitle.activeForeground #E8D0D0
panelTitle.inactiveForeground #E8D0D066
peekView.border #00000080
peekViewEditor.background #0A0505
peekViewEditor.matchHighlightBackground #4A2828
peekViewEditorGutter.background #0A0505
peekViewResult.background #0A0505
peekViewResult.matchHighlightBackground #4A2828
peekViewResult.selectionBackground #6A4848b3
peekViewTitle.background #0A0505
peekViewTitleDescription.foreground #E8D0D099
pickerGroup.border #000000
pickerGroup.foreground #E8D0D0
progressBar.background #D04040
quickInput.background #000000
quickInput.foreground #6A4848
quickInputList.focusBackground #D0404026
quickInputList.focusIconForeground #E8D0D0
quickInputTitle.background #000000
sash.hoverBorder #D0404080
scrollbar.shadow #00000080
scrollbarSlider.activeBackground #D04040
scrollbarSlider.background #D0404020
scrollbarSlider.hoverBackground #D0404010
selection.background #D0404033
settings.checkboxBackground #000000
settings.checkboxForeground #E8D0D0
settings.dropdownBackground #000000
settings.dropdownForeground #E8D0D0
settings.headerForeground #E8D0D0
settings.modifiedItemIndicator #D04040
settings.numberInputBackground #000000
settings.numberInputForeground #E8D0D0
settings.textInputBackground #000000
settings.textInputForeground #E8D0D0
sideBar.background #000000
sideBar.border #00000099
sideBar.foreground #6A4848
sideBarActivityBarTop.border #00000099
sideBarSectionHeader.background #000000
sideBarSectionHeader.border #00000099
sideBarStickyScroll.border #00000099
sideBarTitle.foreground #E8D0D0
statusBar.background #000000
statusBar.border #00000099
statusBar.debuggingBackground #D040401a
statusBar.debuggingForeground #E8D0D0
statusBar.foreground #5A3838
statusBar.noFolderBackground #000000
statusBarItem.hoverBackground #5A383833
statusBarItem.remoteBackground #D0404014
statusBarItem.remoteForeground #E8D0D0
statusBarItem.remoteHoverBackground #D04040
statusBarItem.remoteHoverForeground #000000
tab.activeBackground #000000
tab.activeBorder #D04040
tab.activeBorderTop #D0404000
tab.activeForeground #E8D0D0
tab.activeModifiedBorder #D0404000
tab.border #000000
tab.inactiveBackground #000000
tab.inactiveForeground #6A4848
tab.unfocusedActiveBorder #D04040
tab.unfocusedActiveBorderTop #5A383800
tab.unfocusedActiveForeground #E8D0D0
terminal.ansiBlack #000000
terminal.ansiBlue #D04040
terminal.ansiBrightBlack #5A3838
terminal.ansiBrightBlue #D04040
terminal.ansiBrightCyan #D04040
terminal.ansiBrightGreen #D04040
terminal.ansiBrightMagenta #D04040
terminal.ansiBrightRed #D04040
terminal.ansiBrightWhite #D04040
terminal.ansiBrightYellow #D04040
terminal.ansiCyan #D04040
terminal.ansiGreen #D04040
terminal.ansiMagenta #D04040
terminal.ansiRed #D04040
terminal.ansiWhite #D04040
terminal.ansiYellow #D04040
terminalCommandGuide.foreground #1A0D0D
terminalCursor.background #000000
terminalCursor.foreground #D04040
textLink.activeForeground #E8D0D0
textLink.foreground #E8D0D0
textPreformat.background #1A0D0D66
textPreformat.foreground #E8D0D0b3
titleBar.activeBackground #000000
titleBar.activeForeground #E8D0D0
titleBar.border #00000099
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #6A4848
toolbar.activeBackground #D0404026
toolbar.hoverBackground #D040401a
tree.indentGuidesStroke #1A0D0D
widget.border #D040400f
widget.shadow #00000080 variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #E8D0D0 —
keyword, modifier, variable.language.this, support.type.object, constant.language #D04040 —
entity.name.function, support.function #C87070 —
storage.type, storage.modifier, storage.control #B86868 —
support.module, support.node #CC5050 italic
support.type, constant.other.key #D89890 —
entity.name.type, entity.other.inherited-class, entity.other #D89890 —
comment punctuation.definition.comment #4A3838 italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #D89890 —
variable.object.property, meta.field.declaration entity.name.function #CC5050 —
meta.definition.method entity.name.function #CC5050 —
meta.function entity.name.function #C87070 —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #D04040 —
meta.embedded, source.groovy.embedded, meta.template.expression #E8D0D0 —
entity.name.tag.yaml #CC5050 —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #CC5050 —
constant.language.json #D04040 —
meta.structure.dictionary.json support.type.property-name.json #B86868 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D89890 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E8A080 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #CC5050 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #7A4848 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C87070 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F06868 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #B86868 —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E86050 —
entity.other.attribute-name.class #D89890 —
entity.other.attribute-name.id #E8A080 —
source.css entity.name.tag #D89890 —
support.type.property-name.css #A07878 —
meta.tag, punctuation.definition.tag #D04040 —
entity.other.attribute-name #B86868 —
punctuation.definition.entity.html #E8D0D0 —
text.html.markdown meta.link.inline, meta.link.reference #CC5050 —
text.html.markdown beginning.punctuation.definition.list #D04040 —
markup.italic #CC5050 italic
markup.bold markup.italic, markup.italic markup.bold #CC5050 italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #E86050 —
markup.inline.raw.string.markdown #E86050 —
markup.quote #D04040 italic
punctuation.definition.quote #F06868 —
keyword.other.definition.ini #CC5050 —
entity.name.section.group-title.ini #D04040 —
source.cs meta.class.identifier storage.type #D89890 —
source.cs meta.method.identifier entity.name.function #CC5050 —
source.cs meta.method-call meta.method, source.cs entity.name.function #C87070 —
source.cs storage.type #D89890 —
source.cs meta.method.return-type #D89890 —
source.cs meta.preprocessor #4A3838 —
source.cs entity.name.type.namespace #E8D0D0 —
meta.jsx.children, SXNested #E8D0D0 —
support.class.component #D89890 —
source.cpp meta.block variable.other #E8D0D0 —
source.python meta.member.access.python #CC5050 —
source.python meta.function-call.python, meta.function-call.arguments #C87070 —
entity.name.function.call, support.function.builtin #C87070 —
source.php support.other.namespace, source.php meta.use support.class #E8D0D0 —
constant.keyword #D04040 italic
entity.name.function #C87070 —
constant.other.placeholder #CC5050 —
markup.underline — underline
keyword.control #D04040 italic
variable.parameter — italic
variable.parameter.function.language.special.self.python #E8D0D0 italic
constant.character.format.placeholder.other.python #E8A080 —
markup.fenced_code.block #E8D0D0e6 —
meta.decorator source.ts, meta.decorator.ts, punctuation.decorator.ts #D89890 —
entity.name.type.interface.ts, entity.name.type.interface.tsx #D89890 italic
entity.name.type.enum.ts, entity.name.type.enum.tsx #D89890 —
entity.name.type.alias.ts, entity.name.type.alias.tsx #D89890 —
entity.name.type.module.ts, entity.name.type.module.tsx #E8D0D0 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #E8A080 —
storage.type.annotation.java, punctuation.definition.annotation.java #D89890 —
storage.modifier.package.java, storage.modifier.import.java #B86868 —
storage.modifier.extends.java, storage.modifier.implements.java #D04040 italic
storage.type.java, storage.type.primitive.java, storage.type.generic.java #D89890 —
storage.type.object.array.java #D89890 —
entity.name.package.go #E8D0D0 —
entity.name.import.go #E86050 —
entity.name.type.go #D89890 —
entity.name.function.go #C87070 —
support.function.builtin.go #D04040 —
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust #F06868 italic
entity.name.function.macro.rust, support.macro.rust #D04040 —
meta.attribute.rust, punctuation.definition.attribute.rust #D89890 —
entity.name.type.trait.rust #D89890 italic
keyword.other.unsafe.rust #CC5050 bold
variable.language.self.rust, keyword.other.crate.rust #D04040 italic
constant.language.symbol.ruby, punctuation.definition.symbol.ruby #F06868 —
variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby #CC5050 —
variable.other.readwrite.class.ruby #CC5050 italic
variable.other.block.ruby #E8A080 —
string.regexp.ruby #F06868 —
support.class.ruby, variable.other.constant.ruby #D89890 —
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell #CC5050 —
comment.line.shebang, comment.line.shebang punctuation.definition.comment #D04040 italic
support.function.builtin.shell #C87070 —
string.heredoc.shell, keyword.operator.heredoc.shell #E86050 —
keyword.operator.logical.shell, keyword.operator.pipe.shell #D04040 —
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.DML.II.sql, keyword.other.data-integrity.sql #D04040 —
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql #C87070 —
keyword.operator.star.sql #CC5050 —
entity.name.other.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml #F06868 —
storage.type.tag-handle.yaml, constant.other.tag.yaml #B86868 —
constant.other.timestamp.yaml #E8A080 —
entity.other.document.begin.yaml, entity.other.document.end.yaml #D04040 —
keyword.key.toml, support.type.property-name.toml #CC5050 —
entity.other.attribute-name.table.toml, support.type.property-name.table.toml #D04040 —
entity.other.attribute-name.table.array.toml, support.type.property-name.array.toml #B86868 —
constant.other.date.toml, constant.other.datetime.toml, constant.other.datetime-with-timezone.toml #E8A080 —
entity.name.tag.xml, entity.name.tag.localname.xml #CC5050 —
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml #B86868 —
entity.name.tag.namespace.xml, entity.other.attribute-name.namespace.xml #D89890 —
meta.tag.preprocessor.xml, punctuation.definition.tag.xml #D04040 —
string.unquoted.cdata.xml #E86050 —
keyword.other.special-method.dockerfile, keyword.control.dockerfile #D04040 bold
variable.other.dockerfile #CC5050 —
support.type.graphql, entity.name.fragment.graphql #D89890 —
keyword.other.directive.graphql, entity.name.function.directive.graphql #B86868 —
variable.graphql, variable.arguments.graphql #CC5050 —
constant.character.enum.graphql #E8A080 —
meta.attribute.swift, storage.modifier.attribute.swift #D89890 —
entity.name.type.protocol.swift, entity.other.inherited-class.swift #D89890 italic
keyword.operator.optional.swift, keyword.operator.type.optional.swift #F06868 —
storage.type.annotation.kotlin, punctuation.definition.annotation.kotlin #D89890 —
keyword.other.kotlin #B86868 —
keyword.operator.elvis.kotlin, keyword.operator.safe-navigation.kotlin #F06868 —
storage.type.annotation.dart #D89890 —
parameter.named.dart #E8A080 italic
entity.name.class.trait.scala #D89890 italic
entity.name.class.case.scala #D89890 —
keyword.declaration.stable.scala, storage.modifier.other.scala #D04040 italic
variable.language.self.lua #D04040 italic
constant.language.lua #F06868 —
variable.other.readwrite.global.perl, variable.other.predefined.perl, punctuation.definition.variable.perl #CC5050 —
string.regexp.find.perl, punctuation.definition.string.perl, string.regexp.replace.perl #F06868 —
keyword.operator.assignment.r #D04040 —
keyword.operator.pipe.r #B86868 —
entity.name.function.r #C87070 —
variable.other.member.powershell, variable.other.readwrite.powershell, punctuation.definition.variable.powershell #CC5050 —
support.function.powershell #C87070 —
support.function.attribute.powershell #D89890 —
meta.diff.header, meta.diff.header.from-file, meta.diff.header.to-file #C87070 bold
meta.diff.range, punctuation.definition.range.diff #B86868 —
markup.inserted.diff #E86050 —
markup.deleted.diff #CC5050 —
markup.changed.diff #E8A080 —
constant.other.character-class.regexp, keyword.operator.character-class.regexp #D89890 —
keyword.operator.quantifier.regexp #E8A080 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp #B86868 —
keyword.control.anchor.regexp #D04040 —
keyword.operator.or.regexp #CC5050 —
constant.language.gitignore, keyword.operator.negation.gitignore #CC5050 —
comment.line.number-sign.gitignore #4A3838 italic
punctuation.separator.path.gitignore #D04040 —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #F06868 —
variable.css, variable.argument.css, support.type.custom-property.css #CC5050 —
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less #E8A080 —
support.type.property-name.media.css, support.constant.media.css #B86868 —
keyword.other.important.css #CC5050 bold
constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css #E8A080 —
support.function.misc.css, support.function.transform.css, support.function.calc.css, support.function.gradient.css #C87070 —
variable.scss, variable.other.less, variable.declaration.less #CC5050 —
keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, entity.name.function.scss #B86868 —
entity.name.tag.reference.scss #D04040 —
heading.1.markdown entity.name, markup.heading.setext.1.markdown #D04040 bold
heading.2.markdown entity.name, markup.heading.setext.2.markdown #B86868 bold
heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name #D89890 bold
markup.strikethrough, punctuation.definition.strikethrough.markdown #4A3838 strikethrough
markup.underline.link.markdown, markup.underline.link.image.markdown #C87070 underline
string.other.link.description.markdown, string.other.link.title.markdown #E86050 —
fenced_code.block.language.markdown #E8A080 —
meta.separator.markdown #4A3838 —
entity.name.function.decorator.python, meta.function.decorator.python #D89890 italic
support.function.magic.python #C87070 italic
meta.function.parameters.python support.type.python #D89890 —
meta.fstring.python, storage.type.string.python #E86050 —
support.type.exception.python #CC5050 italic
support.type.python #D89890 —
variable.other.php, punctuation.definition.variable.php #CC5050 —
keyword.other.phpdoc.php, storage.type.class.phpdoc.php #D04040 —
support.class.php, meta.other.type.phpdoc.php #D89890 —
support.constant.core.php, constant.other.php #E8A080 —
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp, keyword.control.directive.include.c, keyword.control.directive.define.c, punctuation.definition.directive.c, punctuation.definition.directive.cpp #B86868 —
string.quoted.include.cpp, string.quoted.include.c #E86050 —
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp #D04040 —
keyword.operator.address.cpp, keyword.operator.arrow.cpp, storage.modifier.pointer.cpp, storage.modifier.reference.cpp #F06868 —
storage.type.template.cpp, storage.type.template.argument.cpp #D89890 —
entity.name.function.target.makefile #C87070 bold
variable.other.makefile #CC5050 —
meta.scope.prerequisites.makefile #E86050 —
variable.other.env #CC5050 —
string.quoted.double.env, string.quoted.single.env, string.unquoted.env #E86050 —
log.error, keyword.log.error #CC5050 bold
log.warning, keyword.log.warning #E8A080 —
log.info, keyword.log.info #C87070 —
log.date, constant.numeric.date.log #B86868 —
keyword.control.firestorerules, keyword.other.firestorerules, keyword.control.flow.firestorerules #D04040 bold
support.type.firestorerules, keyword.other.permission.firestorerules #B86868 —
variable.language.firestorerules, support.variable.firestorerules #CC5050 —
entity.name.function.firestorerules, support.function.firestorerules #C87070 —
string.unquoted.path.firestorerules, variable.parameter.path.firestorerules #E86050 —
variable.parameter.wildcard.firestorerules, variable.other.firestorerules #E8A080 italic
support.type.primitive.firestorerules, storage.type.firestorerules #D89890 —
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 } ! ` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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...
~/my-project $
package.json
tsconfig.json
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 } ! ` ;
}