Skip to main content
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.activeBackground #4489ce11 activityBar.activeBorder #5599dd activityBar.activeFocusBorder #5599dd33 activityBar.background #141a1f activityBar.border #141a1f activityBar.dropBorder #cccccc tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #5974A5 italic comment markup.link #5974A5 — entity.name.type #F0C36F — entity.other.inherited-class #95D16A — keyword
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#6e7d9a
activityBarBadge.background #ffffff09
activityBarBadge.foreground #6e7d9a
badge.background #5599dd
badge.foreground #111111
banner.background #5599dd
banner.foreground #111111
banner.iconForeground #111111
button.background #5599dd
button.border #5599dd
button.foreground #111111
button.hoverBackground #5599ddaa
button.secondaryBackground #667799
button.secondaryForeground #111111
button.secondaryHoverBackground #667799aa
checkbox.background #0d1114
checkbox.border #00000000
checkbox.foreground #5599dd
debugExceptionWidget.background #ff00dd
debugExceptionWidget.border #ff00dd
descriptionForeground #999999
diffEditor.border #273541
diffEditor.diagonalFill #273541
diffEditor.insertedTextBackground #00aa5533
diffEditor.insertedTextBorder #00aa5533
diffEditor.removedTextBackground #ff443333
diffEditor.removedTextBorder #ff443333
dropdown.listBackground #0d1114
editor.background #141a1f
editor.findMatchBackground #5599dd66
editor.findMatchBorder #5599dd22
editor.findMatchHighlightBackground #5599dd33
editor.findMatchHighlightBorder #5599dd22
editor.findRangeHighlightBackground #5599dd33
editor.findRangeHighlightBorder #5599dd22
editor.foldBackground #5599dd11
editor.hoverHighlightBackground #5599dd33
editor.inactiveSelectionBackground #5599dd33
editor.lineHighlightBackground #5599dd11
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #151c2111
editor.rangeHighlightBackground #5599dd11
editor.rangeHighlightBorder #00000000
editor.selectionBackground #5599dd66
editor.selectionForeground #ffffff
editor.selectionHighlightBackground #5599dd33
editor.selectionHighlightBorder #5599dd22
editor.symbolHighlightBackground #5599dd11
editor.symbolHighlightBorder #00000000
editor.wordHighlightBackground #5599dd33
editor.wordHighlightBorder #5599dd22
editor.wordHighlightStrongBackground #5599dd33
editor.wordHighlightStrongBorder #5599dd22
editorBracketMatch.background #5599dd33
editorBracketMatch.border #5599dd22
editorCodeLens.foreground #cccccc66
editorCursor.background #5599ddaa
editorCursor.foreground #5599dd
editorError.background #00000000
editorError.border #00000000
editorError.foreground #ff4433
editorGhostText.border #ff00dd
editorGhostText.foreground #ff00dd
editorGroup.border #273541
editorGroup.dropBackground #101519aa
editorGroup.emptyBackground #141a1f
editorGroup.focusedEmptyBorder #5599ddaa
editorGroupHeader.border #5599dd11
editorGroupHeader.noTabsBackground #0d1114
editorGroupHeader.tabsBackground #171e24
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #00aa55
editorGutter.background #00000000
editorGutter.commentRangeForeground #5599dd
editorGutter.deletedBackground #ff4433
editorGutter.foldingControlForeground #5599ddaa
editorGutter.modifiedBackground #ff9955
editorHint.border #00000000
editorHint.foreground #5599dd
editorHoverWidget.background #0d1114
editorHoverWidget.border #151c21
editorHoverWidget.foreground #cccccc
editorHoverWidget.statusBarBackground #101519
editorIndentGuide.activeBackground #5599dd33
editorIndentGuide.background #5599dd11
editorInfo.background #00000000
editorInfo.border #00000000
editorInfo.foreground #5599dd
editorInlayHint.background #5599dd11
editorInlayHint.foreground #5599ddaa
editorLightBulb.foreground #5599dd
editorLightBulbAutoFix.foreground #5599dd
editorLineNumber.activeForeground #5599ddaa
editorLineNumber.foreground #66779966
editorLink.activeForeground #5599dd
editorMarkerNavigation.background #0d1114
editorMarkerNavigationError.background #ff4433
editorMarkerNavigationInfo.background #5599dd
editorMarkerNavigationWarning.background #ff9955
editorOverviewRuler.addedForeground #00aa55
editorOverviewRuler.background #141a1f
editorOverviewRuler.border #141a1f
editorOverviewRuler.bracketMatchForeground #00000000
editorOverviewRuler.deletedForeground #ff4433
editorOverviewRuler.errorForeground #ff4433
editorOverviewRuler.findMatchForeground #5599dd
editorOverviewRuler.infoForeground #5599dd
editorOverviewRuler.modifiedForeground #ff9955
editorOverviewRuler.rangeHighlightForeground #5599dd
editorOverviewRuler.selectionHighlightForeground #5599dd
editorOverviewRuler.warningForeground #ff9955
editorOverviewRuler.wordHighlightForeground #5599dd
editorOverviewRuler.wordHighlightStrongForeground #5599dd
editorPane.background #0d1114
editorRuler.foreground #5599dd22
editorSuggestWidget.background #0d1114
editorSuggestWidget.border #151c21
editorSuggestWidget.focusHighlightForeground #5599dd
editorSuggestWidget.foreground #ccccccaa
editorSuggestWidget.highlightForeground #5599ddaa
editorSuggestWidget.selectedBackground #141a1f
editorSuggestWidget.selectedForeground #cccccc
editorSuggestWidget.selectedIconForeground #cccccc
editorUnnecessaryCode.border #00000000
editorUnnecessaryCode.opacity #000000aa
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #ff9955
editorWhitespace.foreground #66779966
editorWidget.background #0d1114
editorWidget.border #151c21
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5599dd
errorForeground #ff4433
extensionBadge.remoteBackground #5599dd
extensionBadge.remoteForeground #111111
extensionButton.prominentBackground #5599dd
extensionButton.prominentForeground #111111
extensionButton.prominentHoverBackground #5599ddaa
extensionIcon.starForeground #5599dd
focusBorder #00000000
foreground #cccccc
icon.foreground #cccccc
input.background #101519
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #cccccc66
inputOption.activeBackground #101519
inputOption.activeBorder #5599dd
inputOption.activeForeground #cccccc
inputValidation.errorBackground #101519
inputValidation.errorBorder #ff4433
inputValidation.errorForeground #cccccc
inputValidation.infoBackground #101519
inputValidation.infoBorder #5599dd
inputValidation.infoForeground #cccccc
inputValidation.warningBackground #101519
inputValidation.warningBorder #ff9955
inputValidation.warningForeground #cccccc
list.activeSelectionBackground #5599dd22
list.hoverBackground #182d4263
list.hoverForeground #cccccc
list.inactiveFocusOutline #5599dd66
list.inactiveSelectionBackground #d40d0d00
list.inactiveSelectionForeground #cccccc
list.inactiveSelectionIconForeground #6e7d9abb
menu.background #101519
menu.border #00000000
menu.foreground #cccccc
menu.selectionBackground #151c21
menu.selectionBorder #00000000
menu.selectionForeground #cccccc
menu.separatorBackground #5599ddaa
menubar.selectionBackground #273541
menubar.selectionBorder #00000000
menubar.selectionForeground #cccccc
minimap.background #151c21
minimap.errorHighlight #ff4433aa
minimap.findMatchHighlight #5599ddaa
minimap.selectionHighlight #5599ddaa
minimap.warningHighlight #ff9955aa
minimapGutter.addedBackground #00aa55
minimapGutter.deletedBackground #ff4433
minimapGutter.modifiedBackground #ff9955
minimapSlider.activeBackground #273541aa
minimapSlider.background #27354166
minimapSlider.hoverBackground #273541aa
notificationCenter.border #00000000
notificationCenterHeader.background #101519
notificationCenterHeader.foreground #cccccc
notificationLink.foreground #5599dd
notifications.background #0d1114
notifications.border #5599ddaa
notifications.foreground #cccccc
notificationsErrorIcon.foreground #ff4433
notificationsInfoIcon.foreground #5599dd
notificationsWarningIcon.foreground #ff9955
notificationToast.border #00000000
panel.background #141a1f
panel.border #ffffff09
panel.dropBorder #ff00dd
panelInput.border #00000000
panelSection.border #273541
panelSection.dropBackground #0d1114
panelSectionHeader.background #171e24
panelSectionHeader.border #ff00dd
panelSectionHeader.foreground #cccccc
panelTitle.activeBorder #5599dd
panelTitle.activeForeground #6e7d9abb
peekView.border #5599dd
peekViewEditor.background #101519
peekViewEditor.matchHighlightBackground #5599dd22
peekViewEditor.matchHighlightBorder #5599dd33
peekViewEditorGutter.background #101519
peekViewResult.background #101519
peekViewResult.fileForeground #cccccc
peekViewResult.lineForeground #cccccc
peekViewResult.matchHighlightBackground #5599dd22
peekViewResult.selectionBackground #0d1114
peekViewResult.selectionForeground #cccccc
peekViewTitle.background #0d1114
peekViewTitleDescription.foreground #cccccc
peekViewTitleLabel.foreground #5599dd
problemsErrorIcon.foreground #ff4433
problemsInfoIcon.foreground #5599dd
problemsWarningIcon.foreground #ff9955
progressBar.background #5599dd
quickInput.background #151a1f
quickInput.foreground #667799aa
quickInputList.focusBackground #5599dd3b
sash.hoverBorder #5599ddaa
scrollbar.shadow #11111166
scrollbarSlider.activeBackground #273541aa
scrollbarSlider.background #5599dd0a
scrollbarSlider.hoverBackground #273541aa
searchEditor.findMatchBackground #5599dd66
searchEditor.findMatchBorder #5599dd22
searchEditor.textInputBorder #00000000
selection.background #999999aa
sideBar.background #141a1f
sideBar.foreground #6e7d9abb
sideBarSectionHeader.background #141a1f
sideBarSectionHeader.border #00000000
sideBarTitle.foreground #6e7d9abb
statusBar.background #141a1f
statusBar.border #141a1f
statusBar.debuggingBackground #d54101
statusBar.debuggingBorder #00000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #343b41
statusBar.noFolderBackground #0d1114
statusBar.noFolderBorder #00000000
statusBar.noFolderForeground #cccccc
statusBarItem.activeBackground #00000033
statusBarItem.errorBackground #0d1114
statusBarItem.errorForeground #ff4433
statusBarItem.hoverBackground #00000033
statusBarItem.prominentBackground #0d1114
statusBarItem.prominentForeground #cccccc
statusBarItem.prominentHoverBackground #00000033
statusBarItem.remoteBackground #0d1114
statusBarItem.remoteForeground #cccccc
tab.activeBackground #101519
tab.activeBorder #5599dd
tab.activeForeground #cccccc
tab.activeModifiedBorder #ff00dd
tab.border #00000000
tab.hoverBackground #00000000
tab.hoverBorder #5599ddaa
tab.hoverForeground #cccccc
tab.inactiveBackground #141a1f
tab.inactiveForeground #6e7d9abb
tab.inactiveModifiedBorder #ff00dd
tab.lastPinnedBorder #5599dd33
tab.unfocusedActiveBackground #141a1f
tab.unfocusedActiveBorder #5599ddaa
tab.unfocusedActiveBorderTop #00000000
tab.unfocusedActiveForeground #cccccc
tab.unfocusedActiveModifiedBorder #ff00dd
tab.unfocusedHoverBackground #0d1114
tab.unfocusedHoverBorder #5599ddaa
tab.unfocusedHoverForeground #cccccc
tab.unfocusedInactiveBackground #141a1f
tab.unfocusedInactiveForeground #ccccccaa
tab.unfocusedInactiveModifiedBorder #ff00dd
textBlockQuote.background #0d1114
textBlockQuote.border #5599dd
textCodeBlock.background #171e24
textLink.activeForeground #5599ddaa
textLink.foreground #5599dd
textPreformat.foreground #999999
textSeparator.foreground #ff00dd
titleBar.activeBackground #171e24
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #171e24aa
titleBar.inactiveForeground #ccccccaa
toolbar.activeBackground #5599dd44
toolbar.hoverBackground #5599dd44
toolbar.hoverOutline #5599dd44
tree.indentGuidesStroke #5599dd22
tree.tableColumnsBorder #5599dd22
widget.shadow #11111166
window.activeBorder #00000000
window.inactiveBorder #00000000 #CC6BE9
keyword.other.special-method #54B0FC —
keyword.other.unit #E09956 —
storage.type.annotation, storage.type.primitive #CC6BE9 —
storage.modifier.package, storage.modifier.import #9FAECA —
constant.variable #E09956 —
constant.character.escape #45C2D3 —
constant.other.color #45C2D3 —
constant.other.symbol #45C2D3 —
variable.interpolation #D04033 —
variable.parameter #9FAECA —
string.regexp source.ruby.embedded #F0C36F —
string.other.link #ED5E6A —
punctuation.definition.comment #5974A5 —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array #9FAECA —
punctuation.definition.heading, punctuation.definition.identity #54B0FC —
punctuation.definition.bold #F0C36F bold
punctuation.definition.italic #CC6BE9 italic
punctuation.section.embedded #D04033 —
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class #9FAECA —
support.function.any-method #54B0FC —
entity.name.function #54B0FC —
entity.name.class, entity.name.type.class #F0C36F —
entity.name.section #54B0FC —
entity.other.attribute-name #E09956 —
entity.other.attribute-name.id #54B0FC —
meta.method-call, meta.method #9FAECA —
meta.definition.variable #ED5E6A —
invalid.deprecated #9D6F15 —
markup.italic #CC6BE9 italic
markup.heading punctuation.definition.heading #54B0FC —
source.c keyword.operator #CC6BE9 —
source.cpp keyword.operator #CC6BE9 —
source.cs keyword.operator #CC6BE9 —
source.css property-name, source.css property-value #7083A7 —
source.css property-name.support, source.css property-value.support #9FAECA —
source.gfm link entity #54B0FC —
source.go storage.type.string #CC6BE9 —
source.ini keyword.other.definition.ini #ED5E6A —
source.java storage.modifier.import #F0C36F —
source.java storage.type #F0C36F —
source.java keyword.operator.instanceof #CC6BE9 —
source.java-properties meta.key-pair #ED5E6A —
source.java-properties meta.key-pair > punctuation #9FAECA —
source.js keyword.operator #45C2D3 —
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void #CC6BE9 —
source.json meta.structure.dictionary.json > string.quoted.json #ED5E6A —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ED5E6A —
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 #95D16A —
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json #45C2D3 —
source.python keyword.operator.logical.python #CC6BE9 —
source.python variable.parameter #E09956 —
meta.attribute.rust #C5CD8D —
storage.modifier.lifetime.rust, entity.name.lifetime.rust #20F9FC —
keyword.unsafe.rust #DB5B66 —
support.type.property-name #9FAECA —
string.quoted.double punctuation #95D16A —
support.type.property-name.json #ED5E6A —
support.type.property-name.json punctuation #ED5E6A —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #45C2D3 —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #45C2D3 —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #9FAECA —
support.variable.dom.js, support.variable.dom.ts #ED5E6A —
support.variable.property.dom.js, support.variable.property.dom.ts #ED5E6A —
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition #D04033 —
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters #9FAECA —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #9FAECA —
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #9FAECA —
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx #ED5E6A —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #ED5E6A —
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #CC6BE9 —
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx #CC6BE9 —
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx #9FAECA —
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor #9FAECA —
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #9FAECA —
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx #E09956 —
source.js support.variable, source.ts support.variable, source.tsx support.variable #ED5E6A —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #E09956 —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #CC6BE9 —
source.ts keyword.operator, source.tsx keyword.operator #45C2D3 —
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #9FAECA —
constant.language.import-export-all.js, constant.language.import-export-all.ts #ED5E6A —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #45C2D3 —
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx #9FAECA —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #ED5E6A —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #E09956 —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #ED5E6A —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #95D16A —
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator #9FAECA —
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx #95D16A —
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx #9FAECA —
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable #9FAECA —
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type #9FAECA —
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator #9FAECA —
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded #9FAECA —
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable #F0C36F —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #ED5E6A —
constant.language.json #45C2D3 —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #E09956 —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #45C2D3 —
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition #95D16A —
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template #95D16A —
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx #CC6BE9 —
source.python constant.other #9FAECA —
source.python constant #E09956 —
constant.character.format.placeholder.other.python storage #E09956 —
support.variable.magic.python #ED5E6A —
meta.function.parameters.python #E09956 —
punctuation.separator.annotation.python #9FAECA —
punctuation.separator.parameters.python #9FAECA —
entity.name.variable.field.cs #ED5E6A —
source.cs keyword.operator #9FAECA —
variable.other.readwrite.cs #9FAECA —
variable.other.object.cs #9FAECA —
variable.other.object.property.cs #9FAECA —
entity.name.variable.property.cs #54B0FC —
keyword.other.unsafe.rust #ED5E6A —
markup.raw.block.markdown #9FAECA —
punctuation.definition.variable.shell #ED5E6A —
support.constant.property-value.css #9FAECA —
punctuation.definition.constant.css #E09956 —
punctuation.separator.key-value.scss #ED5E6A —
punctuation.definition.constant.scss #E09956 —
meta.property-list.scss punctuation.separator.key-value.scss #9FAECA —
storage.type.primitive.array.java #F0C36F —
entity.name.section.markdown #ED5E6A —
punctuation.definition.heading.markdown #ED5E6A —
markup.heading.setext #9FAECA —
punctuation.definition.bold.markdown #E09956 —
markup.inline.raw.markdown #95D16A —
beginning.punctuation.definition.list.markdown #ED5E6A —
markup.quote.markdown #5974A5 italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #9FAECA —
punctuation.definition.metadata.markdown #CC6BE9 —
markup.underline.link.markdown, markup.underline.link.image.markdown #CC6BE9 —
string.other.link.title.markdown, string.other.link.description.markdown #54B0FC —
punctuation.separator.variable.ruby #ED5E6A —
variable.other.constant.ruby #E09956 —
keyword.operator.other.ruby #95D16A —
punctuation.definition.variable.php #ED5E6A —
punctuation.definition.comment #AAAAAA66 —
comment, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this — italic
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive —
token.error-token #F44747 —
token.debug-token #B267E6 —
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...
~/my-project
main*
Button.tsx
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 } !` ;
}
Dark Pro | Coding Theme