Tinted VSCode

Name: Tinted VSCode
Author: Tinted Theming

Publisher: Tinted ThemingThemes in package: 510

Choose from over 250 Tinted Themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Tinted VSCode — base16-catppuccin-frappe

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#414559
activityBar.background#303446
activityBar.dropBackground#babbf1
activityBar.foreground#c6d0f5
activityBar.inactiveForeground#51576d
activityBarBadge.background#8caaee
activityBarBadge.foreground#babbf1
badge.background#303446
badge.foreground#c6d0f5
banner.background#414559
banner.foreground#c6d0f5
banner.iconForeground#8caaee
breadcrumb.activeSelectionForeground#babbf1
breadcrumb.background#292c3c
breadcrumb.focusForeground#f2d5cf
breadcrumb.foreground#c6d0f5
breadcrumbPicker.background#292c3c
button.background#8caaee
button.foreground#babbf1
button.hoverBackground#626880
button.secondaryBackground#ca9ee6
button.secondaryForeground#babbf1
button.secondaryHoverBackground#626880
charts.blue#8caaee
charts.foreground#c6d0f5
charts.green#a6d189
charts.lines#c6d0f5
charts.orange#ef9f76
charts.purple#ca9ee6
charts.red#e78284
charts.yellow#e5c890
checkbox.background#303446
checkbox.foreground#c6d0f5
commandCenter.activeBackground#292c3c
commandCenter.activeForeground#babbf1
commandCenter.background#303446
commandCenter.foreground#c6d0f5
debugConsole.errorForeground#e78284
debugConsole.infoForeground#c6d0f5
debugConsole.sourceForeground#c6d0f5
debugConsole.warningForeground#e5c890
debugConsoleInputIcon.foreground#c6d0f5
debugExceptionWidget.background#292c3c
debugIcon.breakpointCurrentStackframeForeground#e5c890
debugIcon.breakpointDisabledForeground#626880
debugIcon.breakpointForeground#e78284
debugIcon.breakpointStackframeForeground#eebebe
debugIcon.breakpointUnverifiedForeground#414559
debugIcon.continueForeground#a6d189
debugIcon.disconnectForeground#e78284
debugIcon.pauseForeground#8caaee
debugIcon.restartForeground#a6d189
debugIcon.startForeground#a6d189
debugIcon.stepBackForeground#eebebe
debugIcon.stepIntoForeground#81c8be
debugIcon.stepOutForeground#ca9ee6
debugIcon.stepOverForeground#8caaee
debugIcon.stopForeground#e78284
debugTokenExpression.boolean#ef9f76
debugTokenExpression.error#e78284
debugTokenExpression.name#ca9ee6
debugTokenExpression.number#ef9f76
debugTokenExpression.string#a6d189
debugTokenExpression.value#c6d0f5
debugToolBar.background#292c3c
debugView.stateLabelBackground#8caaee
debugView.stateLabelForeground#babbf1
debugView.valueChangedHighlight#8caaee
descriptionForeground#51576d
diffEditor.diagonalFill#414559
diffEditor.insertedTextBackground#a6d18920
diffEditor.removedTextBackground#e7828420
disabledForeground#626880
dropdown.background#303446
dropdown.foreground#c6d0f5
dropdown.listBackground#303446
editor.background#303446
editor.findMatchBackground#e5c8906f
editor.findMatchHighlightBackground#ef9f766f
editor.findRangeHighlightBackground#292c3c6f
editor.foreground#c6d0f5
editor.hoverHighlightBackground#4145596f
editor.inactiveSelectionBackground#414559
editor.lineHighlightBackground#292c3c
editor.rangeHighlightBackground#292c3c6f
editor.selectionBackground#414559
editor.selectionHighlightBackground#292c3c
editor.snippetFinalTabstopHighlightBackground#51576d
editor.snippetTabstopHighlightBackground#414559
editor.wordHighlightBackground#4145596f
editor.wordHighlightStrongBackground#51576d6f
editorBracketHighlight.foreground1#e78284
editorBracketHighlight.foreground2#ef9f76
editorBracketHighlight.foreground3#e5c890
editorBracketHighlight.foreground4#a6d189
editorBracketHighlight.foreground5#8caaee
editorBracketHighlight.foreground6#ca9ee6
editorBracketHighlight.unexpectedBracket.foreground#eebebe
editorBracketMatch.background#414559
editorCodeLens.foreground#414559
editorCursor.foreground#c6d0f5
editorError.foreground#e78284
editorGroup.background#303446
editorGroup.dropBackground#4145596f
editorGroup.dropIntoPromptBackground#303446
editorGroup.dropIntoPromptForeground#f2d5cf
editorGroup.emptyBackground#303446
editorGroupHeader.noTabsBackground#292c3c
editorGroupHeader.tabsBackground#292c3c
editorGutter.addedBackground#a6d189
editorGutter.background#303446
editorGutter.commentRangeForeground#626880
editorGutter.deletedBackground#e78284
editorGutter.foldingControlForeground#c6d0f5
editorGutter.modifiedBackground#ca9ee6
editorHint.foreground#8caaee
editorHoverWidget.background#303446
editorHoverWidget.foreground#c6d0f5
editorIndentGuide.activeBackground#626880
editorIndentGuide.background#51576d
editorInfo.foreground#81c8be
editorInlayHint.background#292c3c
editorInlayHint.foreground#c6d0f5
editorInlayHint.parameterBackground#292c3c
editorInlayHint.parameterForeground#c6d0f5
editorInlayHint.typeBackground#292c3c
editorInlayHint.typeForeground#c6d0f5
editorLightBulb.foreground#e5c890
editorLightBulbAutoFix.foreground#8caaee
editorLineNumber.activeForeground#626880
editorLineNumber.foreground#51576d
editorLink.activeForeground#8caaee
editorMarkerNavigation.background#292c3c
editorMarkerNavigationError.background#e78284
editorMarkerNavigationError.headerBackground#e7828420
editorMarkerNavigationInfo.background#8caaee
editorMarkerNavigationInfo.headerBackground#81c8be20
editorMarkerNavigationWarning.background#e5c890
editorMarkerNavigationWarning.headerBackground#e5c89020
editorOverviewRuler.addedForeground#a6d189
editorOverviewRuler.bracketMatchForeground#f2d5cf
editorOverviewRuler.commonContentForeground#eebebe
editorOverviewRuler.currentContentForeground#8caaee
editorOverviewRuler.deletedForeground#e78284
editorOverviewRuler.errorForeground#e78284
editorOverviewRuler.findMatchForeground#e5c8906f
editorOverviewRuler.incomingContentForeground#a6d189
editorOverviewRuler.infoForeground#81c8be
editorOverviewRuler.modifiedForeground#ca9ee6
editorOverviewRuler.rangeHighlightForeground#51576d6f
editorOverviewRuler.selectionHighlightForeground#4145596f
editorOverviewRuler.warningForeground#e5c890
editorOverviewRuler.wordHighlightForeground#babbf16f
editorOverviewRuler.wordHighlightStrongForeground#8caaee6f
editorPane.background#303446
editorRuler.foreground#51576d
editorSuggestWidget.background#292c3c
editorSuggestWidget.focusHighlightForeground#babbf1
editorSuggestWidget.foreground#c6d0f5
editorSuggestWidget.highlightForeground#8caaee
editorSuggestWidget.selectedBackground#414559
editorSuggestWidget.selectedForeground#f2d5cf
editorWarning.foreground#e5c890
editorWhitespace.foreground#51576d
editorWidget.background#303446
editorWidget.foreground#c6d0f5
errorForeground#e78284
extensionBadge.remoteBackground#ef9f76
extensionBadge.remoteForeground#babbf1
extensionButton.prominentBackground#a6d189
extensionButton.prominentForeground#babbf1
extensionButton.prominentHoverBackground#414559
extensionIcon.preReleaseForeground#ef9f76
extensionIcon.starForeground#e5c890
extensionIcon.verifiedForeground#8caaee
foreground#c6d0f5
gitDecoration.addedResourceForeground#a6d189
gitDecoration.conflictingResourceForeground#e5c890
gitDecoration.deletedResourceForeground#e78284
gitDecoration.ignoredResourceForeground#51576d
gitDecoration.modifiedResourceForeground#ca9ee6
gitDecoration.renamedResourceForeground#81c8be
gitDecoration.stageDeletedResourceForeground#e78284
gitDecoration.stageModifiedResourceForeground#ca9ee6
gitDecoration.submoduleResourceForeground#eebebe
gitDecoration.untrackedResourceForeground#ef9f76
icon.foreground#626880
input.background#303446
input.foreground#c6d0f5
input.placeholderForeground#51576d
inputOption.activeBackground#414559
inputOption.activeBorder#ef9f76
inputOption.activeForeground#c6d0f5
inputValidation.errorBackground#e78284
inputValidation.errorBorder#e78284
inputValidation.errorForeground#c6d0f5
inputValidation.infoBackground#8caaee
inputValidation.infoBorder#8caaee
inputValidation.infoForeground#c6d0f5
inputValidation.warningBackground#e5c890
inputValidation.warningBorder#e5c890
inputValidation.warningForeground#c6d0f5
keybindingLabel.background#414559
keybindingLabel.foreground#c6d0f5
keybindingTable.headerBackground#414559
keybindingTable.rowsBackground#292c3c
list.activeSelectionBackground#414559
list.activeSelectionForeground#c6d0f5
list.dropBackground#babbf1
list.errorForeground#e78284
list.filterMatchBackground#414559
list.focusBackground#414559
list.focusForeground#c6d0f5
list.highlightForeground#babbf1
list.hoverBackground#51576d
list.hoverForeground#c6d0f5
list.inactiveFocusBackground#414559
list.inactiveSelectionBackground#414559
list.inactiveSelectionForeground#c6d0f5
list.invalidItemForeground#e78284
list.warningForeground#e5c890
listFilterWidget.background#303446
listFilterWidget.noMatchesOutline#e78284
menu.background#292c3c
menu.foreground#c6d0f5
menu.selectionBackground#414559
menu.selectionForeground#c6d0f5
menu.separatorBackground#babbf1
menubar.selectionBackground#292c3c
menubar.selectionForeground#c6d0f5
merge.currentContentBackground#8caaee40
merge.currentHeaderBackground#8caaee40
merge.incomingContentBackground#a6d18960
merge.incomingHeaderBackground#a6d18960
minimap.background#303446
minimap.errorHighlight#e78284
minimap.findMatchHighlight#e5c8906f
minimap.selectionHighlight#4145596f
minimap.selectionOccurrenceHighlight#51576d
minimap.warningHighlight#e5c890
minimapGutter.addedBackground#a6d189
minimapGutter.deletedBackground#e78284
minimapGutter.modifiedBackground#ca9ee6
notebook.cellBorderColor#51576d
notebook.cellEditorBackground#303446
notebook.cellHoverBackground#292c3c
notebook.cellToolbarSeparator#414559
notebook.editorBackground#303446
notebook.focusedCellBackground#414559
notebook.focusedCellBorder#8caaee
notebook.focusedEditorBorder#8caaee
notebook.inactiveFocusedCellBorder#51576d
notebook.selectedCellBackground#414559
notebookStatusErrorIcon.foreground#e78284
notebookStatusRunningIcon.foreground#81c8be
notebookStatusSuccessIcon.foreground#a6d189
notification.background#414559
notification.buttonBackground#8caaee
notification.buttonForeground#babbf1
notification.buttonHoverBackground#414559
notification.errorBackground#e78284
notification.errorForeground#babbf1
notification.foreground#c6d0f5
notification.infoBackground#81c8be
notification.infoForeground#babbf1
notification.warningBackground#e5c890
notification.warningForeground#babbf1
notificationCenterHeader.background#292c3c
notificationCenterHeader.foreground#c6d0f5
notificationLink.foreground#8caaee
notifications.background#414559
notifications.foreground#c6d0f5
notificationsErrorIcon.foreground#e78284
notificationsInfoIcon.foreground#8caaee
notificationsWarningIcon.foreground#e5c890
panel.background#303446
panel.dropBackground#292c3c6f
panel.dropBorder#292c3c6f
panelTitle.activeForeground#c6d0f5
panelTitle.inactiveForeground#51576d
peekViewEditor.background#292c3c
peekViewEditor.matchHighlightBackground#ef9f766f
peekViewEditorGutter.background#292c3c
peekViewResult.background#303446
peekViewResult.fileForeground#c6d0f5
peekViewResult.lineForeground#51576d
peekViewResult.matchHighlightBackground#ef9f766f
peekViewResult.selectionBackground#414559
peekViewResult.selectionForeground#c6d0f5
peekViewTitle.background#414559
peekViewTitleDescription.foreground#51576d
peekViewTitleLabel.foreground#c6d0f5
pickerGroup.foreground#51576d
ports.iconRunningProcessForeground#ef9f76
problemsErrorIcon.foreground#e78284
problemsInfoIcon.foreground#81c8be
problemsWarningIcon.foreground#e5c890
progressBar.background#51576d
quickInput.background#292c3c
quickInput.foreground#c6d0f5
quickInputList.focusBackground#51576d
quickInputList.focusForeground#babbf1
quickInputList.focusIconForeground#babbf1
scrollbar.shadow#292c3c
scrollbarSlider.activeBackground#6268806f
scrollbarSlider.background#4145596f
scrollbarSlider.hoverBackground#51576d6f
searchEditor.findMatchBackground#e5c8906f
selection.background#8caaee
settings.checkboxBackground#292c3c
settings.checkboxForeground#c6d0f5
settings.dropdownBackground#292c3c
settings.dropdownForeground#c6d0f5
settings.focusedRowBackground#414559
settings.headerBorder#c6d0f5
settings.headerForeground#c6d0f5
settings.modifiedItemForeground#a6d189
settings.modifiedItemIndicator#8caaee
settings.numberInputBackground#292c3c
settings.numberInputForeground#c6d0f5
settings.rowHoverBackground#414559
settings.sashBorder#c6d0f5
settings.textInputBackground#292c3c
settings.textInputForeground#c6d0f5
sideBar.background#292c3c
sideBar.dropBackground#4145596f
sideBar.foreground#c6d0f5
sideBarSectionHeader.background#51576d
sideBarSectionHeader.foreground#c6d0f5
sideBarTitle.foreground#c6d0f5
statusBar.background#8caaee
statusBar.debuggingBackground#ef9f76
statusBar.debuggingForeground#babbf1
statusBar.foreground#babbf1
statusBar.noFolderBackground#ca9ee6
statusBar.noFolderForeground#babbf1
statusBarItem.activeBackground#51576d
statusBarItem.errorBackground#e78284
statusBarItem.errorForeground#babbf1
statusBarItem.hoverBackground#414559
statusBarItem.prominentBackground#ca9ee6
statusBarItem.prominentForeground#babbf1
statusBarItem.prominentHoverBackground#e78284
statusBarItem.remoteBackground#a6d189
statusBarItem.remoteForeground#babbf1
statusBarItem.warningBackground#e5c890
statusBarItem.warningForeground#babbf1
symbolIcon.arrayForeground#c6d0f5
symbolIcon.booleanForeground#ef9f76
symbolIcon.classForeground#e5c890
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#ef9f76
symbolIcon.constructorForeground#8caaee
symbolIcon.enumeratorForeground#ef9f76
symbolIcon.enumeratorMemberForeground#8caaee
symbolIcon.eventForeground#e5c890
symbolIcon.fieldForeground#e78284
symbolIcon.fileForeground#c6d0f5
symbolIcon.folderForeground#c6d0f5
symbolIcon.functionForeground#8caaee
symbolIcon.interfaceForeground#8caaee
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#ca9ee6
symbolIcon.methodForeground#8caaee
symbolIcon.moduleForeground#c6d0f5
symbolIcon.namespaceForeground#c6d0f5
symbolIcon.nullForeground#eebebe
symbolIcon.numberForeground#ef9f76
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#c6d0f5
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#c6d0f5
symbolIcon.stringForeground#a6d189
symbolIcon.structForeground#e5c890
symbolIcon.textForeground#c6d0f5
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#e78284
tab.activeBackground#303446
tab.activeForeground#c6d0f5
tab.activeModifiedBorder#8caaee
tab.hoverBackground#414559
tab.inactiveBackground#292c3c
tab.inactiveForeground#51576d
tab.inactiveModifiedBorder#8caaee
tab.unfocusedActiveBackground#303446
tab.unfocusedActiveForeground#626880
tab.unfocusedActiveModifiedBorder#8caaee
tab.unfocusedHoverBackground#414559
tab.unfocusedInactiveForeground#51576d
tab.unfocusedInactiveModifiedBorder#8caaee
terminal.ansiBlack#303446
terminal.ansiBlue#8caaee
terminal.ansiBrightBlack#51576d
terminal.ansiBrightBlue#8caaee
terminal.ansiBrightCyan#81c8be
terminal.ansiBrightGreen#a6d189
terminal.ansiBrightMagenta#ca9ee6
terminal.ansiBrightRed#e78284
terminal.ansiBrightWhite#babbf1
terminal.ansiBrightYellow#e5c890
terminal.ansiCyan#81c8be
terminal.ansiGreen#a6d189
terminal.ansiMagenta#ca9ee6
terminal.ansiRed#e78284
terminal.ansiWhite#c6d0f5
terminal.ansiYellow#e5c890
terminal.background#303446
terminal.foreground#c6d0f5
terminalCursor.foreground#c6d0f5
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#eebebe
testing.iconFailed#e78284
testing.iconPassed#a6d189
testing.iconQueued#e5c890
testing.iconSkipped#ca9ee6
testing.iconUnset#626880
testing.message.error.decorationForeground#c6d0f5
testing.message.error.lineBackground#e7828420
testing.message.info.decorationForeground#c6d0f5
testing.message.info.lineBackground#8caaee20
testing.peekHeaderBackground#292c3c
testing.runAction#626880
textBlockQuote.background#292c3c
textBlockQuote.border#8caaee
textCodeBlock.background#303446
textLink.activeForeground#81c8be
textLink.foreground#8caaee
textPreformat.foreground#8caaee
textSeparator.foreground#f0f
titleBar.activeBackground#303446
titleBar.activeForeground#c6d0f5
titleBar.inactiveBackground#292c3c
titleBar.inactiveForeground#51576d
toolbar.activeBackground#51576d
toolbar.hoverBackground#414559
tree.indentGuidesStroke#c6d0f5
walkThrough.embeddedEditorBackground#303446
welcomePage.background#303446
welcomePage.buttonBackground#292c3c
welcomePage.buttonHoverBackground#414559
welcomePage.progress.background#51576d
welcomePage.progress.foreground#8caaee
welcomePage.tileBackground#292c3c
welcomePage.tileHoverBackground#414559
widget.shadow#303446

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#51576d	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#e78284	—
variable.other.object.property	#8caaee	—
constant.other.color	#a6d189	—
invalid, invalid.illegal	#e78284	—
invalid.deprecated	#eebebe	—
keyword, storage.modifier	#ca9ee6	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#ca9ee6	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#ca9ee6	—
keyword.type, storage.type.primitive	#81c8be	—
storage.type.function	#8caaee	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#c6d0f5	—
punctuation.section.embedded, variable.interpolation	#eebebe	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#e78284	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#8caaee	—
meta.block variable.other	#e78284	—
support.other.variable, string.other.link	#e78284	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#ef9f76	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#a6d189
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#e5c890	—
storage.type, storage.modifier.package, storage.modifier.import	#e5c890	—
entity.name.variable.field	#8caaee	—
support.type	#81c8be	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#81c8be	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e78284	—
variable.language	#e78284	italic
entity.name.method.js	#8caaee	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#8caaee	—
entity.other.attribute-name	#8caaee	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#e5c890	italic
entity.other.attribute-name.class	#e5c890	—
source.sass keyword.control	#8caaee	—
markup.inserted	#a6d189	—
markup.deleted	#e78284	—
markup.changed	#ca9ee6	—
string.regexp	#81c8be	—
constant.character.escape	#81c8be	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8caaee	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ca9ee6	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8caaee	—
text.html.markdown, punctuation.definition.list_item.markdown	#c6d0f5	—
text.html.markdown markup.inline.raw.markdown	#ca9ee6	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#81c8be	—
text.html.markdown meta.dummy.line-break	#51576d	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#8caaee	—
markup.italic	#e78284	italic
markup.bold, markup.bold string	#e78284	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#e78284	bold
markup.underline	#ef9f76	underline
markup.quote punctuation.definition.blockquote.markdown	#81c8be	—
markup.quote	—	italic
string.other.link.title.markdown	#8caaee	—
string.other.link.description.title.markdown	#ca9ee6	—
constant.other.reference.link.markdown	#e5c890	—
markup.raw.block	#ca9ee6	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#ca9ee6	—
variable.language.fenced.markdown	#e78284	—
meta.separator	#81c8be	bold
markup.table	#ca9ee6	—
token.info-token	#8caaee	—
token.warn-token	#e5c890	—
token.error-token	#e78284	—
token.debug-token	#ca9ee6	—

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