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 #2f333f activityBar.background #1a1d23 activityBar.border #2f333f activityBar.foreground #ffab77 activityBar.inactiveForeground #bfc6d4bb activityBarBadge.background #ff7824 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape — italic keyword.control.flow.block-scalar.literal, keyword.control.flow.python — comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #5f6996 — keyword.operator.assignment.jsdoc, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Svelte 5 theme — Svelte 5 theme
activityBarBadge.foreground
#ffffff
badge.background #ff7824
badge.foreground #bfc6d4
breadcrumb.activeSelectionForeground #bfc6d4bb
breadcrumb.background #1a1d23
breadcrumb.focusForeground #bfc6d4bb
breadcrumb.foreground #bfc6d4bb
button.background #c98256
button.foreground #ffffff
button.hoverBackground #da8048
button.secondaryBackground #21242c
button.secondaryForeground #ffffff
button.secondaryHoverBackground #2f333f
checkbox.background #1a1d23
checkbox.border #00000000
checkbox.foreground #bfc6d4
debugExceptionWidget.background #1a1d23
debugExceptionWidget.border #1a1d23
debugToolBar.background #1a1d23
debugToolBar.border #1a1d23
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #1a1d23
dropdown.border #00000000
dropdown.foreground #bfc6d4
editor.background #21242c
editor.findMatchBackground #63afff36
editor.findMatchBorder #63afff36
editor.findMatchHighlightBackground #ff9e6163
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #2f333f8e
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #bfc6d4bb
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #63afff36
editor.lineHighlightBackground #2f333f
editor.lineHighlightBorder #2f333f
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #63afff36
editor.selectionHighlightBackground #63afff36
editor.selectionHighlightBorder #63afff36
editor.wordHighlightBackground #63afff36
editor.wordHighlightStrongBackground #63afff36
editorBracketHighlight.foreground1 #e5ecff
editorBracketHighlight.foreground2 #be9c86
editorBracketHighlight.foreground3 #6291c4
editorBracketHighlight.foreground4 #56939e
editorBracketHighlight.foreground5 #80a856
editorBracketHighlight.foreground6 #cfa25f
editorBracketHighlight.unexpectedBracket.foreground #db4b4b
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorBracketPairGuide.activeBackground1 #e5ecff
editorBracketPairGuide.activeBackground2 #be9c86
editorBracketPairGuide.activeBackground3 #6291c4
editorBracketPairGuide.activeBackground4 #56939e
editorBracketPairGuide.activeBackground5 #80a856
editorBracketPairGuide.activeBackground6 #cfa25f
editorCodeLens.foreground #999999
editorCursor.background #1a1d23
editorCursor.foreground #ffab77
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #21242c
editorGroupHeader.tabsBackground #1a1d23
editorGroupHeader.tabsBorder #2f333f
editorGutter.addedBackground #587c0c
editorGutter.background #21242c
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #1a1d23
editorHoverWidget.border #2f333f
editorHoverWidget.foreground #556788
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #ffab77
editorLineNumber.foreground #bfc6d4bb
editorLink.activeForeground #3b9aff
editorMarkerNavigation.background #1a1d23
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #1a1d23
editorSuggestWidget.border #2f333f
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #63afff
editorSuggestWidget.selectedBackground #63afff36
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #63afff36
editorWidget.background #1a1d23
editorWidget.foreground #bfc6d4
editorWidget.resizeBorder #ffab77
focusBorder #00000000
foreground #acb0bb
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 #e5ecff41
input.background #252930
input.border #00000000
input.foreground #bfc6d4
input.placeholderForeground #bfc6d4bb
inputOption.activeBackground #6b4d3b4e
inputOption.activeBorder #ff9e61c3
inputOption.activeForeground #bfc6d4
list.activeSelectionBackground #21242c
list.activeSelectionForeground #bfc6d4
list.dropBackground #1a1d23
list.focusBackground #1a1d23
list.focusForeground #bfc6d4bb
list.highlightForeground #bfc6d4
list.hoverBackground #2f333f
list.hoverForeground #556788
list.inactiveSelectionBackground #21242c
list.inactiveSelectionForeground #556788
listFilterWidget.background #3b9aff
listFilterWidget.noMatchesOutline #3b9aff
listFilterWidget.outline #00000000
menu.background #1a1d23
menu.border #00000085
menu.foreground #556788
menu.selectionBackground #ffab77
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #f6f9ff
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #1a1d23
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #21242c
minimap.errorHighlight #f48771
minimap.findMatchHighlight #63afff36
minimap.selectionHighlight #63afff36
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #2f333f
notificationCenterHeader.background #21242c
notificationCenterHeader.foreground #e9efff
notifications.background #1a1d23
notifications.border #2f333f
notifications.foreground #bfc6d4
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #21242c
panel.background #1a1d23
panel.border #80808059
panelSection.border #2f333f
panelTitle.activeBorder #bfc6d4
panelTitle.activeForeground #ffab77
panelTitle.inactiveForeground #bfc6d4
peekView.border #21242c
peekViewEditor.background #1a1d23
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #1a1d23
peekViewResult.background #1a1d23
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bfc6d4bb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #0d0f15
peekViewTitleDescription.foreground #bfc6d4bb
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #2f333f
pickerGroup.foreground #3b9aff
progressBar.background #ff7824
scrollbar.shadow #1a1d23
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #bfc6d428
scrollbarSlider.hoverBackground #4b4b4bb3
selection.background #ee905485
settings.focusedRowBackground #ffffff07
settings.headerForeground #2f333f
sideBar.background #1a1d23
sideBar.dropBackground #1a1d23
sideBar.foreground #bfc6d4bb
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #55678833
sideBarSectionHeader.foreground #bfc6d4bb
sideBarTitle.foreground #bbbbbb
statusBar.background #1a1d23
statusBar.debuggingBackground #1a1d23
statusBar.debuggingForeground #f6f9ff
statusBar.foreground #f6f9ff
statusBar.noFolderBackground #1a1d23
statusBar.noFolderForeground #f6f9ff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #ffab77
statusBarItem.remoteForeground #f6f9ff
tab.activeBackground #21242c
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #bfc6d4
tab.border #0d0f15
tab.inactiveBackground #1a1d23
tab.inactiveForeground #bfc6d4bb
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 #2f333f
terminal.foreground #bfc6d4
terminal.selectionBackground #2a62ff33
terminalCursor.background #ff9e61c3
terminalCursor.foreground #ffffff
textLink.foreground #3b9aff
titleBar.activeBackground #1a1d23
titleBar.activeForeground #f6f9ff
titleBar.border #00000000
titleBar.inactiveBackground #1a1d23
titleBar.inactiveForeground #55678899
tree.indentGuidesStroke #bfc6d4
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance #7582ba —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps #bfc6d4 —
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character #cfba97
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant #9aa5ce —
invalid, invalid.illegal #ff5370 —
invalid.deprecated #3b9aff —
meta.var.expr storage.type, storage.modifier #5facff —
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig #ff7824 —
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade #f6f9ff —
keyword.operator.spread, keyword.operator.rest #ff7824 bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url #63afff —
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other #5facff —
keyword, keyword.control, keyword.other.important #61afef —
keyword.other.DML #61afef —
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp #61afef —
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative, meta.tag #f6f9ff —
punctuation.definition.tag #f6f9ff —
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other.haskell #e0af68 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments #bfc6d4 —
meta.array.literal variable #63afff —
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label #bfc6d4 —
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs #63afff —
variable.other.object.property #bfc6d4 —
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key #1c8aff —
source.cpp meta.block variable.other #ffdba5 —
support.other.variable #ffdba5 —
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs #ffbc92 —
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function #ffbc92 —
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable #e0af68 —
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit #61afef —
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration #c5cedd —
entity.other.inherited-class #ffbc92
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object #dacdbf —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key #ffbc92 —
support.constant.font-name, meta.definition.variable #ffe0af —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #ffe0af —
entity.other.attribute-name.id #ff7824 —
entity.name.tag.css #f6f9ff —
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference #e0af68 —
meta.property-list #9abdf5 —
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else #ff9e64 —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #63afff —
meta.property-list meta.property-list #9abdf5 —
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include #bfc6d4 —
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword #3b9aff —
meta.property-list meta.at-rule.include #bfc6d4 —
support.constant.property-value #ff9e64 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #bfc6d4 —
variable.language #ffdba5 —
variable.other punctuation.definition.variable #bfc6d4 —
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this #ffdba5 —
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #ffbc92 —
text.html constant.character.entity #f6f9ff —
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html #ffbc92 —
source.sass keyword.control #ffbc92 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value #ffbc92 —
punctuation.definition.group #ffdba5 —
constant.other.character-class.regexp #ffbc92 —
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp #e0af68 —
keyword.operator.quantifier.regexp #89ddff —
constant.character.escape.backslash #bfc6d4 —
constant.character.escape #89ddff —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #ffbc92 —
keyword.other.unit #ffdba5 —
source.json meta.structure.dictionary.json support.type.property-name.json #ffbc92 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f6f9ff —
source.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 #63afff —
source.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 #ffbc92 —
source.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 #e0af68 —
source.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 #f6f9ff —
source.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 #63afff —
source.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 #ffdba5 —
source.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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffe0af —
punctuation.definition.list_item.markdown #9abdf5 —
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section #9abdf5 —
meta.embedded.block #bfc6d4 —
meta.tag JSXNested, meta.jsx.children, text.html, text.log #9aa5ce —
text.html.markdown markup.inline.raw.markdown #ffbc92 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4E5579 —
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown #89ddff bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown #61bdf2 bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown #ffbc92 bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown #6d91de bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown #9aa5ce bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown #747ca1 bold
markup.italic, markup.italic punctuation #bfc6d4 italic
markup.bold, markup.bold punctuation #bfc6d4 bold
markup.bold markup.italic, markup.bold markup.italic punctuation #bfc6d4 bold italic
markup.underline, markup.underline punctuation — underline
markup.quote punctuation.definition.blockquote.markdown #4E5579 —
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown #63afff —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown #89ddff —
meta.separator #5f6996 bold
token.error-token #db4b4b —
token.debug-token #b267e6 —
entity.tag.apacheconf #ffdba5 —
meta.preprocessor #63afff —
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 } ! ` ;
}
Svelte 5 theme | Coding Theme