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
Polar Black | Coding Theme
The requested theme was not found on this page; showing the first available theme.
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
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 } ! ` ;
}