Skip to main content
Home Theme VS Code Witch Elaina Color Theme vscode theme inspired by the anime Majo no Tabitabi
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #2f2838 activityBar.foreground #cecfd3 activityBar.inactiveForeground #ffffff66 activityBarBadge.background #8d58ca activityBarBadge.foreground #ffffff badge.background #4d4d4d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #f6ebff — variable.other.generic-type.haskell #dfcfe9 — storage.type.haskell #e99cc2 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Witch Elaina Color Theme — Witch Elaina
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #17141b
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #5e447b
button.foreground #ffffff
button.hoverBackground #5e447b
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #4f6d0b33
diffEditor.removedTextBackground #9b202033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #17141b
editor.findMatchBackground #f5da0048
editor.findMatchBorder #ffffff00
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #1f1824
editor.foreground #dee9e9
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #2f2838ab
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #5c4975
editor.selectionHighlightBackground #b15cf76e
editor.selectionHighlightBorder #495f7700
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #b15cf748
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #dee9e9
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #17141b
editorGroupHeader.tabsBackground #161418
editorGutter.addedBackground #587c0c
editorGutter.background #17141b
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #1a1721
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground1 #17141b
editorIndentGuide.background1 #17141b
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #dee9e9
editorLineNumber.foreground #858585
editorLink.activeForeground #e058dd
editorMarkerNavigation.background #1a1721
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #8d58ca
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #1a1721
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #8d58ca
editorSuggestWidget.selectedBackground #2f2838
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #85858552
editorWidget.background #2f2838
editorWidget.foreground #cccccc
editorWidget.resizeBorder #8d58ca
focusBorder #8d58ca
foreground #cccccc
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 #cccccc
input.background #2f2838
input.border #8d58ca
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #8d58ca
inputOption.activeForeground #ffffff
keybindingLabel.background #3c3c3c
list.activeSelectionBackground #2f2838
list.activeSelectionForeground #cecfd3
list.dropBackground #2f2838
list.filterMatchBorder #2f2838
list.focusBackground #2f2838
list.focusForeground #cecfd3
list.focusHighlightForeground #cecfd3
list.highlightForeground #cecfd3
list.hoverBackground #2f2838
list.hoverForeground #cccccc
list.inactiveSelectionBackground #2f2838
list.inactiveSelectionForeground #cecfd3
listFilterWidget.background #2f2838
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #5e447b
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #5e447b
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #17141b
minimap.errorHighlight #f48771
minimap.findMatchHighlight #f5da0048
minimap.selectionHighlight #2f2838
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #17141b
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #8d58ca
peekViewEditor.background #1a1721
peekViewEditor.matchHighlightBackground #3c1f47a7
peekViewEditor.matchHighlightBorder #ee931e00
peekViewEditorGutter.background #1a1721
peekViewResult.background #1a1721
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #3c1f47a7
peekViewResult.selectionBackground #3c1f47a7
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e0e24
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #8d58ca
progressBar.background #8d58ca
quickInputList.focusBackground #5e447b
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #534566
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #17141b
sideBar.dropBackground #2f2838
sideBar.foreground #c5c1c1
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #2f2838
sideBarSectionHeader.foreground #cecfd3
sideBarTitle.foreground #afacac
statusBar.background #2f2838
statusBar.debuggingBackground #3a2780
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #8d58ca
statusBarItem.remoteForeground #ffffff
tab.activeBackground #2f2838
tab.activeBorder #8d58ca
tab.border #2f2838
tab.inactiveBackground #18181a
tab.unfocusedActiveBorder #2f2838
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.border #80808059
terminal.foreground #cccccc
terminal.selectionBackground #534566
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #9b61dd
titleBar.activeBackground #2f2838
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #2f2838
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #f6ebff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #dee9e9 —
variable.parameter.function.language.special.self.python #91ccf3 —
storage.modifier.lifetime.rust #dee9e9 —
support.function.std.rust #e6b8f8 —
entity.name.lifetime.rust #91ccf3 —
variable.language.rust #f6ebff —
support.constant.edge #dfcfe9 —
constant.other.character-class.regexp #f6ebff —
keyword.operator.quantifier.regexp #e99cc2 —
punctuation.definition.string.begin,punctuation.definition.string.end #9d9ee6 —
variable.parameter.function #dee9e9 —
comment markup.link #a3a2a7 —
markup.changed.diff #91ccf3 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #e6b8f8 —
markup.inserted.diff #9d9ee6 —
markup.deleted.diff #f6ebff —
meta.function.c,meta.function.cpp #f6ebff —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #dee9e9 —
punctuation.separator.key-value #dee9e9 —
keyword.operator.expression.import #e6b8f8 —
support.constant.math #91ccf3 —
support.constant.property.math #e99cc2 —
variable.other.constant #91ccf3 —
storage.type.annotation.java, storage.type.object.array.java #91ccf3 —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #dee9e9 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #91ccf3 —
keyword.operator.instanceof.java #dfcfe9 —
meta.definition.variable.name.java #f6ebff —
keyword.operator.logical #d5d2dd —
keyword.operator.bitwise #d5d2dd —
keyword.operator.channel #d5d2dd —
support.constant.property-value.scss,support.constant.property-value.css #e99cc2 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #d5d2dd —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #e99cc2 —
punctuation.separator.list.comma.css #dee9e9 —
support.constant.color.w3c-standard-color-name.css #e99cc2 —
support.type.vendored.property-name.css #d5d2dd —
support.module.node,support.type.object.module,support.module.node #91ccf3 —
entity.name.type.module #91ccf3 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #f6ebff —
support.constant.json #e99cc2 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #dfcfe9 —
support.type.object.console #f6ebff —
support.variable.property.process #e99cc2 —
entity.name.function,support.function.console #e6b8f8 —
keyword.operator.misc.rust #dee9e9 —
keyword.operator.sigil.rust #dfcfe9 —
keyword.operator.delete #dfcfe9 —
support.type.object.dom #d5d2dd —
support.variable.dom,support.variable.property.dom #f6ebff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #d5d2dd —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #dfcfe9 —
punctuation.separator.delimiter #dee9e9 —
punctuation.separator.c,punctuation.separator.cpp #dfcfe9 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #d5d2dd —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #dfcfe9 —
variable.parameter.function.language.python #e99cc2 —
support.type.python #d5d2dd —
keyword.operator.logical.python #dfcfe9 —
variable.parameter.function.python #e99cc2 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #dee9e9 —
meta.function-call.generic.python #e6b8f8 —
constant.character.format.placeholder.other.python #e99cc2 —
keyword.operator.assignment.compound #dfcfe9 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #d5d2dd —
entity.name.namespace #91ccf3 —
variable.language #91ccf3 —
token.variable.parameter.java #dee9e9 —
import.storage.java #91ccf3 —
token.package.keyword #dfcfe9 —
entity.name.function, meta.require, support.function.any-method, variable.function #e6b8f8 —
entity.name.type.namespace #91ccf3 —
support.class, entity.name.type.class #91ccf3 —
entity.name.class.identifier.namespace.type #91ccf3 —
entity.name.class, variable.other.class.js, variable.other.class.ts #91ccf3 —
variable.other.class.php #f6ebff —
control.elements, keyword.operator.less #e99cc2 —
keyword.other.special-method #e6b8f8 —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #dfcfe9 —
token.storage.type.java #91ccf3 —
support.type.property-name #dee9e9 —
support.constant.property-value #dee9e9 —
support.constant.font-name #e99cc2 —
entity.other.inherited-class #91ccf3 —
constant.other.symbol #d5d2dd —
punctuation.definition.constant #e99cc2 —
entity.other.attribute-name #e99cc2 —
entity.other.attribute-name.id #e6b8f8 normal
entity.other.attribute-name.class.css #e99cc2 normal
markup.heading punctuation.definition.heading, entity.name.section #e6b8f8 —
keyword.other.unit #f6ebff —
markup.bold,todo.bold #e99cc2 —
punctuation.definition.bold #91ccf3 —
markup.italic, punctuation.definition.italic,todo.emphasis #dfcfe9 —
entity.name.section.markdown #f6ebff —
punctuation.definition.heading.markdown #f6ebff —
punctuation.definition.list.begin.markdown #f6ebff —
markup.heading.setext #dee9e9 —
punctuation.definition.bold.markdown #e99cc2 —
markup.inline.raw.markdown #9d9ee6 —
markup.inline.raw.string.markdown #9d9ee6 —
punctuation.definition.list.markdown #f6ebff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #f6ebff —
beginning.punctuation.definition.list.markdown #f6ebff —
punctuation.definition.metadata.markdown #f6ebff —
markup.underline.link.markdown,markup.underline.link.image.markdown #dfcfe9 —
string.other.link.title.markdown,string.other.link.description.markdown #e6b8f8 —
constant.character.escape #d5d2dd —
punctuation.section.embedded, variable.interpolation #f6ebff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #dfcfe9 —
invalid.illegal.bad-ampersand.html #dee9e9 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #f6ebff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #f6ebff —
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 #9d9ee6 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #d5d2dd —
support.type.property-name.json #f6ebff —
support.type.property-name.json punctuation #f6ebff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #dfcfe9 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #dfcfe9 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #91ccf3 —
keyword.operator.error-control.php #dfcfe9 —
keyword.operator.type.php #dfcfe9 —
punctuation.section.array.begin.php #dee9e9 —
punctuation.section.array.end.php #dee9e9 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #91ccf3 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #e6b8f8 —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #dee9e9 —
support.constant.core.rust #e99cc2 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #e99cc2 —
entity.name.goto-label.php,support.other.php #e6b8f8 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #d5d2dd —
keyword.operator.regexp.php #dfcfe9 —
keyword.operator.comparison.php #d5d2dd —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #dfcfe9 —
meta.function.decorator.python #e6b8f8 —
support.token.decorator.python,meta.function.decorator.identifier.python #d5d2dd —
function.parameter #dee9e9 —
function.parameter.ruby, function.parameter.cs #dee9e9 —
constant.language.symbol.ruby #d5d2dd —
inline-color-decoration rgb-value #e99cc2 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #91ccf3 —
block.scope.end,block.scope.begin #dee9e9 —
entity.name.variable.local.cs #f6ebff —
token.error-token #f44747 —
token.debug-token #dfcfe9 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #dfcfe9 —
meta.template.expression #dee9e9 —
keyword.operator.module #dfcfe9 —
support.type.type.flowtype #e6b8f8 —
support.type.primitive #91ccf3 —
meta.property.object #f6ebff —
variable.parameter.function.js #f6ebff —
keyword.other.template.begin #9d9ee6 —
keyword.other.template.end #9d9ee6 —
keyword.other.substitution.begin #9d9ee6 —
keyword.other.substitution.end #9d9ee6 —
keyword.operator.assignment #d5d2dd —
keyword.operator.assignment.go #91ccf3 —
keyword.operator.arithmetic.go, keyword.operator.address.go #dfcfe9 —
entity.name.package.go #91ccf3 —
support.type.prelude.elm #d5d2dd —
support.constant.elm #e99cc2 —
punctuation.quasi.element #dfcfe9 —
constant.character.entity #f6ebff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #d5d2dd —
entity.global.clojure #91ccf3 —
meta.symbol.clojure #f6ebff —
constant.keyword.clojure #d5d2dd —
meta.arguments.coffee, variable.parameter.function.coffee #f6ebff —
meta.scope.prerequisites.makefile #f6ebff —
storage.modifier.import.groovy #91ccf3 —
meta.method.groovy #e6b8f8 —
meta.definition.variable.name.groovy #f6ebff —
meta.definition.class.inherited.classes.groovy #9d9ee6 —
support.variable.semantic.hlsl #91ccf3 —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #dfcfe9 —
text.variable, text.bracketed #f6ebff —
support.type.swift, support.type.vb.asp #91ccf3 —
entity.name.function.xi #91ccf3 —
entity.name.class.xi #d5d2dd —
constant.character.character-class.regexp.xi #f6ebff —
constant.regexp.xi #dfcfe9 —
keyword.control.xi #d5d2dd —
beginning.punctuation.definition.quote.markdown.xi #9d9ee6 —
beginning.punctuation.definition.list.markdown.xi #a3a2a7 —
constant.character.xi #e6b8f8 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #a3a2a7 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #91ccf3 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #f6ebff —
meta.brace.square #dee9e9 —
comment, punctuation.definition.comment #a3a2a7 italic
markup.quote.markdown #a3a2a7 —
punctuation.definition.block.sequence.item.yaml #dee9e9 —
constant.language.symbol.elixir #d5d2dd —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
main*
Button.tsx
31
~/my-project
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
Witch Elaina Color Theme | Coding Theme