jetbrains-phpstorm

Name: jetbrains-phpstorm
Author: PhanTriVietHoang

Publisher: PhanTriVietHoangThemes in package: 1

jetbrains-phpstorm

GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

jetbrains-phpstorm — jetbrains-phpstorm

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#252729
activityBar.foreground#ffffff
activityBar.inactiveForeground#cdd0d5
activityBarBadge.background#3574f0
activityBarBadge.foreground#ffffff
badge.background#4f5156
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#dfe1e5
breadcrumb.background#1e1f22
breadcrumb.focusForeground#dfe1e5
breadcrumb.foreground#9ea0a8
breadcrumbPicker.background#252729
button.background#3574f0
button.border#4f5156
button.foreground#ffffff
button.hoverBackground#538af6
button.secondaryBackground#252729
button.secondaryForeground#dfe1e5
button.secondaryHoverBackground#42454a
commandCenter.activeBackground#42454a
commandCenter.activeBorder#4f5156
commandCenter.activeForeground#dfe1e5
debugIcon.breakpointForeground#db5c5c
diffEditor.insertedLineBackground#3a60834d
diffEditor.insertedTextBackground#5faffa4d
diffEditor.removedLineBackground#6868684d
diffEditor.removedTextBackground#9094944d
diffEditorGutter.insertedLineBackground#283541
diffEditorGutter.removedLineBackground#373737
diffEditorOverview.insertedForeground#43698d
diffEditorOverview.removedForeground#656e76
dropdown.background#393b40
dropdown.border#4f5156
dropdown.foreground#dfe1e5
dropdown.listBackground#252729
editor.background#1e1f22
editor.findMatchBackground#57535338
editor.findMatchBorder#cdd0d538
editor.findMatchHighlightBackground#57535338
editor.findMatchHighlightBorder#155e70
editor.findRangeHighlightBackground#57535338
editor.foldBackground#393b40aa
editor.foreground#bcbec4eb
editor.inactiveSelectionBackground#1e468480
editor.lineHighlightBackground#26282d
editor.linkedEditingBackground#57535338
editor.selectionBackground#214283
editor.selectionHighlightBackground#4cc2854d
editor.snippetFinalTabstopHighlightBackground#282a36
editor.snippetTabstopHighlightBackground#282a36
editor.wordHighlightBackground#717c7625
editor.wordHighlightStrongBackground#717c7625
editorBracketMatch.background#42454a
editorBracketMatch.border#42454a
editorGroup.emptyBackground#1e1f22
editorGroupHeader.noTabsBackground#1e1f22
editorGroupHeader.tabsBackground#1e1f22
editorGutter.addedBackground#549159
editorGutter.background#1e1f22
editorGutter.deletedBackground#868a91
editorGutter.foldingControlForeground#6f737a
editorGutter.modifiedBackground#375fad
editorHoverWidget.highlightForeground#538af6
editorIndentGuide.activeBackground1#64676f
editorIndentGuide.background1#323438
editorInlayHint.foreground#868a90
editorInlayHint.parameterBackground#2d2e32
editorInlayHint.typeBackground#2d2e3200
editorLightBulb.foreground#f2c55c
editorLightBulbAutoFix.foreground#e35252
editorLineNumber.activeForeground#9ea0a8
editorLineNumber.foreground#4b5059
editorLink.activeForeground#538af6
editorOverviewRuler.addedForeground#437151
editorOverviewRuler.currentContentForeground#437151
editorOverviewRuler.deletedForeground#656e76
editorOverviewRuler.errorForeground#d64d5b
editorOverviewRuler.findMatchForeground#16b5dd80
editorOverviewRuler.incomingContentForeground#43698d
editorOverviewRuler.infoForeground#3574f0
editorOverviewRuler.modifiedForeground#43698d
editorOverviewRuler.selectionHighlightForeground#678d7bcc
editorOverviewRuler.warningForeground#c29e49
editorOverviewRuler.wordHighlightForeground#678d7bcc
editorOverviewRuler.wordHighlightStrongForeground#e977a6cc
editorRuler.foreground#393b40
editorSuggestWidget.focusHighlightForeground#538af6
editorSuggestWidget.highlightForeground#538af6
editorSuggestWidget.selectedBackground#2e436e
editorUnnecessaryCode.opacity#000000aa
editorWidget.background#252729
editorWidget.border#42454a
editorWidget.foreground#dfe1e5
focusBorder#00000000
gitDecoration.addedResourceForeground#6fbc6ff5
gitDecoration.conflictingResourceForeground#d88e81f5
gitDecoration.deletedResourceForeground#6c6c6cf5
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#7aa9f3f0
gitDecoration.renamedResourceForeground#7aa9f3f0
gitDecoration.stageDeletedResourceForeground#6c6c6cf5
gitDecoration.stageModifiedResourceForeground#7aa9f3f0
gitDecoration.untrackedResourceForeground#73c991
input.background#1e1f22
input.border#393b40
input.foreground#dfe1e5
inputOption.activeBackground#36538f
inputOption.activeBorder#36538f
inputOption.activeForeground#cdd0d5
list.activeSelectionBackground#2e436e
list.activeSelectionForeground#dfe1e5
list.dropBackground#393b40
list.focusAndSelectionOutline#2e436e
list.focusHighlightForeground#ba9752
list.focusOutline#2487c0fa
list.highlightForeground#ba9752
list.hoverBackground#393b40
list.hoverForeground#ffffff
list.inactiveSelectionBackground#42454a
menu.background#252729
menu.border#42454a
menu.foreground#dfe1e5
menu.separatorBackground#42454a
menubar.selectionBackground#404144
menubar.selectionForeground#dfe1e5
merge.currentContentBackground#3377544d
merge.currentHeaderBackground#6ee0934d
merge.incomingContentBackground#3a60834d
merge.incomingHeaderBackground#5faffa4d
mergeEditor.change.background#2e2626
mergeEditor.change.word.background#45302b
minimap.errorHighlight#d64d5b
minimap.findMatchHighlight#16b5dd80
minimap.infoHighlight#3574f0
minimap.selectionHighlight#1e4684cc
minimap.selectionOccurrenceHighlight#678d7bcc
minimap.warningHighlight#c29e49
minimapGutter.addedBackground#437151
minimapGutter.deletedBackground#656e76
minimapGutter.modifiedBackground#43698d
minimapSlider.activeBackground#535455a6
minimapSlider.background#3f4043a6
minimapSlider.hoverBackground#535455a6
notificationCenterHeader.background#252729
notificationCenterHeader.foreground#dfe1e5
notificationLink.foreground#6a9bfa
notifications.background#393b40
notifications.border#1e1f22
notifications.foreground#dfe1e5
notificationsErrorIcon.foreground#d64d5b
notificationsInfoIcon.foreground#3574f0
notificationsWarningIcon.foreground#c29e49
notificationToast.border#42454a
panel.background#252729
panel.border#1e1f22
panelTitle.activeBorder#3574f0
panelTitle.activeForeground#dfe1e5
panelTitle.inactiveForeground#9ea0a8
peekView.border#42454a
peekViewEditor.background#1e1f22
peekViewEditor.matchHighlightBackground#2d543f
peekViewResult.background#252729
peekViewResult.fileForeground#dfe1e5
peekViewResult.lineForeground#bcbec4eb
peekViewResult.matchHighlightBackground#124957
peekViewResult.selectionBackground#2e436e
peekViewResult.selectionForeground#dfe1e5
peekViewTitle.background#393b40
peekViewTitleDescription.foreground#6f737a
peekViewTitleLabel.foreground#dfe1e5
pickerGroup.border#393b40
pickerGroup.foreground#6a9bfa
problemsErrorIcon.foreground#d64d5b
problemsInfoIcon.foreground#3574f0
problemsWarningIcon.foreground#c29e49
quickInputList.focusBackground#2e436e
scrollbar.shadow#252729
scrollbarSlider.activeBackground#7a7a7a65
scrollbarSlider.background#7a7a7a55
scrollbarSlider.hoverBackground#7a7a7a65
searchEditor.findMatchBackground#2d543f
searchEditor.findMatchBorder#2d543f
settings.checkboxBackground#3574f0
settings.checkboxBorder#3574f0
settings.checkboxForeground#ffffff
settings.dropdownBackground#393b40
settings.dropdownBorder#4f5156
settings.dropdownForeground#dfe1e5
settings.modifiedItemIndicator#2e436e
settings.numberInputBackground#252729
settings.numberInputBorder#4f5156
settings.numberInputForeground#dfe1e5
settings.textInputBackground#252729
settings.textInputBorder#4f5156
settings.textInputForeground#dfe1e5
sideBar.background#252729
sideBar.border#1e1f22
sideBar.foreground#dfe1e5
sideBarSectionHeader.background#252729
sideBarSectionHeader.foreground#dfe1e5
statusBar.background#252729
statusBar.debuggingBackground#1e1f22
statusBar.debuggingBorder#1e1f22
statusBar.debuggingForeground#9ea0a8
statusBar.foreground#9ea0a8
statusBar.noFolderBackground#1e1f22
statusBar.noFolderBorder#1e1f22
statusBar.noFolderForeground#9ea0a8
statusBarItem.activeBackground#42454a
statusBarItem.errorBackground#d64d5b
statusBarItem.errorHoverForeground#ffffff
statusBarItem.warningBackground#c29e49
statusBarItem.warningHoverForeground#ffffff
tab.activeBackground#1e1f22
tab.activeBorder#3574f0
tab.activeForeground#dfe1e5
tab.activeModifiedBorder#3574f0
tab.border#1e1f22
tab.hoverBackground#1e1f22
tab.hoverForeground#dfe1e5
tab.inactiveBackground#1e1f22
tab.inactiveForeground#bbbdc0
tab.inactiveModifiedBorder#5b5d62
tab.unfocusedActiveBackground#1e1f22
tab.unfocusedActiveBorder#5b5d62
tab.unfocusedActiveForeground#bbbdc0
tab.unfocusedActiveModifiedBorder#3574f0
tab.unfocusedHoverBackground#1e1f22
tab.unfocusedHoverForeground#dfe1e5
tab.unfocusedInactiveBackground#1e1f22
tab.unfocusedInactiveForeground#bbbdc0
tab.unfocusedInactiveModifiedBorder#5b5d62
terminal.background#1e1f22
terminal.border#252729
terminal.foreground#bcbec4eb
textLink.activeForeground#538af6
textLink.foreground#6a9bfa
titleBar.activeBackground#252729
titleBar.activeForeground#9d9fa1
titleBar.inactiveBackground#252729
titleBar.inactiveForeground#9d9fa1
welcomePage.background#1e1f22
welcomePage.tileBackground#252729
welcomePage.tileHoverBackground#393b40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, source.astro comment.block, source.astro comment.line.double-slash	#7A7E85	—
comment.block.documentation	#5F826B	italic
comment.block.documentation storage.type	#68A67E	italic
source.css.scss comment	#b9954e	italic
keyword, keyword.operator.new, keyword.operator.expression, storage, storage.type, support.type, constant.language, variable.key.dotenv, entity.name.command, entity.name.tag.yaml, constant.character.escape, punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, markup.table.markdown punctuation.separator.table.markdown, markup.table.markdown punctuation.definition.table.markdown	#CE8C6B
variable.language.this	#9878A1FD	—
punctuation.definition.heading.markdown	#CE8C6B	italic
markup.heading	#C77DBB	italic
keyword.control.at-rule.mixin.scss, punctuation.definition.variable.less, support.other.variable.less	#D0CFFFE5	—
string, punctuation.definition.metadata.markdown, markup.inline.raw, markup.quote, punctuation.separator.key-value.html, punctuation.separator.key-value.xml, source.css support.constant, keyword.other.unit, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp, meta.at-rule.each keyword.control.operator, meta.attribute-selector, constant.language.lf.editorconfig, constant.language.tab.editorconfig, constant.language.crlf.editorconfig, constant.language.space.editorconfig, constant.language.boolean.true.editorconfig, constant.language.charset.encoding.utf-8.editorconfig, constant.numeric.decimal.integer.int.editorconfig, constant.language.boolean.false.editorconfig, constant.language.boolean.off.editorconfig, meta.tag.attributes keyword.operator.assignment, keyword.interpolation.begin.dotenv, keyword.interpolation.end.dotenv	#6AAB73EF	—
constant.numeric, keyword.operator.quantifier.regexp, string.regexp punctuation.definition.string, string.regexp keyword.other	#2cabb8	—
entity.name.type.parameter, meta.type.parameters entity.name.type, meta.type.infer entity.name.type, meta.return.type.ts, meta.return.type.tsx	#507874	—
support.type.property-name, entity.other.attribute-name, meta.property-list variable.css, support.type.vendored.property-name, meta.tag.inline.span.start.html entity.name.function.blade, meta.tag.other.unrecognized.html.derivative entity.name.function.blade	#BABABA	—
meta.tag.custom.start.html entity.name.tag.html, meta.tag.custom.end.html entity.name.tag.html	#2FBAA3FF	—
variable.other.jsdoc, entity.name.type.instance.jsdoc	#abadb3	—
string.other.link, constant.other.reference.link, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown	#59AAE7EA	underline
markup.underline.link	#59AAE7EA	italic
entity.name.function.ts, constant.other.color.rgb-value, meta.block.ts entity.name.function.ts, meta.var.expr.ts entity.name.function.ts, meta.method.declaration.ts meta.block.ts entity.name.function.ts, meta.method.declaration.ts meta.definition.method.ts entity.name.function.ts, meta.field.declaration.ts meta.definition.property.ts entity.name.function.ts, source.vue meta.function-call.js entity.other.attribute-name.html.vue, string.other.link.description.title.markdown	#59AAE7EA	—
variable.parameter.url.css, meta.property-value variable.parameter.url, meta.at-rule.namespace variable.parameter.url	#5c92ff	—
variable.scss	#6d9cbe	—
keyword.control.php, constant.language.php, keyword.other.type.php, keyword.control.for.php, support.constant.core.php, support.function.construct.php, punctuation.section.embedded.end.php, support.function.construct.output.php, punctuation.section.embedded.begin.php, meta.union.type.php punctuation.separator.pipe.php, storage.type.php support.type.php, keyword.operator.logical.php, storage.type.php, storage.modifier.php, storage.type.class.php, keyword.control.case.php, keyword.control.break.php, keyword.operator.type.php, storage.type.function.php, keyword.control.switch.php, storage.modifier.extends.php, constant.character.escape.php, storage.modifier.final.php, keyword.control.while.php, storage.type.trait.php, keyword.control.yield.php, keyword.control.default.php, storage.type.interface.php, keyword.control.import.include.php, storage.modifier.implements.php, keyword.control.exception.catch.php, keyword.control.exception.php, begin.bracket.round.blade.php, end.bracket.round.blade.php, keyword.control.foreach.php, keyword.other.namespace.php, entity.name.function.blade, keyword.control.return.php, keyword.control.else.php, keyword.control.if.php, keyword.other.use.php, keyword.other.new.php	#CE8C6B	—
variable.other.php, variable.other.local.php, variable.other.global.php, variable.other.php.dollar.php, variable.other.global.safer.php, variable.other.php.dollar.bracket.php, punctuation.definition.array.begin.php, punctuation.definition.array.end.php, punctuation.separator.key-value.php, punctuation.definition.variable.php, variable.language.this.php, variable.other.class.php, constant.other.php	#9878A1FD	—
support.constant.std.php, support.constant.ext.php, meta.embedded.inline.phpx support.constant.core.php, constant.other.class.php, constant.enum.php	#9878A1FD	italic
meta.function-call.php, entity.name.function.php, support.function.json.php, support.function.math.php, support.function.array.php, support.function.constructor.php, text.html constant.character.entity.named, meta.function-call.other.twig, meta.function-call.twig, support.function.twig	#59AAE7EA	—
keyword.operator.key.php, keyword.operator.class.php, keyword.operator.ternary.php, keyword.other.array.phpdoc.php, punctuation.section.array.end.php, keyword.operator.return-value.php, punctuation.section.array.begin.php, keyword.operator.null-coalescing.php, meta.use.php support.other.namespace.php, meta.tag.structure entity.name.function.blade, meta.other.type.phpdoc.php keyword.other.type.php, meta.class.php meta.class.body.php support.class.php, text.html.php.blade meta.function.echo.blade source.php, text.html.php.blade meta.function.echo.blade constant.other.php, text.html.php.blade meta.embedded.block.blade meta.function-call.php, text.html.php.blade meta.function.echo.blade source.php entity.name.class.php, text.html.php.blade meta.function.echo.blade support.function.construct.begin.blade, text.html.php.blade meta.embedded.block.blade meta.function-call.php constant.other.php, text.html.php.blade meta.embedded.block.blade meta.function-call.php entity.name.class.php, text.html.php.blade meta.tag.other.unrecognized.html.derivative punctuation.definition.tag.end.html, text.html.php.blade meta.function.echo.blade support.function.construct.end.blade, meta.use.php support.other.namespace.php punctuation.separator.inheritance.php, entity.other.attribute-name.class.css punctuation.definition.entity.css, meta.embedded.inline.phpx punctuation.definition.tag.begin.html, meta.embedded.inline.phpx punctuation.definition.tag.end.html, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, keyword.operator.increment-decrement.php, punctuation.terminator.expression.php, punctuation.separator.list.comma.css, punctuation.separator.delimiter.php, keyword.other.unit.percentage.css, punctuation.terminator.rule.css, keyword.definition.arrow.php, keyword.operator.string.php, source.sql.embedded.php, punctuation.section.tag.twig, punctuation.separator.property.twig, punctuation.definition.parameters.begin.twig, punctuation.definition.parameters.end.twig, punctuation.section.hash.begin.twig, punctuation.section.hash.end.twig, variable.other.twig, source.sql	#BCBEC4	—
support.other.namespace.php, support.other.namespace.php punctuation.separator.inheritance.php, support.class.builtin.php punctuation.separator.inheritance.php	#6F737A	—
invalid.deprecated.entity.other.attribute-name.html	#BABABA	strikethrough
keyword.other.phpdoc.php	#6AAB73EB	italic
comment.block.documentation meta.other.type.phpdoc.php	#BCBEC4	italic
support.function.string.sql, support.function.mathematical.sql, support.function.expression.sql, support.function.aggregate.sql	#59AAE7EA	—
constant.other.table-name.sql, support.type.property-name.json, variable.other.property.php, variable.other.property.twig	#C77DBB	—
storage.type.js, storage.type.ts, keyword.control.from.js, keyword.control.from.ts, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.loop.js, keyword.control.loop.ts, keyword.operator.new.js, keyword.operator.new.ts, storage.type.function.js, storage.type.function.ts, keyword.control.import.js, keyword.control.import.ts, constant.language.null.js, constant.language.null.ts, keyword.control.export.js, keyword.control.export.ts, storage.modifier.async.js, storage.modifier.async.ts, keyword.control.switch.js, keyword.control.switch.ts, variable.language.this.js, variable.language.this.ts, keyword.control.trycatch.js, keyword.control.trycatch.ts, keyword.generator.asterisk.js, keyword.generator.asterisk.ts, constant.language.undefined.js, constant.language.undefined.ts, keyword.control.conditional.js, keyword.control.conditional.ts, constant.language.boolean.true.js, constant.language.boolean.true.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.in.js, keyword.operator.expression.in.ts, constant.language.boolean.false.js, constant.language.boolean.false.ts	#CE8C6B	—
entity.name.function.js, entity.name.function.ts, entity.name.function.jsx, entity.name.function.tsx, variable.other.object.tsx, constant.character.entity.tsx	#59AAE7EA	—
variable.language.this.ts, entity.name.section.group-title.editorconfig, source.svelte punctuation.definition.keyword.svelte, source.svelte punctuation.section.embedded.end.svelte, source.svelte punctuation.section.embedded.begin.svelte, source.svelte punctuation.definition.block.begin.svelte, source.svelte punctuation.definition.block.end.svelte, source.svelte keyword.control.conditional.svelte, source.svelte keyword.control.svelte, entity.name.function.stylus, source.astro comment	#CE8C6B	—
variable.other.constant.js, variable.other.constant.ts, meta.definition.variable.js, meta.definition.variable.ts, meta.object.member meta.function-call variable.other.constant.object, meta.export.default.ts variable.other.object.ts	#C77DBB	italic
meta.object-literal.key, support.variable.property, variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.other.property.js.jsx, variable.other.object.property.js, variable.other.object.property.ts, variable.other.object.property.jsx, variable.other.object.property.tsx, variable.other.object.property.js.jsx, keyword.other.definition.root.editorconfig, keyword.other.definition.custom.editorconfig, keyword.other.definition.charset.editorconfig, keyword.other.definition.tab_width.editorconfig, keyword.other.definition.end_of_line.editorconfig, keyword.other.definition.indent_size.editorconfig, keyword.other.definition.indent_style.editorconfig, keyword.other.definition.max_line_length.editorconfig, keyword.other.definition.insert_final_newline.editorconfig, keyword.other.definition.trim_trailing_whitespace.editorconfig, meta.embedded.expression.tsx variable.other.constant.object.tsx, meta.embedded.expression.tsx variable.other.constant.property.tsx, source.ts.embedded.html.vue variable.other.object.property.ts, meta.method.declaration.js variable.other.property.js, meta.method.declaration.ts variable.other.property.ts, text.html.embedded.ts variable.other.readwrite.ts, text.html.embedded.js variable.other.property.js, text.html.embedded.ts variable.other.property.ts, string.template.js variable.other.property.js, string.template.ts variable.other.property.ts, meta.arrow.tsx variable.other.property.tsx, meta.arrow.js variable.other.property.js, meta.arrow.ts variable.other.property.ts, variable.other.readwrite.alias.ts, variable.object.property.tsx, variable.object.property.js, variable.object.property.ts, meta.object-literal.key.ts	#C77DBB	—
meta.brace.square, keyword.operator, keyword.operator.spread, keyword.generator.asterisk, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.arithmetic, storage.type.function.arrow, keyword.operator.logical, keyword.operator.optional, punctuation.separator.key-value, keyword.operator.increment, keyword.operator.decrement, keyword.operator.relational, keyword.operator.ternary, string.unquoted.plain.out.yaml, constant.numeric.float.yaml, punctuation.definition.character-class.regexp	#BCBEC4	—
meta.brace.round.js, meta.brace.round.ts, variable.other.object.js, variable.other.object.ts, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, support.type.object.module.js, support.type.object.module.ts, punctuation.separator.comma.js, punctuation.separator.comma.ts, variable.other.readwrite.js.jsx, punctuation.accessor.optional.js, punctuation.accessor.optional.ts, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, source.ts variable.other.object.ts, constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx, source.js.embedded.php meta.brace.round.js, source.js.embedded.php meta.brace.round.ts, source.js.embedded.php meta.jsx.children.js, source.js.embedded.php meta.jsx.children.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.ts, string.template.js variable.other.readwrite.js, string.template.ts variable.other.readwrite.ts, meta.function-call.js variable.other.object.js, meta.function-call.js variable.other.object.ts, meta.function-call.tsx variable.other.object.tsx, text.html.embedded.js variable.other.readwrite.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, meta.export.default.ts variable.other.readwrite.ts, source.js.embedded.php punctuation.definition.block.js, source.js.embedded.php punctuation.definition.block.ts, meta.method.declaration.ts variable.other.readwrite.ts, meta.definition.variable.js variable.other.constant.js, meta.definition.variable.ts variable.other.constant.ts, source.js.embedded.php punctuation.terminator.statement.js, source.js.embedded.php punctuation.terminator.statement.ts, source.js.embedded.php punctuation.definition.parameters.end.js, source.js.embedded.php punctuation.definition.parameters.end.ts, source.js.embedded.php punctuation.definition.parameters.begin.js, source.js.embedded.php punctuation.definition.parameters.begin.ts, meta.objectliteral.js meta.object.member.js variable.other.object.js, meta.objectliteral.ts meta.object.member.ts variable.other.object.ts, meta.objectliteral.tsx meta.object.member.tsx variable.other.object.tsx, meta.template.expression.js source.js.embedded.expression meta.brace.round.js, meta.template.expression.ts source.js.embedded.expression meta.brace.round.ts, meta.class.ts meta.field.declaration.ts meta.type.annotation.ts entity.name.type.module.ts, string.template.ts meta.template.expression.ts punctuation.definition.template-expression.begin.ts, string.template.ts meta.template.expression.ts punctuation.definition.template-expression.end.ts, meta.method.declaration.ts meta.block.ts new.expr.ts meta.function-call.ts entity.name.function.ts, variable.other.constant.property variable.other.object.property variable.other.property variable.other.object entity.name.constant entity.name.type.module, text.html.embedded.php punctuation.section.property-list.begin.bracket.curly.css, text.html.embedded.php punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.brace.bracket.curly.begin.editorconfig, punctuation.definition.brace.bracket.curly.end.editorconfig, string.template.js variable.other.constant.property.js, string.template.ts variable.other.constant.property.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, punctuation.separator.delimiter.comma.editorconfig, string.quoted.double.php text.html.embedded.php, string.quoted.single.php text.html.embedded.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, string.quoted.double.js text.html.embedded.js, string.quoted.single.js text.html.embedded.js, string.quoted.double.js text.xml.embedded.js, string.quoted.single.js text.xml.embedded.js, punctuation.definition.parameters.begin.js.jsx, punctuation.definition.parameters.end.js.jsx, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.js, punctuation.definition.parameters.end.ts, punctuation.definition.parameters.end.tsx, string.template.js punctuation.accessor.js, string.template.js text.html.embedded.js, string.template.js text.xml.embedded.js, punctuation.separator.parameter.js.jsx, punctuation.separator.parameter.tsx, punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.accessor.optional.tsx, punctuation.separator.comma.tsx, punctuation.accessor.js.jsx, punctuation.accessor.tsx, selector.operator.js, selector.operator.ts, entity.name.type.tsx, meta.brace.round.tsx, meta.brace.round.ts, entity.name.type.ts, support.type.ts, support.type.tsx	#BCBEC4
meta.tag.start, entity.name.tag, entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, variable.parameter.misc.css, variable.parameter.keyframe-list.css, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.scss, entity.other.attribute-name.css, variable.parameter.tailwind.tailwind, variable.parameter.layer.tailwind, entity.other.attribute-name.attribute.scss, meta.at-rule.each.scss keyword.control.operator, meta.property-list.scss meta.at-rule.extend.scss punctuation.definition.entity.css, text.html.php.blade meta.tag.other.unrecognized.html.derivative punctuation.definition.tag.end.html, source.vue text.html.derivative meta.template-tag.start entity.name.tag.template.html.vue, source.vue text.html.derivative meta.template-tag.end entity.name.tag.template.html.vue, entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity, entity.other.attribute-name.parent-selector-suffix.stylus, entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.css punctuation.definition.entity, meta.property-list.less entity.other.attribute-name.parent.less, meta.property-list.less punctuation.definition.entity.less, entity.other.keyframe-offset, punctuation.definition.tag, storage.type.annotation, meta.at-rule.media keyword.operator, meta.at-rule.media keyword.control.operator, meta.attribute-selector string.unquoted.attribute-value, meta.property-value variable.argument.css, constant.other.scss, support.constant.parity.css, source.css entity.name.function, source.css support.type.map.key, source.css support.constant.language-range, support.function.gradient.css, source.css support.function, support.function.misc.css, meta.selector.stylus	#D5B778	—
selector.text.js, selector.text.ts	#D5B982F0	—
meta.attribute.php, punctuation.decorator, meta.decorator entity.name.function, constant.other.character-class.regexp, meta.attribute.php support.attribute.php, meta.attribute.php support.other.namespace.php, meta.attribute.php support.other.namespace.php punctuation.separator.inheritance.php, meta.attribute.php entity.name.attribute.php, meta.attribute.php support.class.php	#B3AE60F2	—
keyword.control.loop.vue, keyword.control.conditional.vue, punctuation.separator.key-value.html.vue, source.vue variable.other.readwrite.js, source.vue variable.other.readwrite.ts, source.vue variable.other.constant.js, source.vue variable.other.constant.ts, source.vue variable.other.object.ts, source.vue variable.other.readwrite.alias.js, source.vue variable.other.readwrite.alias.ts, meta.attribute.php entity.name.variable.parameter.php, meta.embedded.block.php meta.attribute.php support.class.php, entity.other.attribute-name.class.less punctuation.definition.entity.less, source.vue meta.var.expr.js meta.tag.attributes.js entity.other.attribute-name.html.vue, source.stylus meta.property-value.css meta.function.stylus keyword.other.unit.css, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, meta.function-call.less punctuation.definition.entity.less, meta.property-list.scss punctuation.definition.entity.css, meta.function-call.less keyword.other.unit.less, source.stylus punctuation.definition.entity.css, meta.property-list.css meta.selector.stylus, source.astro variable.other.object.tsx, storage.modifier.reference.php	#BCBEC4	—
punctuation.separator.colon.php, entity.name.variable.parameter.php, meta.attribute.php entity.name.variable.parameter.php	#567CDAF5	—
meta.definition.variable.scss, punctuation.separator.key-value.html.vue, punctuation.definition.string.end.html.vue, punctuation.definition.string.begin.html.vue, source.stylus support.constant.property-value.css, text.html.php.blade invalid.illegal.character-not-allowed-here.html	#6AAB73EF	—
entity.name.tag.style.html.vue, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, source.vue invalid.illegal.unrecognized-tag.html, source.vue text.html.derivative meta.tag.other.unrecognized.html.derivative entity.name.tag.html, source.vue text.html.derivative meta.tag.structure.slot.start.html entity.name.tag.html, source.vue text.html.derivative meta.tag.structure.slot.end.html entity.name.tag.html, source.vue text.html.derivative meta.tag.custom.start.html entity.name.tag.html, source.vue text.html.derivative meta.tag.custom.end.html entity.name.tag.html, meta.tag.js entity.name.tag.js support.class.component.js, meta.tag.js entity.name.tag.js support.class.component.ts, meta.jsx.children.js support.class.component.js, meta.jsx.children.js support.class.component.ts, source.svelte support.class.component.svelte, source.astro support.class.component.astro, support.class.component.js.jsx, support.class.component.tsx, support.class.component.ts, support.class.component.js, selector.number.js, selector.number.ts	#29B9A0EE	—
source.ts variable.other.constant.ts, markup.fenced_code.block.markdown fenced_code.block.language.markdown, source.vue entity.other.attribute-name.html.vue, text.html entity.other.ng-binding-name	#C77DBB	—
keyword.other.important.css	#be8767	bold
invalid	#f75464	—
markup.italic	—	italic
markup.bold	—	bold
markup.strikethrough	—	strikethrough

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}