Wakanda Forever

Name: Wakanda Forever
Author: Dharam Dhurandhar

Publisher: Dharam DhurandharThemes in package: 3

An intelligent theme based on wakanda's panther's color scheme

Open in VS Code GitHub

Color themes

VS Code preview

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

Wakanda Forever — Wakana Forever Soft Theme

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...

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#1c1e26
activityBar.foreground#9637FF
activityBarBadge.background#8779b6
activityBarBadge.foreground#0D041F
badge.background#8600f38c
badge.foreground#CAC8FF
breadcrumb.activeSelectionForeground#CAC8FF
breadcrumb.background#1c1e26
breadcrumb.focusForeground#8264DE
breadcrumb.foreground#ababac
breadcrumbPicker.background#0D041F
button.background#CAC8FF50
contrastBorder#000000be
debugToolBar.background#0D041F
diffEditor.insertedTextBackground#27AF8115
diffEditor.removedTextBackground#8279FF20
dropdown.background#0D041F
dropdown.border#DDC7FF10
editor.background#1c1e26
editor.findMatchBackground#0D041F
editor.findMatchBorder#CAC8FF
editor.findMatchHighlightBackground#CAC8FF93
editor.findMatchHighlightBorder#DDC7FF30
editor.foreground#ffffff
editor.lineHighlightBackground#0D041F50
editor.selectionBackground#9071FF30
editor.selectionHighlightBackground#CAC8FF6b
editor.selectionHighlightBorder#9071FFf0
editorBracketMatch.background#dedae72d
editorBracketMatch.border#9993FF7f
editorCursor.foreground#9993FF
editorError.foreground#8279FF70
editorGroup.border#0D041F30
editorGroupHeader.tabsBackground#0D041F
editorGutter.addedBackground#27AF8160
editorGutter.deletedBackground#8279FF60
editorGutter.modifiedBackground#9071FF60
editorHoverWidget.background#0D041F
editorHoverWidget.border#DDC7FF10
editorIndentGuide.activeBackground#37294A
editorIndentGuide.background#37294A70
editorInfo.foreground#9071FF70
editorLineNumber.activeForeground#9071FF
editorLineNumber.foreground#CAC8FFc0
editorLink.activeForeground#8264DE
editorMarkerNavigation.background#8264DE05
editorOverviewRuler.border#0D041F
editorOverviewRuler.errorForeground#8279FF40
editorOverviewRuler.findMatchForeground#CAC8FF
editorOverviewRuler.infoForeground#9071FF40
editorOverviewRuler.warningForeground#9993FF70
editorRuler.foreground#37294A
editorSuggestWidget.background#0D041F
editorSuggestWidget.border#DDC7FF10
editorSuggestWidget.foreground#8264DE
editorSuggestWidget.highlightForeground#9993FF
editorSuggestWidget.selectedBackground#CAC8FF20
editorWarning.foreground#1fc58e
editorWhitespace.foreground#8264DE40
editorWidget.background#0D041F
editorWidget.border#9993FF
editorWidget.resizeBorder#CAC8FF
extensionButton.prominentBackground#24d49a90
extensionButton.prominentHoverBackground#8279FF
focusBorder#DDC7FF00
gitDecoration.conflictingResourceForeground#9993FF
gitDecoration.deletedResourceForeground#8279FF
gitDecoration.ignoredResourceForeground#CAC8FF
gitDecoration.modifiedResourceForeground#9070FF
gitDecoration.untrackedResourceForeground#9071FF
input.background#3D047A
input.border#DDC7FF10
input.foreground#8264DE
input.placeholderForeground#8264DE60
inputOption.activeBackground#8264DE30
inputOption.activeBorder#8264DE30
inputValidation.errorBorder#8279FF50
inputValidation.infoBorder#9071FF50
inputValidation.warningBorder#9993FF50
list.activeSelectionBackground#1c1e26
list.activeSelectionForeground#CAC8FF
list.focusBackground#3D047A
list.focusForeground#9071FF
list.highlightForeground#CAC8FF
list.hoverBackground#161415
list.hoverForeground#DDC7FF
list.inactiveSelectionBackground#1c1e26
list.inactiveSelectionForeground#CAC8FF
list.warningForeground#9993FF
listFilterWidget.background#0D041F30
listFilterWidget.noMatchesOutline#0D041F30
listFilterWidget.outline#0D041F30
menu.background#0D041Ff8
menu.border#CAC8FF50
menu.foreground#8264DE
menu.selectionBackground#3D047A
menu.selectionBorder#0D041F30
menu.selectionForeground#e1c7ff
menu.separatorBackground#8264DE
menubar.selectionBackground#3D047A
menubar.selectionBorder#CAC8FF50
menubar.selectionForeground#ffffff
minimap.background#131113
minimapGutter.addedBackground#8279FF
minimapGutter.deletedBackground#9993FF
minimapGutter.modifiedBackground#27AF81
minimapSlider.activeBackground#27AF81b0
minimapSlider.background#27AF8180
minimapSlider.hoverBackground#27AF81a0
notificationLink.foreground#CAC8FF
notifications.background#0D041F
notifications.foreground#8264DE
panel.background#060507
panel.border#16083160
panelTitle.activeBorder#CAC8FF
panelTitle.activeForeground#DDC7FF
panelTitle.inactiveForeground#8264DE
peekView.border#0D041F30
peekViewEditor.background#8264DE05
peekViewEditor.matchHighlightBackground#CAC8FF50
peekViewEditorGutter.background#8264DE05
peekViewResult.background#8264DE05
peekViewResult.matchHighlightBackground#CAC8FF50
peekViewResult.selectionBackground#CAC8FF70
peekViewTitle.background#8264DE05
peekViewTitleDescription.foreground#8264DE60
pickerGroup.foreground#CAC8FF
progressBar.background#CAC8FF
scrollbar.shadow#0D041F00
scrollbarSlider.activeBackground#CAC8FFcc
scrollbarSlider.background#CAC8FFbb
scrollbarSlider.hoverBackground#CAC8FFee
selection.background#CAC8FF
settings.checkboxBackground#0D041F
settings.checkboxForeground#8264DE
settings.dropdownBackground#0D041F
settings.dropdownForeground#8264DE
settings.headerForeground#CAC8FF
settings.modifiedItemIndicator#CAC8FF
settings.numberInputBackground#0D041F
settings.numberInputForeground#8264DE
settings.textInputBackground#0D041F
settings.textInputForeground#8264DE
sideBar.background#000000c4
sideBar.border#0d098850
sideBar.foreground#9071FF
sideBarSectionHeader.background#0D041F
sideBarSectionHeader.border#0D041F60
sideBarSectionHeader.foreground#9071FF
sideBarTitle.foreground#8264DE
statusBar.background#1b122b
statusBar.border#0D041F60
statusBar.debuggingBackground#9993FF
statusBar.debuggingForeground#DDC7FF
statusBar.foreground#A56BFF
statusBar.noFolderBackground#0D041F
statusBarItem.hoverBackground#CAC8FF20
statusBarItem.remoteBackground#CAC8FF
statusBarItem.remoteForeground#0D041F
tab.activeBackground#01010250
tab.activeBorder#690cff
tab.activeForeground#efe6fc
tab.activeModifiedBorder#CAC8FF
tab.border#0D041F
tab.inactiveBackground#01093820
tab.inactiveForeground#8d6ed4af
tab.unfocusedActiveBackground#CAC8FF40
tab.unfocusedActiveBorder#CAC8FF
tab.unfocusedActiveForeground#8264DE
tab.unfocusedInactiveBackground#CAC8FF10
tab.unfocusedInactiveForeground#8264DE7f
terminal.ansiBlack#0D041F
terminal.ansiBlue#19024f
terminal.ansiBrightBlack#262633
terminal.ansiBrightBlue#9071FF
terminal.ansiBrightCyan#0039FF
terminal.ansiBrightGreen#27AF81
terminal.ansiBrightMagenta#ff93ae
terminal.ansiBrightRed#ff7979
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fbff10
terminal.ansiCyan#0039FF
terminal.ansiGreen#27AF81
terminal.ansiMagenta#9993FF
terminal.ansiRed#8279FF
terminal.ansiWhite#ffffff
terminal.ansiYellow#9993FF
terminalCursor.background#3f3b47
terminalCursor.foreground#9993FF
textLink.activeForeground#8264DE
textLink.foreground#edc8ff
titleBar.activeBackground#0D041F
titleBar.activeForeground#8264DE
titleBar.border#0D041F60
titleBar.inactiveBackground#0D041F
titleBar.inactiveForeground#50379e
tree.indentGuidesStroke#37294A
widget.shadow#0D041F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.regexp	#06acff	—
text.html.mt meta.tag.any.html entity.other.attribute-name.html, source.css constant.numeric.css, source.postcss constant.numeric.css, source.js entity.name, source.css meta.function-call.css support.function.color.css, source.css meta.function-call.css support.function.var.css, source.css meta.function-call.css support.function.url.css, source.css meta.function-call.css support.function.gradient.css, source.css meta.function-call.css support.function.calc.css, source.css meta.function-call.css support.function.attr.css, source.css meta.function-call.css support.function.filter.css, source.css meta.function-call.css support.function.timing.css, source.css meta.function-call.css support.function.shape.css, source.css meta.rule.css support.type.property-name.css, source.js meta.object-literal.js meta.object-literal.key.js, source.css support.constant, source.css meta.function-call.css support.function.transform.css, source.css constant.other.color.rgb-value.css, source.css meta.rule.css invalid.deprecated.css, source.ts meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, source.ts support.function.ts, source.ts support.class.console.ts, source.ts support.function.console.ts, source.ts support.variable.property.dom.ts, source.ts meta.definition.method.ts entity.name.function.ts, source.ts meta.object-literal.key.ts, source.ts support.function.dom.ts, source.ts meta.var.expr.ts meta.var-single-variable.expr.ts meta.definition.variable.ts variable.other.constant.ts, text.html meta.tag.block.any.html meta.attribute-with-value.style.html source.css meta.declaration-list.css, support.type.property-name.css, source.css meta.property-list.css meta.property-name.css support.type.property-name.css, source.css meta.property-list.css meta.property-value.css punctuation.section.function.begin.bracket.round.css, source.css meta.property-list.css meta.property-value.css punctuation.section.function.end.bracket.round.css, source.css meta.at-rule.keyframes.body.css, source.css constant.other.color.rgb-value.hex.css, source.css punctuation.section.function.css, source.css punctuation.section.function.scss, source.css support.function, source.css entity.other.attribute-name.scss, source.css meta.at-rule.keyframes.scss, markup.fenced_code.block.markdown, variable.other.object.ts, variable.other.object.property.ts, variable.other.readwrite.alias.ts, variable.object.property.ts, variable.language.this.ts, support.constant.json.ts, keyword.operator.new.ts, variable.other.constant.js, text.html.vue-html, constant.numeric.json.comments, constant.numeric.json, text.html.markdown markup.list.unnumbered.markdown meta.paragraph.markdown, constant.numeric, constant.language, storage, support.class, support.type, entity.name, source.css meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css, source.postcss meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css, source.js meta.delimiter.method.period.js, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, entity.name.tag.block.any.html, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, source.css meta.rule.css punctuation.definition.entity.pseudo-element.css, punctuation.separator.dictionary.pair.json, source.postcss keyword.control.at-rule.css.postcss, source.js meta.export.js meta.object-literal.js punctuation.separator.comma.js, source.js meta.export.js meta.block.js meta.function-call.js meta.group.js, source.js string.template.js punctuation.definition.string.template.begin.js, source.js string.template.js punctuation.definition.string.template.end.js, source.js meta.group.braces.round.js meta.jsx.js meta.tag.jsx entity.name.tag.jsx, source.ts constant.numeric.decimal.ts, support.function.json.ts, support.function, entity.name.type.instance.jsdoc, entity.name.function.js, text.html.markdown markup.bold.markdown, text.html.markdown markup.italic.markdown, text.html.markdown meta.paragraph.markdown meta.link.inline.markdown string.other.link.title.markdown	#ffffff	—
source.css meta.function-call, source.css punctuation.terminator.rule.css, source.css punctuation.separator, source.css punctuation.section.property-list, source.postcss meta.function-call, source.postcss punctuation.terminator.rule.css, source.postcss punctuation.separator, source.postcss punctuation.section.property-list, punctuation.definition.tag.begin, punctuation.definition.tag.end, text.html.mt meta.tag.block.any.html punctuation.definition.tag.html, text.html.mt meta.tag.inline.any.html punctuation.definition.tag.html, text.html.mt meta.tag.any.html punctuation.definition.tag.html, source.js meta.export.js meta.block.js meta.for.js meta.group.js punctuation.section.group.js, source.js meta.for.js meta.group.js punctuation.section.group.js, punctuation.separator, punctuation.section.braces.begin, punctuation.section.braces.end, meta.function.js punctuation.definition.parameters.begin.js, punctuation.terminator, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.dictionary.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.array.end.json, punctuation.definition.array.begin.json, source.js punctuation.section.group.begin, source.js punctuation.section.group.end, source.ts punctuation.section.group.begin, source.ts punctuation.section.group.end, punctuation.definition.tag.html, meta.tag.block.any.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, meta.tag.inline.any.html, meta.tag.metadata.script.html, args.mixin.jade, constant.name.attribute.tag.jade, text.jade meta.tag.other, source.js punctuation.section.brackets.begin, source.js punctuation.section.brackets.end, source.ts punctuation.section.brackets.begin, source.ts punctuation.section.brackets.end, punctuation.section.block.begin, punctuation.section.block.end, source.ts meta.import.ts meta.block.ts punctuation.definition.block.ts, source.js meta.brace, source.postcss meta.property-list, source.postcss punctuation.terminator, source.css meta.selector.css meta.attribute-selector.css punctuation.definition.entity.css, source.css meta.rule.css punctuation.section.declaration-list.begin.css, source.css meta.rule.css punctuation.section.declaration-list.end.css, source.css meta.rule.css punctuation.section.at-media.begin.css, source.css meta.rule.css punctuation.section.at-media.end.css, source.css meta.rule.css punctuation.section.function.begin.css, source.css meta.rule.css punctuation.section.function.end.css, source.css meta.rule.css punctuation.section.media-feature.begin.css, source.css meta.rule.css punctuation.section.media-feature.end.css, source.css meta.rule.css punctuation.section.attribute-selector.begin.css, source.css meta.rule.css punctuation.section.attribute-selector.end.css, source.css meta.at-rule.media.css punctuation.section.media-feature.begin.css, source.css meta.at-rule.media.css punctuation.section.media-feature.end.css, source.css meta.at-rule.media.css punctuation.section.at-media.begin.css, source.css meta.at-rule.media.css punctuation.section.at-media.end.css, source.ts meta.decorator.ts meta.brace.round.ts, source.ts punctuation.definition.block.ts, source.ts meta.method.declaration.ts, source.ts meta.array.literal.ts meta.brace.square.ts, source.ts meta.var.expr.ts meta.brace.round.ts, source.ts meta.arrow.ts meta.parameters.ts punctuation.definition.parameters.begin.ts, source.ts meta.arrow.ts meta.parameters.ts punctuation.definition.parameters.end.ts, source.js meta.group.braces.round.js meta.jsx.js meta.embedded.expression.jsx punctuation.section.embedded.begin.jsx, source.js meta.group.braces.round.js meta.jsx.js meta.embedded.expression.jsx punctuation.section.embedded.end.jsx, source.js meta.function.arrow.js punctuation.definition.parameters.begin.js, source.js meta.function.arrow.js punctuation.definition.parameters.end.js, punctuation.definition.markdown, punctuation.definition.raw.markdown, source.css punctuation.section.keyframes.begin.bracket.curly.css, source.css punctuation.section.keyframes.end.bracket.curly.css, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, meta.brace.round.js, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, meta.brace.round.ts, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.definition.block.js, punctuation.definition.binding-pattern.object.js, text.html.markdown meta.paragraph.markdown meta.link.inline.markdown punctuation.definition.metadata.markdown, text.html.markdown meta.paragraph.markdown meta.image.inline.markdown punctuation.definition.metadata.markdown, text.html.markdown punctuation.definition.bold.markdown, text.html.markdown punctuation.definition.italic.markdown, text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue meta.array.literal.js meta.brace.square.js	#77f722	—
comment, constant.language, storage - storage.type.function.arrow.js, source.js keyword - keyword.operator, source.js variable.language, entity.name.tag, entity.other.attribute-name - entity.other.attribute-name.html - entity.other.attribute-name.localname.xml, support.function, support.class, source.css keyword.other.unit.css, source.js support.type, source.js support.constant.dom.js, source.js keyword.operator.word.new.js, source.js meta.export.js meta.block.js meta.function-call.method.js variable.function.js, source.js meta.object-literal.js meta.object-literal.key.js, source.js meta.property.object.js, source.css support.constant, source.ts keyword.control.flow.ts, source.ts meta.object-literal.key.ts, source.ts meta.import.ts keyword.control.import.ts, source.ts meta.import.ts keyword.control.from.ts, source.ts meta.interface.ts meta.definition.property.ts, source.css support.type.vendor-prefix.css, source.ts variable.language.this.ts, source.ts keyword.control.export.ts, support.type.property-name.json, text.html.markdown markup.italic.markdown	—	italic
comment, text.html.markdown meta.paragraph.markdown meta.link.inline.markdown, markup.underline.link.image.markdown text.html.markdown meta.paragraph.markdown meta.image.inline.markdown, text.html.markdown meta.paragraph.markdown meta.image.inline.markdown markup.underline.link.image.markdown	#a4a5ac	—
keyword	#7742f5	—
storage, source.css keyword, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, source.postcss keyword, source.js punctuation.accessor, source.jade keyword, source.js meta.export.js meta.class.js meta.block.js meta.function.declaration.js entity.name.function.js, source.js meta.export.js meta.class.js meta.block.js meta.function.declaration.js entity.name.function.constructor.js, source.js keyword.operator.ternary.js, source.js meta.object-literal.js punctuation.separator.key-value.js, meta.structure.dictionary.json, source.css support.type.vendor-prefix.css, source.css keyword.other.unit.css, source.css meta.rule.css punctuation.definition.entity.pseudo-class.css, source.css meta.property-value.css meta.function-call.css meta.group.css support.keyword.repetitions.css, source.css constant.other.color.rgb-value.css punctuation.definition.constant.css, source.postcss meta.property-list.css meta.property-value.css, source.css entity.other.pseudo-class.css punctuation.definition.entity.css, source.css meta.selector.css meta.function.pseudo-class.not-matches-has.css, source.css meta.rule.css support.type.property-name.custom.css, source.css meta.selector.css keyword.operator.combinator.css, punctuation.separator.dictionary.key-value.json, source.css punctuation.definition.entity.css, source.yaml punctuation.separator, source.js keyword.operator.logical.js, source.js meta.export.js meta.object-literal.js punctuation.separator.comma.js, source.js.postcss meta.group.braces.curly meta.group.braces.curly, source.js meta.import.js string.quoted.single.js, source.js meta.sequence.js punctuation.separator.comma.js, source.js punctuation.separator.parameter.function.js, source.js meta.function-call.method.js punctuation.separator.comma.js, source.js meta.function-call.js punctuation.separator.comma.js, source.js support.function.promise.js, source.css meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css, source.css meta.function-call.css punctuation.separator.css, source.css meta.rule.css meta.selector.css entity.name.tag.nesting-selector.css, source.ts meta.decorator.ts punctuation.decorator.ts, source.ts meta.import.ts string.quoted.single.ts, source.ts meta.function-call.ts punctuation.accessor.ts, source.ts meta.block.ts punctuation.separator.comma.ts, source.ts meta.array.literal.ts punctuation.separator.comma.ts, source.ts meta.object.literal.ts punctuation.separator.comma.ts, source.ts meta.decorator.ts meta.objectliteral.ts punctuation.separator.comma.ts, source.ts meta.class.ts meta.field.declaration.ts meta.type.annotation.ts keyword.operator.type.annotation.ts, source.ts support.function.promise.ts, source.ts punctuation.accessor.ts, source.ts punctuation.separator.comma.ts, source.ts keyword.operator.arithmetic.ts, source.ts keyword.operator.comparison.ts, source.css entity.other.pseudo-element.css punctuation.definition.entity.css, source.js meta.group.braces.round.js meta.tag.jsx punctuation.definition.tag.begin.jsx, source.js meta.group.braces.round.js meta.tag.jsx punctuation.definition.tag.end.jsx, source.js meta.group.braces.round.js meta.jsx.js meta.embedded.expression.jsx meta.group.braces.curly.js meta.delimiter.comma.js, variable.scss, source.css meta.property-list.css meta.property-value.css, source.css meta.property-list.scss meta.property-value.scss, source.css support.constant.mathematical-symbols.scss meta.property-value.scss meta.property-list.scss, source.css.scss source.vue, text.html.markdown markup.inline.raw.string.markdown, source.css variable.css, meta.tag.block.any.html, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, source.css.scss, source.css punctuation.definition.constant.css, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json, source.ts meta.object-literal.key.ts punctuation.separator.key-value.ts, keyword.operator.assignment.ts, source.js meta.template.expression.js punctuation.definition.template-expression.begin.js, source.js meta.template.expression.js punctuation.definition.template-expression.end.js, source.js punctuation.separator, fenced_code.block.language.markdown	#FFC600	—
variable.language, variable.other - source.js meta.import.js variable.other.readwrite.js, entity.name.class, entity.other.inherited-class, variable.parameter, source.js variable.language, entity.other.attribute-name, source.css punctuation.definition.keyword.css, source.css entity.other.pseudo-class.css, source.postcss meta.property-list.css meta.property-value.css keyword.other.unit.css, source.postcss punctuation.definition.keyword.css, source.postcss entity.other.pseudo-class.css, source.postcss punctuation.definition.entity.css, source.css meta.selector.css entity.name.tag.custom.css, source.css meta.function-call.css support.function.grid.css, source.css meta.rule.css support.constant.property-value.css, source.css meta.rule.css support.constant.color.w3c-color-name.css, text.html meta.tag.block.any.html meta.attribute-with-value.style.html source.css, source.js keyword.control.js, source.js entity.name.type.instance.js, punctuation.definition.heading.markdown, source.yaml punctuation.definition.block.sequence.item.yaml, beginning.punctuation.definition.list.markdown, source.js meta.import.js meta.block.js punctuation.separator.comma.js, source.json meta.structure.dictionary.json punctuation.section.dictionary.begin.json, source.json meta.structure.dictionary.json punctuation.section.dictionary.end.json, source.ts meta.class.ts entity.name.type.class.ts, source.ts punctuation.definition.typeparameters.begin.ts, source.ts punctuation.definition.typeparameters.end.ts, source.ts meta.type.annotation.ts support.type.primitive.ts, source.ts meta.decorator.ts meta.function-call.ts entity.name.function.ts, source.js storage.type.accessor.js, source.js meta.group.braces.round.js meta.jsx.js meta.embedded.expression.jsx meta.group.braces.curly.js string.interpolated.js keyword.other.template.begin.js, source.js meta.group.braces.round.js meta.jsx.js meta.embedded.expression.jsx meta.group.braces.curly.js string.interpolated.js keyword.other.template.end.js, source.css support.constant, variable.other.property.ts, variable.other.readwrite.ts, variable.other.constant.ts, punctuation.definition.keyword.scss, entity.name.function.scss, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, support.variable.property.ts, variable.other.object.js, constant.language.json.comments, constant.language.json, source.js meta.export.default.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js support.class.builtin.js, source.js meta.export.default.js meta.objectliteral.js meta.object.member.js constant.language, text.html.markdown markup.list.numbered.markdown punctuation.definition.list.begin.markdown, text.html.markdown markup.list.unnumbered.markdown, text.html.markdown markup.quote.markdown punctuation.definition.quote.begin.markdown	#61D0FF	—
entity.name.function.php, support.class.php	—	italic
support.class.php	#eb6deb	italic
punctuation.definition.variable.php	#61D0FF	—

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