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 Dark Nature

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#777777	italic
invalid	#ff5e56	—
entity.name	#83c746	bold
entity, entity.name.selector, variable	#70b433
variable.other.constant, variable.other.readonly	#dbb32d
support.variable, variable.language	#eb6eb7
entity.name.function.macro, entity.name.tag, keyword, storage	#368aeb
markup	#b9b9b9
markup.bold	#dedede	bold
markup.changed	#dbb32d
markup.deleted	#ed4a46
markup.heading	#dedede
markup.inserted	#70b433
markup.italic	—	italic
markup.list	#70b433
markup.quote	#777777
markup.underline	—	underline
markup.underline.link	#56d8c9	—
constant, entity.name.namespace, meta, punctuation.separator, punctuation.terminator, string.unquoted	#b9b9b9
entity.name.function, entity.name.method	#83c746	italic
function.language, method.language, support.function, support.method	#ff81ca	italic
constant.character, punctuation.definition.string.begin, punctuation.definition.string.end, string	#3fc5b7
comment.block.documentation, constant.character.escape, constant.language.boolean, constant.regexp, constant.rgb-value, constant.numeric.hex, string.regexp, support	#a580e2
emphasis	—	italic
strong	—	bold
entity.name.section	#83c746	bold
keyword.control.trycatch	#e67f43
entity.name.class, entity.name.type, entity.other.inherited-class, storage.type, variable.other.enummember, variable.other.property	#4f9cfe	bold
variable.other.constant.property, variable.other.constant.enummember, variable.other.readonly.property, variable.other.readonly.enummember	#dbb32d	bold
support.class, support.type	#b891f5	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}!`;
}