Enfocado

Name: Enfocado
Author: Wuelner Martínez

Publisher: Wuelner MartínezThemes in package: 4

How themes should be.

Open in VS Code GitHub

Color themes

VS Code preview

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

Enfocado — Enfocado Light Neon

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffffff
activityBar.activeBorder#ffffff00
activityBar.activeFocusBorder#ffffff00
activityBar.background#ffffff
activityBar.border#ffffff00
activityBar.dropBorder#c7008b
activityBar.foreground#c7008b
activityBar.inactiveForeground#cdcdcd
activityBarBadge.background#af8500
activityBarBadge.foreground#ebebeb
badge.background#af8500
badge.foreground#ebebeb
banner.background#ffffff
banner.foreground#282828
banner.iconForeground#282828
breadcrumb.activeSelectionForeground#c7008b
breadcrumb.background#ffffff
breadcrumb.focusForeground#dd0f9d
breadcrumb.foreground#878787
breadcrumbPicker.background#ebebeb
button.background#dd0f9d
button.border#ffffff00
button.foreground#ebebeb
button.hoverBackground#c7008b
button.secondaryBackground#ebebeb
button.secondaryForeground#474747
button.secondaryHoverBackground#282828
button.separator#ffffff00
charts.blue#0064e4
charts.foreground#474747
charts.green#1d9700
charts.lines#474747
charts.orange#d04a00
charts.purple#7f51d6
charts.red#d6000c
charts.yellow#c49700
checkbox.background#cdcdcd
checkbox.border#ffffff00
checkbox.foreground#c7008b
commandCenter.activeBackground#ebebeb
commandCenter.activeForeground#c7008b
commandCenter.background#ffffff
commandCenter.border#ffffff00
commandCenter.foreground#878787
contrastActiveBorder#ffffff00
contrastBorder#ffffff00
debugConsole.errorForeground#bf0000
debugConsole.infoForeground#af8500
debugConsole.warningForeground#ba3700
debugExceptionWidget.background#ebebeb
debugExceptionWidget.border#ffffff00
debugTokenExpression.boolean#0064e4
debugTokenExpression.error#bf0000
debugTokenExpression.name#dd0f9d
debugTokenExpression.number#474747
debugTokenExpression.string#00ad9c
debugTokenExpression.value#474747
debugToolBar.background#ebebeb
debugToolBar.border#ffffff00
descriptionForeground#474747
diffEditor.border#ffffff00
diffEditor.diagonalFill#cdcdcd
diffEditor.insertedLineBackground#1d97001a
diffEditor.insertedTextBackground#1d970033
diffEditor.insertedTextBorder#ffffff00
diffEditor.removedLineBackground#d6000c1a
diffEditor.removedTextBackground#d6000c33
diffEditor.removedTextBorder#ffffff00
diffEditorGutter.insertedLineBackground#1d97001a
diffEditorGutter.removedLineBackground#d6000c1a
diffEditorOverview.insertedForeground#1d9700
diffEditorOverview.removedForeground#d6000c
disabledForeground#878787
dropdown.background#cdcdcd
dropdown.border#ebebeb
dropdown.foreground#474747
dropdown.listBackground#ebebeb
editor.background#ffffff
editor.findMatchBackground#af85004d
editor.findMatchBorder#af8500
editor.findMatchHighlightBackground#c497004d
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#ebebeb
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#ffffff00
editor.foreground#474747
editor.hoverHighlightBackground#cdcdcd
editor.inactiveSelectionBackground#ebebeb
editor.lineHighlightBackground#ebebeb
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#ffffff00
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#cdcdcd
editor.selectionForeground#c7008b
editor.selectionHighlightBackground#cdcdcd
editor.selectionHighlightBorder#ffffff00
editor.wordHighlightBackground#ffffff00
editor.wordHighlightBorder#ffffff00
editor.wordHighlightStrongBackground#cdcdcd
editor.wordHighlightStrongBorder#ffffff00
editorBracketHighlight.foreground1#7f51d6
editorBracketHighlight.foreground2#00ad9c
editorBracketHighlight.foreground3#dd0f9d
editorBracketHighlight.foreground4#6b40c3
editorBracketHighlight.foreground5#009a8a
editorBracketHighlight.foreground6#c7008b
editorBracketHighlight.unexpectedBracket.foreground#bf0000
editorBracketMatch.background#cdcdcd
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#7f51d6
editorBracketPairGuide.activeBackground2#00ad9c
editorBracketPairGuide.activeBackground3#dd0f9d
editorBracketPairGuide.activeBackground4#6b40c3
editorBracketPairGuide.activeBackground5#009a8a
editorBracketPairGuide.activeBackground6#c7008b
editorBracketPairGuide.background1#ebebeb
editorBracketPairGuide.background2#ebebeb
editorBracketPairGuide.background3#ebebeb
editorBracketPairGuide.background4#ebebeb
editorBracketPairGuide.background5#ebebeb
editorBracketPairGuide.background6#ebebeb
editorCodeLens.foreground#878787
editorCursor.background#ebebeb
editorCursor.foreground#474747
editorError.background#ffffff00
editorError.border#ffffff00
editorError.foreground#bf0000
editorGhostText.background#ffffff
editorGhostText.border#ffffff00
editorGhostText.foreground#878787
editorGroup.border#ebebeb
editorGroup.dropBackground#c7008b1a
editorGroup.dropIntoPromptBackground#af8500
editorGroup.dropIntoPromptBorder#ebebeb
editorGroup.dropIntoPromptForeground#ebebeb
editorGroup.emptyBackground#ffffff
editorGroup.focusedEmptyBorder#ebebeb
editorGroupHeader.border#ffffff00
editorGroupHeader.noTabsBackground#ffffff00
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#ffffff00
editorGutter.addedBackground#1d9700
editorGutter.background#ffffff
editorGutter.commentRangeForeground#878787
editorGutter.deletedBackground#d6000c
editorGutter.foldingControlForeground#878787
editorGutter.modifiedBackground#c49700
editorHoverWidget.background#ebebeb
editorHoverWidget.border#ffffff00
editorHoverWidget.foreground#474747
editorHoverWidget.highlightForeground#c7008b
editorHoverWidget.statusBarBackground#ebebeb
editorIndentGuide.activeBackground#cdcdcd
editorIndentGuide.background#ebebeb
editorInfo.background#ffffff00
editorInfo.border#ffffff00
editorInfo.foreground#af8500
editorInlayHint.background#ffffff00
editorInlayHint.foreground#878787
editorInlayHint.parameterBackground#ffffff00
editorInlayHint.parameterForeground#878787
editorInlayHint.typeBackground#ffffff00
editorInlayHint.typeForeground#878787
editorLightBulb.foreground#af8500
editorLightBulbAutoFix.foreground#af8500
editorLineNumber.activeForeground#878787
editorLineNumber.foreground#cdcdcd
editorLink.activeForeground#c7008b
editorMarkerNavigation.background#ebebeb
editorMarkerNavigationError.background#bf0000
editorMarkerNavigationError.headerBackground#ebebeb
editorMarkerNavigationInfo.background#af8500
editorMarkerNavigationInfo.headerBackground#ebebeb
editorMarkerNavigationWarning.background#ba3700
editorMarkerNavigationWarning.headerBackground#ebebeb
editorOverviewRuler.addedForeground#1d9700
editorOverviewRuler.background#ffffff
editorOverviewRuler.border#ffffff00
editorOverviewRuler.bracketMatchForeground#cdcdcd
editorOverviewRuler.commonContentForeground#cdcdcd
editorOverviewRuler.currentContentForeground#cdcdcd
editorOverviewRuler.deletedForeground#d6000c
editorOverviewRuler.errorForeground#bf0000
editorOverviewRuler.findMatchForeground#af8500
editorOverviewRuler.incomingContentForeground#cdcdcd
editorOverviewRuler.infoForeground#af8500
editorOverviewRuler.modifiedForeground#c49700
editorOverviewRuler.rangeHighlightForeground#ffffff00
editorOverviewRuler.selectionHighlightForeground#cdcdcd
editorOverviewRuler.warningForeground#ba3700
editorOverviewRuler.wordHighlightForeground#cdcdcd
editorOverviewRuler.wordHighlightStrongForeground#cdcdcd
editorRuler.foreground#878787
editorStickyScroll.background#ffffff
editorStickyScrollHover.background#ebebeb
editorSuggestWidget.background#ebebeb
editorSuggestWidget.border#ffffff00
editorSuggestWidget.focusHighlightForeground#c7008b
editorSuggestWidget.foreground#474747
editorSuggestWidget.highlightForeground#c7008b
editorSuggestWidget.selectedBackground#cdcdcd
editorSuggestWidget.selectedForeground#474747
editorSuggestWidget.selectedIconForeground#474747
editorSuggestWidgetStatus.foreground#c7008b
editorWarning.background#ffffff00
editorWarning.border#ffffff00
editorWarning.foreground#ba3700
editorWhitespace.foreground#cdcdcd
editorWidget.background#ebebeb
editorWidget.border#ffffff00
editorWidget.foreground#474747
editorWidget.resizeBorder#c7008b
errorForeground#bf0000
errorLens.errorBackground#d6000c1a
errorLens.errorBackgroundLight#bf000033
errorLens.errorForeground#d6000c
errorLens.errorForegroundLight#bf0000
errorLens.errorMessageBackground#d6000c1a
errorLens.hintBackground#0064e41a
errorLens.hintBackgroundLight#0054cf33
errorLens.hintForeground#0064e4
errorLens.hintForegroundLight#0054cf
errorLens.hintMessageBackground#0064e41a
errorLens.infoBackground#c497001a
errorLens.infoBackgroundLight#af850033
errorLens.infoForeground#c49700
errorLens.infoForegroundLight#af8500
errorLens.infoMessageBackground#c497001a
errorLens.statusBarErrorForeground#bf0000
errorLens.statusBarHintForeground#0054cf
errorLens.statusBarIconErrorForeground#bf0000
errorLens.statusBarIconWarningForeground#ba3700
errorLens.statusBarInfoForeground#af8500
errorLens.statusBarWarningForeground#ba3700
errorLens.warningBackground#d04a001a
errorLens.warningBackgroundLight#ba370033
errorLens.warningForeground#d04a00
errorLens.warningForegroundLight#ba3700
errorLens.warningMessageBackground#d04a001a
extensionBadge.remoteBackground#c7008b
extensionBadge.remoteForeground#ebebeb
extensionButton.prominentBackground#dd0f9d
extensionButton.prominentForeground#ebebeb
extensionButton.prominentHoverBackground#c7008b
extensionIcon.preReleaseForeground#d04a00
extensionIcon.sponsorForeground#dd0f9d
extensionIcon.starForeground#c49700
extensionIcon.verifiedForeground#0064e4
focusBorder#ffffff00
foreground#474747
gitDecoration.addedResourceForeground#1d9700
gitDecoration.conflictingResourceForeground#7f51d6
gitDecoration.deletedResourceForeground#d6000c
gitDecoration.ignoredResourceForeground#cdcdcd
gitDecoration.modifiedResourceForeground#c49700
gitDecoration.renamedResourceForeground#1d9700
gitDecoration.stageDeletedResourceForeground#d6000c
gitDecoration.stageModifiedResourceForeground#c49700
gitDecoration.submoduleResourceForeground#0064e4
gitDecoration.untrackedResourceForeground#878787
icon.foreground#878787
input.background#ebebeb
input.border#ebebeb
input.foreground#474747
input.placeholderForeground#878787
inputOption.activeBackground#c7008b4d
inputOption.activeBorder#ffffff00
inputOption.activeForeground#474747
inputOption.hoverBackground#dd0f9d4d
inputValidation.errorBackground#bf0000
inputValidation.errorBorder#ebebeb
inputValidation.errorForeground#ebebeb
inputValidation.infoBackground#af8500
inputValidation.infoBorder#ebebeb
inputValidation.infoForeground#ebebeb
inputValidation.warningBackground#ba3700
inputValidation.warningBorder#ebebeb
inputValidation.warningForeground#ebebeb
list.activeSelectionBackground#cdcdcd
list.activeSelectionForeground#c7008b
list.activeSelectionIconForeground#c7008b
list.deemphasizedForeground#474747
list.dropBackground#c7008b1a
list.errorForeground#bf0000
list.filterMatchBackground#af85004d
list.filterMatchBorder#474747
list.focusAndSelectionOutline#ffffff00
list.focusBackground#cdcdcd
list.focusForeground#474747
list.focusHighlightForeground#c7008b
list.focusOutline#ffffff00
list.highlightForeground#c7008b
list.hoverBackground#ffffff00
list.hoverForeground#dd0f9d
list.inactiveFocusBackground#ebebeb
list.inactiveFocusOutline#ffffff00
list.inactiveSelectionBackground#ebebeb
list.inactiveSelectionForeground#878787
list.inactiveSelectionIconForeground#878787
list.invalidItemForeground#bf0000
list.warningForeground#ba3700
listFilterWidget.background#c7008b
listFilterWidget.noMatchesOutline#bf0000
listFilterWidget.outline#c7008b
listFilterWidget.shadow#ebebeb
menu.background#ebebeb
menu.border#ffffff00
menu.foreground#474747
menu.selectionBackground#ffffff00
menu.selectionBorder#ffffff00
menu.selectionForeground#c7008b
menu.separatorBackground#ffffff
menubar.selectionBackground#ffffff00
menubar.selectionBorder#ffffff00
menubar.selectionForeground#c7008b
merge.border#ffffff00
merge.commonContentBackground#3a4d53
merge.commonHeaderBackground#3a4d53
merge.currentContentBackground#00978a
merge.currentHeaderBackground#00978a
merge.incomingContentBackground#006dce
merge.incomingHeaderBackground#006dce
minimap.background#ffffff
minimap.errorHighlight#bf0000
minimap.findMatchHighlight#af8500
minimap.foregroundOpacity#474747ff
minimap.selectionHighlight#cdcdcd
minimap.selectionOccurrenceHighlight#cdcdcd
minimap.warningHighlight#ba3700
minimapGutter.addedBackground#1d9700
minimapGutter.deletedBackground#d6000c
minimapGutter.modifiedBackground#c49700
minimapSlider.activeBackground#c7008b4d
minimapSlider.background#8787874d
minimapSlider.hoverBackground#dd0f9d4d
notificationCenter.border#ffffff00
notificationCenterHeader.background#ebebeb
notificationCenterHeader.foreground#282828
notificationLink.foreground#dd0f9d
notifications.background#ebebeb
notifications.border#ffffff00
notifications.foreground#474747
notificationsErrorIcon.foreground#bf0000
notificationsInfoIcon.foreground#af8500
notificationsWarningIcon.foreground#ba3700
notificationToast.border#ffffff00
panel.background#ffffff
panel.border#ebebeb
panel.dropBorder#c7008b
panelInput.border#ffffff00
panelSection.border#ebebeb
panelSection.dropBackground#c7008b1a
panelTitle.activeBorder#c7008b
panelTitle.activeForeground#c7008b
panelTitle.inactiveForeground#cdcdcd
peekView.border#ebebeb
peekViewEditor.background#ebebeb
peekViewEditor.matchHighlightBackground#af85004d
peekViewEditor.matchHighlightBorder#af8500
peekViewEditorGutter.background#ebebeb
peekViewResult.background#ebebeb
peekViewResult.fileForeground#474747
peekViewResult.lineForeground#474747
peekViewResult.matchHighlightBackground#c497004d
peekViewResult.selectionBackground#cdcdcd
peekViewResult.selectionForeground#c7008b
peekViewTitle.background#ebebeb
peekViewTitleDescription.foreground#282828
peekViewTitleLabel.foreground#282828
pickerGroup.border#ffffff00
pickerGroup.foreground#c7008b
problemsErrorIcon.foreground#bf0000
problemsInfoIcon.foreground#af8500
problemsWarningIcon.foreground#ba3700
progressBar.background#c7008b
quickInput.background#ebebeb
quickInput.foreground#474747
quickInputList.focusBackground#cdcdcd
quickInputList.focusForeground#474747
quickInputList.focusIconForeground#474747
quickInputTitle.background#ebebeb
sash.hoverBorder#c7008b
scrollbar.shadow#ebebeb
scrollbarSlider.activeBackground#c7008b4d
scrollbarSlider.background#8787874d
scrollbarSlider.hoverBackground#dd0f9d4d
searchEditor.findMatchBackground#af85004d
searchEditor.findMatchBorder#af8500
searchEditor.textInputBorder#ebebeb
selection.background#cdcdcd
settings.checkboxBackground#cdcdcd
settings.checkboxBorder#ffffff00
settings.checkboxForeground#c7008b
settings.dropdownBackground#cdcdcd
settings.dropdownBorder#ebebeb
settings.dropdownForeground#474747
settings.dropdownListBorder#ebebeb
settings.focusedRowBackground#ffffff00
settings.focusedRowBorder#ffffff00
settings.headerBorder#ffffff00
settings.headerForeground#c7008b
settings.modifiedItemIndicator#c49700
settings.numberInputBackground#ebebeb
settings.numberInputBorder#ebebeb
settings.numberInputForeground#474747
settings.rowHoverBackground#ffffff00
settings.sashBorder#ebebeb
settings.textInputBackground#ebebeb
settings.textInputBorder#ebebeb
settings.textInputForeground#474747
sideBar.background#ffffff
sideBar.border#ebebeb
sideBar.dropBackground#c7008b1a
sideBar.foreground#878787
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#ebebeb
sideBarSectionHeader.foreground#878787
sideBarTitle.foreground#cdcdcd
sideBySideEditor.horizontalBorder#ebebeb
sideBySideEditor.verticalBorder#ebebeb
statusBar.background#ffffff
statusBar.border#ffffff00
statusBar.debuggingBackground#c7008b
statusBar.debuggingBorder#ffffff00
statusBar.debuggingForeground#ebebeb
statusBar.focusBorder#ffffff00
statusBar.foreground#878787
statusBar.noFolderBackground#ffffff
statusBar.noFolderBorder#ffffff00
statusBar.noFolderForeground#878787
statusBarItem.activeBackground#ebebeb
statusBarItem.errorBackground#ffffff
statusBarItem.errorForeground#bf0000
statusBarItem.focusBorder#ffffff00
statusBarItem.hoverBackground#ffffff00
statusBarItem.remoteBackground#c7008b
statusBarItem.remoteForeground#ebebeb
statusBarItem.warningBackground#ffffff
statusBarItem.warningForeground#ba3700
symbolIcon.arrayForeground#dd0f9d
symbolIcon.booleanForeground#0064e4
symbolIcon.classForeground#6b40c3
symbolIcon.colorForeground#0064e4
symbolIcon.constantForeground#c49700
symbolIcon.constructorForeground#6b40c3
symbolIcon.enumeratorForeground#6b40c3
symbolIcon.enumeratorMemberForeground#6b40c3
symbolIcon.eventForeground#008400
symbolIcon.fieldForeground#6b40c3
symbolIcon.fileForeground#474747
symbolIcon.folderForeground#6b40c3
symbolIcon.functionForeground#c7008b
symbolIcon.interfaceForeground#6b40c3
symbolIcon.keyForeground#dd0f9d
symbolIcon.keywordForeground#7f51d6
symbolIcon.methodForeground#c7008b
symbolIcon.moduleForeground#474747
symbolIcon.namespaceForeground#474747
symbolIcon.nullForeground#0064e4
symbolIcon.numberForeground#474747
symbolIcon.objectForeground#6b40c3
symbolIcon.operatorForeground#7f51d6
symbolIcon.packageForeground#00ad9c
symbolIcon.propertyForeground#6b40c3
symbolIcon.referenceForeground#c7008b
symbolIcon.snippetForeground#474747
symbolIcon.stringForeground#00ad9c
symbolIcon.structForeground#6b40c3
symbolIcon.textForeground#474747
symbolIcon.typeParameterForeground#6b40c3
symbolIcon.unitForeground#474747
symbolIcon.variableForeground#dd0f9d
tab.activeBackground#ffffff
tab.activeBorder#ffffff00
tab.activeBorderTop#c7008b
tab.activeForeground#c7008b
tab.activeModifiedBorder#ffffff00
tab.border#ffffff00
tab.hoverBackground#ffffff00
tab.hoverBorder#ffffff00
tab.hoverForeground#c7008b
tab.inactiveBackground#ffffff
tab.inactiveForeground#878787
tab.inactiveModifiedBorder#ffffff00
tab.lastPinnedBorder#ebebeb
tab.unfocusedActiveBackground#ffffff
tab.unfocusedActiveBorder#ffffff00
tab.unfocusedActiveBorderTop#dd0f9d
tab.unfocusedActiveForeground#dd0f9d
tab.unfocusedActiveModifiedBorder#ffffff00
tab.unfocusedHoverBackground#ffffff
tab.unfocusedHoverBorder#ffffff00
tab.unfocusedHoverForeground#dd0f9d
tab.unfocusedInactiveBackground#ffffff
tab.unfocusedInactiveForeground#cdcdcd
tab.unfocusedInactiveModifiedBorder#ffffff00
terminal.ansiBlack#ebebeb
terminal.ansiBlue#0064e4
terminal.ansiBrightBlack#cdcdcd
terminal.ansiBrightBlue#0054cf
terminal.ansiBrightCyan#009a8a
terminal.ansiBrightGreen#008400
terminal.ansiBrightMagenta#c7008b
terminal.ansiBrightRed#bf0000
terminal.ansiBrightWhite#282828
terminal.ansiBrightYellow#af8500
terminal.ansiCyan#00ad9c
terminal.ansiGreen#1d9700
terminal.ansiMagenta#dd0f9d
terminal.ansiRed#d6000c
terminal.ansiWhite#878787
terminal.ansiYellow#c49700
terminal.background#ffffff
terminal.border#ebebeb
terminal.dropBackground#c7008b1a
terminal.findMatchBackground#af85004d
terminal.findMatchBorder#af8500
terminal.findMatchHighlightBackground#c497004d
terminal.findMatchHighlightBorder#ffffff00
terminal.foreground#474747
terminal.selectionBackground#cdcdcd
terminal.selectionForeground#ffffff00
terminal.tab.activeBorder#c7008b
terminalCommandDecoration.defaultBackground#474747
terminalCommandDecoration.errorBackground#bf0000
terminalCommandDecoration.successBackground#008400
terminalCursor.background#ebebeb
terminalCursor.foreground#474747
terminalOverviewRuler.cursorForeground#474747
terminalOverviewRuler.findMatchForeground#af8500
textLink.activeForeground#c7008b
textLink.foreground#dd0f9d
titleBar.activeBackground#ffffff
titleBar.activeForeground#878787
titleBar.border#ffffff00
titleBar.inactiveBackground#ebebeb
titleBar.inactiveForeground#878787
tree.indentGuidesStroke#cdcdcd
walkThrough.embeddedEditorBackground#ffffff
welcomePage.background#ffffff
welcomePage.progress.background#ebebeb
welcomePage.progress.foreground#c7008b
welcomePage.tileBackground#ebebeb
welcomePage.tileHoverBackground#c7008b4d
welcomePage.tileShadow#ebebeb
widget.shadow#ebebeb
window.activeBorder#c7008b
window.inactiveBorder#ebebeb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#878787	italic
invalid	#bf0000	—
entity.name	#c7008b	bold
entity, entity.name.selector, variable	#dd0f9d
variable.other.constant, variable.other.readonly	#c49700
support.variable, variable.language	#1d9700
entity.name.function.macro, entity.name.tag, keyword, storage	#7f51d6
markup	#474747
markup.bold	#282828	bold
markup.changed	#c49700
markup.deleted	#d6000c
markup.heading	#282828
markup.inserted	#1d9700
markup.italic	—	italic
markup.list	#dd0f9d
markup.quote	#878787
markup.underline	—	underline
markup.underline.link	#009a8a	—
constant, entity.name.namespace, meta, punctuation.separator, punctuation.terminator, string.unquoted	#474747
entity.name.function, entity.name.method	#c7008b	italic
function.language, method.language, support.function, support.method	#008400	italic
constant.character, punctuation.definition.string.begin, punctuation.definition.string.end, string	#00ad9c
comment.block.documentation, constant.character.escape, constant.language.boolean, constant.regexp, constant.rgb-value, constant.numeric.hex, string.regexp, support	#0064e4
emphasis	—	italic
strong	—	bold
entity.name.section	#c7008b	bold
keyword.control.trycatch	#d04a00
entity.name.class, entity.name.type, entity.other.inherited-class, storage.type, variable.other.enummember, variable.other.property	#6b40c3	bold
variable.other.constant.property, variable.other.constant.enummember, variable.other.readonly.property, variable.other.readonly.enummember	#c49700	bold
support.class, support.type	#0054cf	bold

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