Outer Heaven Theme

Name: Outer Heaven Theme
Author: Verbess

Publisher: VerbessThemes in package: 4

A coloring code theme for Visual Studio Code to making you more comfortable programming.

Open in VS Code GitHub

Color themes

VS Code preview

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

Outer Heaven Theme — Outer-Heaven-Colorful

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#263238
activityBar.activeBorder#EEFFFF
activityBar.activeFocusBorder#263238
activityBar.background#263238
activityBar.border#26323800
activityBar.dropBorder#EEFFFF60
activityBar.foreground#EEFFFF
activityBar.inactiveForeground#EEFFFF60
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#546E7A
breadcrumb.activeSelectionForeground#80CBC4
breadcrumb.background#263238
breadcrumb.focusForeground#EEFFFF
breadcrumb.foreground#607A86
breadcrumbPicker.background#263238
button.background#80CBC420
button.foreground#EEFFFF
button.hoverBackground#80CBC440
button.secondaryBackground#80CBC420
button.secondaryForeground#EEFFFF
button.secondaryHoverBackground#80CBC440
checkbox.background#263238
checkbox.border#EEFFFF10
checkbox.foreground#EEFFFF
debugConsole.errorForeground#EF5350
debugConsole.infoForeground#9E9E9E
debugConsole.sourceForeground#B3E5FC
debugConsole.warningForeground#C5E1A5
debugConsoleInputIcon.foreground#C5E1A5
debugExceptionWidget.background#263238
debugExceptionWidget.border#26323800
debugIcon.breakpointCurrentStackframeForeground#FFFF00
debugIcon.breakpointDisabledForeground#C5E1A5AA
debugIcon.breakpointForeground#8BC34A
debugIcon.breakpointStackframeForeground#FFFF00
debugIcon.breakpointUnverifiedForeground#EF5350
debugIcon.continueForeground#B3E5FC
debugIcon.disconnectForeground#8BC34A
debugIcon.pauseForeground#B3E5FC
debugIcon.restartForeground#CCFF90
debugIcon.startForeground#80CBC4
debugIcon.stepBackForeground#B3E5FC
debugIcon.stepIntoForeground#B3E5FC
debugIcon.stepOutForeground#B3E5FC
debugIcon.stepOverForeground#B3E5FC
debugIcon.stopForeground#8BC34A
debugTokenExpression.boolean#4DB6AC
debugTokenExpression.error#EF5350
debugTokenExpression.name#B3E5FC
debugTokenExpression.number#FFFF00
debugTokenExpression.string#FF9E80
debugTokenExpression.value#C5E1A5
debugToolBar.background#263238
debugToolBar.border#26323800
debugView.exceptionLabelBackground#EF5350
debugView.exceptionLabelForeground#EEFFFF
debugView.stateLabelBackground#00000030
debugView.stateLabelForeground#E91E63
debugView.valueChangedHighlight#E91E63
descriptionForeground#EEFFFF
diffEditor.diagonalFill#9E9E9E40
diffEditor.insertedTextBackground#448AFF40
diffEditor.removedTextBackground#EF535040
dropdown.background#263238
dropdown.border#EEFFFF10
dropdown.foreground#EEFFFF
dropdown.listBackground#263238
editor.background#263238
editor.findMatchBackground#00968860
editor.findMatchBorder#00968800
editor.findMatchHighlightBackground#4DB6AC80
editor.findMatchHighlightBorder#4DB6AC00
editor.findRangeHighlightBackground#4db6ac20
editor.focusedStackFrameHighlightBackground#EEFFFF40
editor.foldBackground#263238
editor.foreground#EEFFFF
editor.hoverHighlightBackground#304FFE80
editor.inactiveSelectionBackground#00968840
editor.lineHighlightBackground#00000050
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#00000050
editor.selectionBackground#00968880
editor.selectionForeground#4DB6AC
editor.selectionHighlightBackground#4DB6AC80
editor.selectionHighlightBorder#4DB6AC
editor.snippetFinalTabstopHighlightBackground#009688
editor.snippetFinalTabstopHighlightBorder#009688
editor.snippetTabstopHighlightBackground#009688
editor.snippetTabstopHighlightBorder#009688
editor.stackFrameHighlightBackground#EEFFFF20
editor.symbolHighlightBackground#304FFE80
editor.symbolHighlightBorder#448AFF
editor.wordHighlightBackground#304FFE80
editor.wordHighlightBorder#448AFF
editor.wordHighlightStrongBackground#304FFE80
editor.wordHighlightStrongBorder#448AFF
editorBracketMatch.background#304FFE80
editorBracketMatch.border#448AFF
editorCodeLens.foreground#80CBC4
editorCursor.background#FFFF8D
editorCursor.foreground#FFFF00
editorError.border#EF535000
editorError.foreground#EF5350
editorGroup.border#26323800
editorGroup.dropBackground#EEFFFF10
editorGroup.emptyBackground#263238
editorGroup.focusedEmptyBorder#FF537080
editorGroupHeader.border#26323800
editorGroupHeader.noTabsBackground#EF535080
editorGroupHeader.tabsBackground#263238
editorGroupHeader.tabsBorder#26323800
editorGutter.addedBackground#448AFF
editorGutter.background#263238
editorGutter.commentRangeForeground#9E9E9E
editorGutter.deletedBackground#E91E63
editorGutter.foldingControlForeground#9E9E9E
editorGutter.modifiedBackground#FFFF00
editorHint.border#607A8600
editorHint.foreground#607A86
editorHoverWidget.background#263238
editorHoverWidget.border#EEFFFF40
editorHoverWidget.foreground#EEFFFF
editorHoverWidget.statusBarBackground#37474F
editorIndentGuide.activeBackground#37474F
editorIndentGuide.background#37474FAA
editorInfo.border#9E9E9E00
editorInfo.foreground#9E9E9E
editorLightBulb.foreground#FFFF00
editorLightBulbAutoFix.foreground#FFFF8D
editorLineNumber.activeForeground#607A86
editorLineNumber.foreground#80CBC480
editorLink.activeForeground#EEFFFF
editorMarkerNavigation.background#263238
editorMarkerNavigationError.background#EF5350
editorMarkerNavigationInfo.background#9E9E9E
editorMarkerNavigationWarning.background#C5E1A5
editorOverviewRuler.addedForeground#448AFF
editorOverviewRuler.background#263238
editorOverviewRuler.border#26323800
editorOverviewRuler.bracketMatchForeground#304FFE
editorOverviewRuler.commonContentForeground#C5E1A5
editorOverviewRuler.currentContentForeground#64B5F6
editorOverviewRuler.deletedForeground#E91E63
editorOverviewRuler.errorForeground#EF5350
editorOverviewRuler.findMatchForeground#00968860
editorOverviewRuler.incomingContentForeground#EF5350
editorOverviewRuler.infoForeground#9E9E9E
editorOverviewRuler.modifiedForeground#FFFF00
editorOverviewRuler.rangeHighlightForeground#4DB6AC80
editorOverviewRuler.selectionHighlightForeground#4DB6AC80
editorOverviewRuler.warningForeground#C5E1A5
editorOverviewRuler.wordHighlightForeground#304FFE80
editorOverviewRuler.wordHighlightStrongForeground#304FFE80
editorPane.background#263238
editorRuler.foreground#37474FAA
editorSuggestWidget.background#263238
editorSuggestWidget.border#EEFFFF40
editorSuggestWidget.foreground#EEFFFF
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#00000050
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000050
editorWarning.border#C5E1A500
editorWarning.foreground#C5E1A5
editorWhitespace.foreground#EEFFFF40
editorWidget.background#263238
editorWidget.border#26323800
editorWidget.foreground#EEFFFF
editorWidget.resizeBorder#607A86
errorForeground#EF5350
extensionBadge.remoteBackground#607A86
extensionBadge.remoteForeground#EEFFFF
extensionButton.prominentBackground#607A8680
extensionButton.prominentForeground#EEFFFF
extensionButton.prominentHoverBackground#607A86
focusBorder#EEFFFF00
foreground#EEFFFF
gitDecoration.addedResourceForeground#448AFF
gitDecoration.conflictingResourceForeground#EF5350
gitDecoration.deletedResourceForeground#E91E63
gitDecoration.ignoredResourceForeground#455A64
gitDecoration.modifiedResourceForeground#FFFF00
gitDecoration.stageDeletedResourceForeground#E91E63
gitDecoration.stageModifiedResourceForeground#CECE00
gitDecoration.submoduleResourceForeground#607A86
gitDecoration.untrackedResourceForeground#DCEDC1
icon.foreground#80CBC4
imagePreview.border#263238
input.background#303C41
input.border#EEFFFF10
input.foreground#EEFFFF
input.placeholderForeground#EEFFFF60
inputOption.activeBackground#EEFFFF30
inputOption.activeBorder#EEFFFF30
inputOption.activeForeground#EEFFFF
inputValidation.errorBackground#303C41
inputValidation.errorBorder#E91E63
inputValidation.errorForeground#EF5350
inputValidation.infoBackground#303C41
inputValidation.infoBorder#B3E5FC
inputValidation.infoForeground#B3E5FC
inputValidation.warningBackground#303C41
inputValidation.warningBorder#C5E1A5
inputValidation.warningForeground#C5E1A5
list.activeSelectionBackground#263238
list.activeSelectionForeground#80CBC4
list.deemphasizedForeground#37474F
list.dropBackground#EEFFFF10
list.errorForeground#EF5350
list.filterMatchBackground#80CBC440
list.filterMatchBorder#EEFFFF40
list.focusBackground#EEFFFF20
list.focusForeground#EEFFFF
list.highlightForeground#80CBC4
list.hoverBackground#263238
list.hoverForeground#EEFFFF
list.inactiveFocusBackground#00000030
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#80CBC4
list.invalidItemForeground#37474F
list.warningForeground#C5E1A5
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#263238
menu.border#26323800
menu.foreground#EEFFFF
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#80CBC4
menu.separatorBackground#EEFFFF
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#80CBC4
merge.border#26323800
merge.commonContentBackground#8BC34ADD
merge.commonHeaderBackground#C5E1A5DD
merge.currentContentBackground#006064DD
merge.currentHeaderBackground#64B5F6DD
merge.incomingContentBackground#006064DD
merge.incomingHeaderBackground#EF5350DD
minimap.background#263238
minimap.errorHighlight#EF5350
minimap.findMatchHighlight#B3E5FC
minimap.selectionHighlight#03A9F4
minimap.warningHighlight#C5E1A5
minimapGutter.addedBackground#448AFF
minimapGutter.deletedBackground#E91E63
minimapGutter.modifiedBackground#FFFF00
minimapSlider.activeBackground#EEFFFF40
minimapSlider.background#EEFFFF20
minimapSlider.hoverBackground#EEFFFF10
notificationCenter.border#26323800
notificationCenterHeader.background#263238
notificationCenterHeader.foreground#EEFFFF
notificationLink.foreground#EEFFFF
notifications.background#263238
notifications.border#263238
notifications.foreground#EEFFFF
notificationsErrorIcon.foreground#EF5350
notificationsInfoIcon.foreground#9E9E9E
notificationsWarningIcon.foreground#C5E1A5
notificationToast.border#26323800
panel.background#263238
panel.border#26323800
panel.dropBorder#EEFFFF40
panelInput.border#263238
panelSection.border#263238
panelSection.dropBackground#EEFFFF10
panelSectionHeader.background#EEFFFF40
panelSectionHeader.border#263238
panelSectionHeader.foreground#EEFFFF
panelTitle.activeBorder#80CBC4
panelTitle.activeForeground#EEFFFF
panelTitle.inactiveForeground#EEFFFF
peekView.border#EEFFFF40
peekViewEditor.background#263238
peekViewEditor.matchHighlightBackground#00968860
peekViewEditor.matchHighlightBorder#00968860
peekViewEditorGutter.background#263238
peekViewResult.background#263238
peekViewResult.fileForeground#EEFFFF
peekViewResult.lineForeground#607A86
peekViewResult.matchHighlightBackground#00968860
peekViewResult.selectionBackground#00000050
peekViewResult.selectionForeground#EEFFFF
peekViewTitle.background#263238
peekViewTitleDescription.foreground#607A86
peekViewTitleLabel.foreground#EEFFFF
pickerGroup.border#263238
pickerGroup.foreground#80CBC4
problemsErrorIcon.foreground#EF5350
problemsInfoIcon.foreground#9E9E9E
problemsWarningIcon.foreground#C5E1A5
progressBar.background#80CBC4
quickInput.background#263238
quickInput.foreground#607A86
quickInputTitle.background#263238
scm.providerBorder#26323800
scrollbar.shadow#26323800
scrollbarSlider.activeBackground#EEFFFF40
scrollbarSlider.background#EEFFFF20
scrollbarSlider.hoverBackground#EEFFFF10
searchEditor.findMatchBackground#00968860
searchEditor.findMatchBorder#00968800
searchEditor.textInputBorder#EEFFFF30
selection.background#80CBC4
settings.checkboxBackground#263238
settings.checkboxBorder#EEFFFF10
settings.checkboxForeground#EEFFFF
settings.dropdownBackground#263238
settings.dropdownBorder#EEFFFF10
settings.dropdownForeground#EEFFFF
settings.dropdownListBorder#EEFFFF10
settings.headerForeground#EEFFFF
settings.modifiedItemIndicator#80CBC4
settings.numberInputBackground#263238
settings.numberInputBorder#EEFFFF10
settings.numberInputForeground#EEFFFF
settings.textInputBackground#263238
settings.textInputBorder#EEFFFF10
settings.textInputForeground#EEFFFF
sideBar.background#263238
sideBar.border#26323800
sideBar.dropBackground#EEFFFF10
sideBar.foreground#607A86
sideBarSectionHeader.background#263238
sideBarSectionHeader.border#26323800
sideBarSectionHeader.foreground#607A86
sideBarTitle.foreground#EEFFFF
statusBar.background#263238
statusBar.border#26323800
statusBar.debuggingBackground#EF5350
statusBar.debuggingBorder#26323800
statusBar.debuggingForeground#EEFFFF
statusBar.foreground#546E7A
statusBar.noFolderBackground#263238
statusBar.noFolderBorder#26323800
statusBar.noFolderForeground#546E7A
statusBarItem.activeBackground#EEFFFF20
statusBarItem.hoverBackground#EEFFFF10
statusBarItem.prominentBackground#263238
statusBarItem.prominentForeground#EEFFFF40
statusBarItem.prominentHoverBackground#EEFFFF10
statusBarItem.remoteBackground#80CBC4
statusBarItem.remoteForeground#000000
symbolIcon.arrayForeground#E0E0E0
symbolIcon.booleanForeground#E0E0E0
symbolIcon.classForeground#CDDC39
symbolIcon.colorForeground#E0E0E0
symbolIcon.constantForeground#03A9F4
symbolIcon.constructorForeground#03A9F4
symbolIcon.enumeratorForeground#FF9800
symbolIcon.enumeratorMemberForeground#FF9800
symbolIcon.eventForeground#CDDC39
symbolIcon.fieldForeground#03A9F4
symbolIcon.fileForeground#E0E0E0
symbolIcon.folderForeground#E0E0E0
symbolIcon.functionForeground#03A9F4
symbolIcon.interfaceForeground#CDDC39
symbolIcon.keyForeground#E0E0E0
symbolIcon.keywordForeground#E0E0E0
symbolIcon.methodForeground#03A9F4
symbolIcon.moduleForeground#E0E0E0
symbolIcon.namespaceForeground#E0E0E0
symbolIcon.nullForeground#E0E0E0
symbolIcon.numberForeground#E0E0E0
symbolIcon.objectForeground#E0E0E0
symbolIcon.operatorForeground#E0E0E0
symbolIcon.packageForeground#E0E0E0
symbolIcon.propertyForeground#80D8FF
symbolIcon.referenceForeground#E0E0E0
symbolIcon.snippetForeground#9E9E9E
symbolIcon.stringForeground#E0E0E0
symbolIcon.structForeground#CDDC39
symbolIcon.textForeground#E0E0E0
symbolIcon.typeParameterForeground#E0E0E0
symbolIcon.unitForeground#E0E0E0
symbolIcon.variableForeground#03A9F4
tab.activeBackground#263238
tab.activeBorder#80CBC4
tab.activeBorderTop#263238
tab.activeForeground#EEFFFF
tab.activeModifiedBorder#263238
tab.border#263238
tab.hoverBackground#263238
tab.hoverBorder#263238
tab.hoverForeground#607A86
tab.inactiveBackground#263238
tab.inactiveForeground#607A86
tab.inactiveModifiedBorder#263238
tab.lastPinnedBorder#263238
tab.unfocusedActiveBackground#263238
tab.unfocusedActiveBorder#80CBC480
tab.unfocusedActiveBorderTop#263238
tab.unfocusedActiveForeground#EEFFFF
tab.unfocusedActiveModifiedBorder#263238
tab.unfocusedHoverBackground#263238
tab.unfocusedHoverBorder#263238
tab.unfocusedHoverForeground#607A86
tab.unfocusedInactiveBackground#263238
tab.unfocusedInactiveForeground#607A86
tab.unfocusedInactiveModifiedBorder#263238
terminal.ansiBlack#000000
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#546E7A
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#FF5370
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#C3E88D
terminal.ansiMagenta#C792EA
terminal.ansiRed#FF5370
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFCB6B
terminal.background#263238
terminal.border#263238
terminal.foreground#80CBC4
terminal.selectionBackground#607A86
terminalCursor.background#000000
terminalCursor.foreground#FFFF00
textBlockQuote.background#00000030
textBlockQuote.border#80CBC4
textCodeBlock.background#00000030
textLink.activeForeground#EEFFFF
textLink.foreground#80CBC4
titleBar.activeBackground#263238
titleBar.activeForeground#EEFFFF
titleBar.border#26323800
titleBar.inactiveBackground#263238
titleBar.inactiveForeground#607A86
tree.indentGuidesStroke#546E7A
walkThrough.embeddedEditorBackground#00000050
welcomePage.background#263238
welcomePage.buttonBackground#EEFFFF10
welcomePage.buttonHoverBackground#EEFFFF20
widget.shadow#00000030
window.activeBorder#263238
window.inactiveBorder#263238

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brace.round	#42A5F5	—
meta.brace.square	#42A5F5	—
support.function, keyword.operator.new	#EA80FC	—
support.type, support.class	#FFA000	—
variable.other.property, variable.other.constant, variable.parameter, variable.object.property, variable.object.constant, meta.object-literal.key, support.variable	#A1887F	—
variable.language.base, variable.language.this	#A1887F	—
entity.name.tag	#b9f6cabb	—
entity.other.attribute-name	#8ba9ac	—
punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.separator.array	#8ba9ac	—
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.separator.dictionary	#8ba9ac	—
support.type.property-name	#b9f6cabb	bold
support.type.property-name punctuation	#b9f6cabb	—
string - support.type.property-name	#60C0D2	—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json	#60c0d2	—
invalid.illegal	#876560	—
markup.underline	—	underline
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#FFFF8D	—
markup.heading punctuation	#FFFF8D	—
markup.inline	#CDDC39	—
markup.inline punctuation, markup.list markup.inline punctuation, markup.list markup.list markup.inline punctuation, markup.list markup.list markup.list markup.inline punctuation, markup.list markup.list markup.list markup.list markup.inline punctuation	#CDDC39	—
markup.list	#4DB6AC	—
markup.list markup.italic	#4CAF50	—
markup.list punctuation, markup.list beginning.punctuation	#4CAF50	—
meta.link string, meta.image string	#03A9F4	—
meta.link markup.underline.link, meta.image markup.underline.link	#03A9F4	—
meta.link punctuation, markup.list meta.link punctuation, markup.list markup.list meta.link punctuation, markup.list markup.list markup.list meta.link punctuation, markup.list markup.list markup.list markup.list meta.link punctuation, meta.image punctuation, markup.list meta.image punctuation, markup.list markup.list meta.image punctuation, markup.list markup.list markup.list meta.image punctuation, markup.list markup.list markup.list markup.list meta.image punctuation	#03A9F4	—
markup.list markup.list, punctuation, beginning.punctuation	#4DB6AC	—
markup.list markup.list markup.list	#4DB6AC	—
markup.list markup.list markup.list markup.list, markup.list markup.list punctuation, markup.list markup.list beginning.punctuation	#CDDC39	—
markup.list markup.list markup.list markup.list markup.list, markup.list markup.list markup.list punctuation, markup.list markup.list markup.list beginning.punctuation	#CDDC39	—
markup.list markup.list markup.list markup.list punctuation, markup.list markup.list markup.list markup.list beginning.punctuation	#CDDC39	—
markup.list markup.list markup.list markup.list markup.list punctuation, markup.list markup.list markup.list markup.list markup.list beginning.punctuation	#CDDC39	—
comment.block.documentation	#607D8B	—
comment.block.documentation punctuation, comment.block.documentation punctuation.definition.comment, comment.block.documentation meta.tag punctuation, comment.block.documentation meta.tag entity	#d1b02d	—
comment.block.documentation meta.tag string, comment.block.documentation meta.tag string.quoted.single, comment.block.documentation meta.tag string.quoted.double	#009688	—
source	#4DB6AC	—
keyword.operator	#d1b02d	—
punctuation	#d1b02d	—
punctuation.parenthesis	#42A5F5	—
punctuation.squarebracket	#42A5F5	—
punctuation.curlybrace	#42A5F5	—
comment, comment punctuation, comment punctuation.parenthesis, comment punctuation.squarebracket, comment punctuation.curlybrace, comment keyword, comment entity, comment variable, comment string	#607D8B	—
constant	#8C9EFF	—
constant.language.null	#8C9EFF	—
constant.numeric	#8C9EFF	—
string.quoted.double, string.quoted.double punctuation	#1DE9B6	—
constant.character.escape	#43A047	—
string.quoted.single, string.quoted.single punctuation	#1DE9B6	—
entity.name.function, entity.name.method, keyword.other.get, keyword.other.set, keyword.other.add, keyword.other.remove	#EA80FC	—
storage.type, entity.name.type.type-parameter	#B2FF59	—
keyword.type	#d1b02d	—
punctuation.definition.typeparameters	#d1b02d	—
storage.modifier	#d1b02d	—
entity.name.type	#B2FF59	—
keyword.control, keyword.operator.conditional, keyword.query	#EA80FC	—
keyword.other	#EA80FC	—
meta.preprocessor, meta.preprocessor punctuation, meta.preprocessor punctuation.parenthesis, meta.preprocessor punctuation.squarebracket, meta.preprocessor punctuation.curlybrace, meta.preprocessor keyword	#ff1744	—
meta.preprocessor entity, meta.preprocessor entity.name.method, meta.preprocessor entity.name.function, meta.preprocessor entity.name.variable, meta.preprocessor variable, meta.preprocessor string	#ff1744	—
variable.other.readwrite, variable.other.object, variable.other.alias, entity.name.variable	#A1887F	—
variable.other.object.property, entity.name.variable.local, keyword.other.base, keyword.other.this	#A1887F	—
token.info-token	#9E9E9E	—
token.warn-token	#C5E1A5	—
token.error-token	#EF5350	—
token.debug-token	#42A5F5	—

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